Resolved: jQuery Cycler not Working with IE PNGs

For those of you who have read my stuff before, either here or elsewhere, know that I despise Internet Explorer with a passion.  Nevertheless, until the powers that be (Google) stop supporting it so everyone else can follow suit, us burdened developers must still make our clients happy.

To fuel my anger against IE, I spent hours trying to get the jQuery Cycle plugin working with some PNGs that were laid on top of some other PNGs.  I’m not sure if them being laid on other PNGs had anything to do with it…really didn’t care….should just work…..but it didn’t.

I tried revising the jQuery plugin with no luck.  So I decided to write a custom solution.  I haven’t made this all pretty for you guys to use, so sorry about that.  This is just a case study and I’ll be happy to help you through your problem later.  The issue was explained quite well here: http://stackoverflow.com/questions/1156985/jquery-cycle-ie7-transparent-png-problem; which basically says the problem is that IE can’t handle multiple filters at one time.  So when you are fading your image, an alpha filter is applied to the image and it disregards any other filter you have…which if you have toiled through documents you probably have the Microsoft filter I’m about to mention already applied to your images, scratching your head, and cussing at an inanimate computer screen.

To fix this, we “simply” need to wrap our images in a div and fade the div.

Let’s look at our slideshow html:

<div id="prev"><a href="#"></a></div>
<div id="slides" style="visibility:hidden">
<div style="position:absolute;"><img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image1.png'); margin-top:'.$tmargin.'px" src="image1.png" alt="Thumbnail Image" title="Thumbnail Image" /></div>
<div style="position:absolute;"><img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image2.png'); margin-top:'.$tmargin.'px" src="image2.png" alt="Thumbnail Image" title="Thumbnail Image" /></div>
<div style="position:absolute;"><img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image3.png'); margin-top:'.$tmargin.'px" src="image3.png" alt="Thumbnail Image" title="Thumbnail Image" /></div>
</div>
<div id="next""><a href="#"></a></div>
</div>

To start off with, we make our slides div invisible. We do this so we have time to hide out image after the page loads. If we don’t, there’s a good change that you’ll see all your images dumped down the screen.
Then we wrap out list of images in a div that is absolutely positioned.
Then we apply the ridiculously stupid Microsoft filter to the images.
Now we add a little magic:

<script>
jQuery(document).ready( function(){
	var set = 0;
	var ci = -1;
	var timer;
	function createLoop(dir){
		var id = 'slides';
		var el = 'div';
		var time = 5000;
		var lp = document.getElementById(id).getElementsByTagName(el);
		if(set == 0){
			jQuery("#showcase #next").click( function(){ clearTimeout(timer); createLoop(); } );
			jQuery("#showcase #prev").click( function(){ clearTimeout(timer); createLoop("reverse"); } );
		}
		set = 1;
		if(dir == "reverse"){
			ci = ci-1;
			if(ci < 0){ ci = lp.length-1; }
		}else{
			ci = ci+1;
			if(ci > lp.length-1){ ci = 0; }
		}
		for(var y=0; y<lp.length; y++){
			if(y != ci){ jQuery(lp[y]).fadeOut('slow'); }
		}
		jQuery(lp[ci]).fadeIn('slow');
		timer = setTimeout(function(){ createLoop(); }, time);
	}
	var lp = document.getElementById('slides').getElementsByTagName('div');
	for(var i=1; i<lp.length; i++){
		lp[i].style.display = 'none';
		if(i == lp.length-1){ document.getElementById('slides').style.visibility = 'visible'; setTimeout(function(){ createLoop(); }, 5000); }
	}
});
</script>

You’ll need to change these three lines:

var id = 'slides';
var el = 'div';
var time = 5000;
id is the id of the wrapper that is around the img and img div wrapper.
el is the img wrapper. In our case it's a div.
time is the milliseconds until next fade.
We are using a little jquery in there, so you'll need to include jQuery in your file.
Take a look at that and chew it over...it works.  I know that. :)
Advertisements

jQuery, Internet Explorer, and another dumb Object Expected Error

Ran into another frustration today and thought I would share.

I have been using jQuery, but needed MooTools also.  Added MooTools, but didn’t realize that my contact form hadn’t been working for a week!  In a panic, I quickly reviewed all the changed I had made in the past week, especially those that would have had any affect on my contact form.  I remembered MooTools.  That was it.  I had to change the namespace for jQuery so MooTools and jQuery wouldn’t fight each other.

I did that by simply adding the following code after my jQuery and MooTools includes:

<script type=”text/javascript”>
var $j = jQuery.noConflict();
</script>
Now, instead of making jQuery calls with just $, I had to use $j.  No big deal.
But now, I noticed another error I was getting that I must not have seen before.  In Internet Explorer, I was getting a wonderful, glorious, object expected error.  I enabled Script Debugger and it pointed me to Character 3 of a jQuery call.
$j(……
In my case, would have been an open parentheses.  What the heck?!
After much searching on Google, I finally ran across a blog that led me to the answer: http://www.scriptingblog.com/javascript-and-ajax/jquery/object-expected-error-in-ie6-ie7-and-ie8/78
I was including my jQuery like this:
<script type=”text/javascript” src=”/jquery.js” />
I changed it to this:
<script type=”text/javascript” src=”/jquery.js”></script>
Refreshed Internet Explorer, made this post, and went to bed.
Hopefully someone else sleeps well tonight now.