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. :)

Change AddThis Facebook Description and Title

This is a super cheesy hack, but nonetheless, it got me through an website build.

So, as I’m sure you’ve read, using addthis.com api custom descriptions and title does not work with Facebook.  Facebook insists on scanning your page for it’s own content and description.

Lucky for us, we can specify what URL is scans.

Using the information found here: http://developers.facebook.com/docs/share we can see that we can pass our own link to facebook.  So that’s exactly what we’ll do.

Let’s look at our AddThis code

<div id="add_this">
<div>
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4c22c53745c89a46"><img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0"/></a>
<a><img src="/images/social_email.png" title="Email Us"/></a>
<a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.allebrum.com%2Fsharefacebook.html&t=Share%20This" target="_blank"><img style="margin:0 3px 0 2px;" src="/images/social_facebook.png" title="Like Us On Facebook"  /></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c22c1bc64ddaee6"></script>
</div>

You’ll want to make your own code on the addthis.com website.
Then you can make modifications to it like we did. Take a look at the facebook url. We added in the href=”” line.
the u= specifies the url that you want to share. You’ll have to make sure that it is an encoded url like you see above.
Now, sharefacebook.html is not the page that I really want to share at all. It’s just a dummy page that facebook can scan and get the information that I actually want it to have.
Let’s take a look at sharefacebook.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="title" content="Allebrum!" />
<meta name="description" content="Allebrum's cool new Content Management system to have first release soon!" />
<title>Untitled Document</title>
</head>

<body>
<script>
document.location.href = "http://www.allebrum.com/";
</script>
</body>
</html>

Notice the two title and description meta tags. That is where you will specify your custom Title and Description that will show up on Facebook.
Facebook will scan this page.
You’ll want to replace this line: document.location.href = “http://www.allebrum.com/&#8221;; with a url that goes to the actual page you want your users to see when they click on the facebook shared link.