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

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.

Getting WordPress to work on GoDaddy’s free hosting account…finally!

Aye….another failed attempt.  Close.   If someone can provide some suggestions, I think we can get there….

Tested in Firefox 3.6.6  Does not work in Chrome.  IE….won’t even try.

It took me a few tries….okay, a bunch of tries, but in the end it’s a really simple fix to get WordPress 3.0 to work on GoDaddy’s free hosting account.

From my experience, I have not had any issues on the front end of wordpress, it is only the admin that breaks.

To fix this, you’ll have to edit some files, but it’s not a big edit.

To get started, open up wp-admin/index.php

Change the top of index.php file to look like this:

<?php

ob_start();

/**

* Dashboard Administration Panel

All we’ve done here is add the line ob_start();

Next, at the very, very bottom of that page…I mean the very bottom, put the following code:

<?php
$buffer = ob_get_contents();
ob_end_clean();
$buffer = str_replace(array(‘<html>’, ‘</html>’), ”, $buffer);
$handle = fopen(“./temp.html”, ‘w+’);
fwrite($handle, $buffer);
fclose($handle);
?>
<script type=”text/javascript”>
$(document).ready(function() {
$(“head”).remove();
$(“body”).remove();
$.get(“./temp.html”, function(data){ $(“html”).append(data); } );
});
</script>
That’s it!
Save that, and refresh your admin index page.
What we have done here is essentially grab all the data that would be output by WordPress before GoDaddy’s get’s is greasy fingers on it, store that in a file.  Then we wait for the entire page to load, let GoDaddy do what they need to do, then wipe the page clean.  We then send out a request to get the non-abducted code and make that your page.  The ole switch-a-roo!
Of course, you probably stopped reading this after you saw that it worked and are now back here reading again to find out why none of the links work. 🙂
Well, we only changed the index.php page.  If you notice in your browser, you are probably now on post.php or edit.php.  This means that each file will need to have the above fix added to it.  I know, so much work, but totally worth it for about a half hour of work.
Caveat: GoDaddy’s puts those ads in there for a reason, so I’d advise to leave them on frontend of your site.  Yeah, I know, I hate them, but hey, a free account for a banner ad, not a bad price to pay.   I took them off my admin for one, because it broke it!, but two because, I’m the admin!!!  They don’t need to advertise to me, I already have an account with them.
-Happy coding!

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.