HTML <img> Tag Issue In Google Chrome

Q: Why can I not get correct width and height of an image via Javascript in Chrome?On my other website Men's Fashion For Less I use a lot of jQuery plugins. I used http://www.smoothdivscroll.com/ to auto scroll a bunch of photos and to my surprise Chrome is not handling the scrolling image functionality correctly. Later I finally found out why. Read on to learn how I solved it.

AnswerIf you use jQuery a lot in a website and are currently trying to validate your website in Chrome, you may be surprised that it's not handling images the same way Internet Explorer and Firefox are via javascript. Basically if you are trying to get the width or height of an image via javascript or jQuery like the following:

var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

you need to make sure either of the following:

* The <img> tag has width and height specified as attributes or via CSS, or if you prefer...

* Use

$(window).load(function() {...})

instead of

$(document).ready(function() {...})

So that the Chrome can successfully detect the width and height of an image once it's loaded.


This is due to the fact that Chrome is a Webkit browser (same issue applies to Safari) and for some reason you need to explicitly tell Chrome the height and width of an image if you want to be able to access them via javascript. Internet Explorer and Firefox are able to detect the dimension of an image without you having to do the above. I am not sure why. Anyone care to enlighten me?

jQuery Plugins' Layout Issues In Internet Explorer 6

Q: I am using jQuery Cycle plugin but the element containing a set of photos to rotate through shows up at the wrong place in IE6. HELP!!!!

Okay you need help and YOU GOT IT! Below is a page on my other website www.mensfashionforless.com:



Here's the story behind it: While working on my website I needed to rotate through a set of photos on the top left corner of a webpage via some animation. I knew jQuery has this nice plugin called Cycle; so I downloaded and began to use it. When I was done everything worked great in IE7+, Firefox 3+, Chrome, but I saw a layout issue with IE6. The photo at the top left is at the wrong place:



In IE6 the container that contains the photos to slide show through shows up at a weird place in the page. At the start of the browser load it's at the right place, but when the animation kicks in the element gets positioned incorrectly, somewhere in the middle of the page. The correct page looks like the first photo.

Solution: This issue actually can be solved via CSS. Simply put all the image tags inside a div tag that has the following CSS property:

position: relative

and try again. This attribute needs to be present for IE6 to work; otherwise the plugin's jQuery UI CSS framework dynamic styling would position the element somewhere unexpected in IE6. The more advanced browsers are tolerant of this issue and therefore you don't see this CSS issue in them.

Q: I am not using jQuery but somehow an element is positioned at a funny place in the page. Any idea what's going on?

If you are floating some elements and some other element's layout is broken, try floating that element as well. For example I have three elements that I am floating, and at the end of them I clear:both, then I put an Adsense block, but the block is showing in the middle of the page which is not where it's supposed to be. After I wrapped the Adsense block in a div and float the div, the problem goes away.

Questions? Let me know!

How come jQuery UI Tab Widget Does Not Work?

I am using JQuery UI Tabs widget library but it doesn't put the content in tabs as it's supposed to. Why????

I had this question when I was trying to get JQuery UI's tab widget to work. When it works it looks like the following:



I included the necessary JQuery libraries which are basically jquery.js and jquery-ui.js, both of which can be accessed from Google Doc's code repository. I verified that those files are accessed correctly, but I kept not seeing my content put in tabs as jQuery UI API claims to do. After some digging I found that the failure can be due to the following causes:

* You need to include the necessary CSS: jquery comes with a default CSS stylesheet for its UI API, so you can either download it or simply reference it at Google Doc as follows:

<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'/>

Note if you download it you'll have to correct the path of each background image URL used in the stylesheet. Those URLs are relative paths, and since you'll be hosting it from a different server they'll be broken. You'll have to prefix it with http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base. You can further theme your tabs in your own CSS definitions. JQuery UI's official API guide has more information at http://docs.jquery.com/UI/Tabs.

* Do NOT use self closing script tag: This is extremely weird, but in my experiment I realized things fall apart when I use self closing script tag as follows:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery-ui.min.js" />

You should instead use the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery-ui.min.js"> </script>

Weird huh? I have absolutely no idea why this is the case. If any of you experienced the same thing feel free to enlighten me.

That should solve your problem and jQuery UI's tab widget should start working! Questions? Let me know!

Blogger's Issues With jQuery

If you use Google's Blogger and you are using jQuery to achieve cool image effects, you may run into the following issues. Here are some of them and their proposed solutions

Question: I am using jQuery Cycle plugin. How come when I do the "fade" effect (or any effect at all) there's a long delay between two sequential images? One image is supposed to fade out as the next one starts to fade in, thereby creating a non-stop visual effect.

Answer: The editor you are using in Blogger is probably inserting HTML line breaks for each new line You do NOT want any line breaks in the div block that encloses the images you are fading in and out. It'll break the Cycle plugin where the fading effect is gone. For example the div block may look like the following:

<div id="slideshow">
<img src="image1.jpg" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>

You want to make sure there is no <br/> in this div block. Simple use the following div instead:

<div id="slideshow"><img src="image1.jpg" /><img src="image2.jpg" /><img src="image3.jpg" /></div>

Then you should be good to go.

Another way is to pick the "Use <br/> tags" radio button in  your Post Options located right below the editor. Then you'll have to explicitly put <br/> wherever you want breaklines, which is a bit of a hassle.

If this doesn't solve your problem, monitor the fading action in Firebug and see if the "opacity" attribute of each image is being dynamically incrementally updated from 0 to 1. This issue is caused by the opacity attribute not updated incrementally, and therefore an image either shows up completely or disappears completely.