Object type.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Object type.

Post by JellyFish »

How would I check if this is referring to an image object?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

If memory serves, you check if the prototypes are the same.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

What are prototypes?

EDIT: Woops! Let me clarify. I don't mean image object. I actually mean image element. :wink:
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

for objects: typeof(this)

for elements: this.tagName
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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???
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

works for me... are you sure you're grabbing the element properly? post more code.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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');
});
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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:
Post Reply