Works fine in chrome (go figure) but not in IE

[dzhax]

So I am building my own "click a thumbnail and it shows and enlarged version" script for my personal website.

 

As the title says it works beautifully in chrome but it does not work in IE

$(document).ready(function() {    $('.projectThumbnail').click(function(){	$('<div>',{id:"thumbBacksplash"}).css('display','none').appendTo("body").fadeIn(350, "linear");	$('<div>',{id:"thumbnail"}).css('display','none').appendTo("#thumbBacksplash").html("<image class='terminate' onclick="closeImage()" src='image/terminate.png' alt='Close' title='Close Image'><image class='largeThumb' src='"+$(this).children('img').attr('src')+"' alt='"+$(this).children('img').attr('alt')+"' /><div class='normal thumbHelp'>To close the image click the X in the top left of the image or <span onclick="closeImage()">Click Here</span></div>").fadeIn(350, "linear");	});});			function closeImage(){    $('#thumbBacksplash').fadeOut(350, "linear", function() { $(this).remove(); });    $('#thumbnail').fadeOut(350, "linear", function() { $(this).remove() });}

So what it does is creates 2 divs "on the fly". one is a backdrop that covers the page. The other is a div that holds the enlarged version of image.

 

The part I am having trouble with is the $('.projectThumbnail').click() doesn't appear to fire.

 

I am using almost i identical code for creating divs in other aspects of the site so I know that part is correct. is there a known issue with using the jquery method .click() in IE?

[Ingolme]

jQuery is designed to be cross-browser compatible, so there's nothing wrong witht he click() method. I'd have to see the page in action to see what's wrong. Have you checked the Javascript error console?

 

This isn't the cause of your problem but you created an element called <image> instead of <img>

[dzhax]

wow i feel dumb with the image thing.

 

as for the actual page in question, http://www.louisgarrett.me

 

to get to the picture in question:

1. click the gray background as the under construction message states ( background is gray in IE and its dimmed in chrome, ff, etc. as IE doesn't support rgba(###,###,###,###) )

2. click on PROJECTS in the navigation at the top of the screen

3. click on the thumbnail to the right of "Stand Them Up"

 

the similar code i stated is what is generating the under construction message.

 

as far as checking the console, does IE have a console? I know FF and Chrome does but i never seen an IE console.

[justsomeguy]

You can open IE's developer tools by pressing F12.

[dzhax]

thank you for the F12 tip.

 

For some reason everything is working fine now. I don't know why. It wasn't a cookie/cache issue becasue I always ctrl+f5 when i refresh so it loads new each time. so weird.

 

I did find out that my IE was set to IE10 Compatability mode and it uses RGBA just fine when it is not in comatability mode

 

What is weird now is when I click on the image in compatability mode the image shows but the backsplash doesn't.

[dzhax]

Figured it out. forgot to put the css for the backsplash when IE < 9. Thanks for everyone's help!