Page 1 of 1

Object type.

Posted: Tue Feb 13, 2007 2:00 pm
by JellyFish
How would I check if this is referring to an image object?

Posted: Tue Feb 13, 2007 2:02 pm
by feyd
If memory serves, you check if the prototypes are the same.

Posted: Tue Feb 13, 2007 2:09 pm
by JellyFish
What are prototypes?

EDIT: Woops! Let me clarify. I don't mean image object. I actually mean image element. :wink:

Posted: Tue Feb 13, 2007 2:19 pm
by Kieran Huggins
for objects: typeof(this)

for elements: this.tagName

Posted: Tue Feb 13, 2007 2:24 pm
by JellyFish
I tried:

Code: Select all

if (this.tagName.toUpperCase() == "IMG")
And IE gives me an error saying "this.tagName is null or not an object". 8O

Does IE not support tagName property???

Posted: Tue Feb 13, 2007 2:30 pm
by Kieran Huggins
works for me... are you sure you're grabbing the element properly? post more code.

Posted: Tue Feb 13, 2007 2:58 pm
by JellyFish
Oh yeah you're right! It's a jQuery object:

Code: Select all

if (navigator.userAgent.indexOf("MSIE 6" || "MSIE 5") != -1)
{
	jQuery.fn.pngies = function () {
		if (this.tagName == "img")
		{
			if (this.src.indexOf("x.gif") == -1)
			{
				$(this).css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')" });
				this.src = "x.gif"
			}
			else
			{
			}
		}
		else
		{
			$("img").each(function(i) {
				if ($(this).attr("class") != "nopngies")
				{
					$(this).load(function(e) {
						e = e || window.event;
						$(e.target).pngies();
					});
					
					if (this.src.substr(this.src.length - 4, 4).toUpperCase() == ".PNG")
					{
						$(this).css({ height: $(this).height(), width: $(this).width(), filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')" });
						this.src = "x.gif";
					}
				}
			});
		}
	}
	
	$(document).ready(function () {
		$().pngies();
	});
};
How would I use the typeOf method?

EDIT: Oh never mind, it's a operator.

Posted: Tue Feb 13, 2007 3:32 pm
by JellyFish
No, wait a minute. Typeof operator only returns "object" not what type of object (i.e. image object).

My code is this:

Code: Select all

if (navigator.userAgent.indexOf("MSIE 6" || "MSIE 5") != -1)
{
	jQuery.fn.pngies = function () {
		if (this equals an image object goes here)
		{
			if (this.src.indexOf("x.gif") == -1)
			{
				$(this).css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')" });
				this.src = "x.gif"
			}
			else
			{
			}
		}
		else
		{
			$("img").each(function(i) {
				if ($(this).attr("class") != "nopngies")
				{
					$(this).load(function(e) {
						e = e || window.event;
						$(e.target).pngies();
					});
					
					if (this.src.substr(this.src.length - 4, 4).toUpperCase() == ".PNG")
					{
						$(this).css({ height: $(this).height(), width: $(this).width(), filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')" });
						this.src = "x.gif";
					}
				}
			});
		}
	}
	
	$(document).ready(function () {
		$().pngies();
	});
};
where it says "this equals an image object goes here" I want the condition this to be an image object (e.g if (this.tagName.toUpperCase() == "IMG") //then proceed). How would I do that if this is a jQuery object?

Posted: Tue Feb 13, 2007 3:38 pm
by Kieran Huggins
how about:

Code: Select all

$(function(){
	// if it's not IE, get out
	if(!$.browser.msie) return true;
	$('img').filter(function(index){
		// code aborted
		if($(this).attr("class")=="nopngies") return false;
		// get the height, width and src before the image is gone
		h = $(this).height();
		w = $(this).width();
		src = $(this).attr('src');
		// if she's a png, keep the element
		if($(this).attr('src').search(/png$/i) >= '0') return true;
	// set the height, width, 'filter' and blank gif src
	}).height(h).width(w).css('filter',"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')").attr('src','blank.gif');
});

Posted: Tue Feb 13, 2007 4:01 pm
by JellyFish
Kieran Huggins wrote:how about:

Code: Select all

$(function(){
	// if it's not IE, get out
	if(!$.browser.msie) return true;
	$('img').filter(function(index){
		// code aborted
		if($(this).attr("class")=="nopngies") return false;
		// get the height, width and src before the image is gone
		h = $(this).height();
		w = $(this).width();
		src = $(this).attr('src');
		// if she's a png, keep the element
		if($(this).attr('src').search(/png$/i) >= '0') return true;
	// set the height, width, 'filter' and blank gif src
	}).height(h).width(w).css('filter',"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')").attr('src','blank.gif');
});
It's good!

First of all, you might want to change the browser check (!$.browser.msie) because this will also include IE7, and for those using IE7 will not have the image source at their fingers (via right click > properties) even when IE7 supports png alpha transparency. This is why I used the browser detection like I did.

Second, the script doesn't add any watches to these images. The purpose of adding watches is so that when a gif, for example, changes to a png with translucent pixels, the script then adds the IE css filter...

Any ways, for my script I need to check if the currently jQuery object is selecting a img. How would I set this condition? Please help me on this one. :cry: