Hi all! Having a great adventure of my first jQuery website — for ages I'd been telling myself "I should just get better at javascript", but I'd been following the development of Sizzle and thought, right, this is great!
http://antoniocaniparoli.co.uk/wip1 I am having a bit of a headache with cross-browser compatibilities though. My script has two purposes: positioning and sizing the various elements that constitute a photo gallery, and animating transitions between images. As far as the positioning and sizing is concerned, every major browser (Chrome, FF, IE, Opera, Safari latest stable releases) processes the maths/DOM metrics differently. I expected this out of IE, but it's incredibly distressing that the 'standardised' rendering engines differ so wildly in their interpretation of the same data. If anybody has any insights into this, I'd be very interested. For the moment, FF behaves as I believe everything else should in this matter (apart from:...) My biggest worry is to do with jQuery animation though. The gallery's 'sliding' mechanism — outside of the issue of the bad parsed maths — seems to 'skip' half of the animation in IE, FF & Safari. In Chrome and Opera it operates completely smoothly (but doesn't slide to the right location). The animation code is on lines 71-78 of http://antoniocaniparoli.co.uk/wip1/antonio.js: $('#gallery p a:first-child').click(function() { galLeft = parseInt($('#gallery').css('left'))+(vpX-294)/2+'px'; $('#gallery').animate({left: galLeft}, 1500); }) $('#gallery p a:last-child').click(function() { galLeft = parseInt($('#gallery').css('left'))-(vpX-294)/2+'px'; $('#gallery').animate({left: galLeft}, 1500); }) The equation takes the viewport's width and subtracts the offsetWidth of the non-gallery content on the left to give the gallery width — and in theory every item in the gallery has just enough left and right padding to fill the gallery's visible area. Again, all the metrics work in FF. So the real issue is why that animation is stilted in most browsers. Any ideas? NB: People might think this has something to do with the easing plugin I've got in there. I have commented out all reference to it to avoid ambiguity.