JQuery in Firefox 4

Question

This code worked fine until I went to firefox 4, and now to change it requires two clicks on the same image. Any suggestions? Here is the code.

$(document).ready(function(){ $("#slideShow a").click(function() { var imgTitle = $(this).children('img').attr('title'); // Find the image title $("#thecap").html(' ' + imgTitle + ' '); $("#lgImage").attr('src', $(this).children('img').attr('rel')); $( ".resizeme1" ).aeImageResize({ height: 372 }); }); }); 

Here is the plugin code if someone sees something in it?

 (function( $ ) { $.fn.aeImageResize = function( params ) { var aspectRatio = 0 // Nasty I know but it done only once, so not too bad I guess // Alternate suggestions welcome :) , isIE6 = $.browser.msie && (6 == ~~ $.browser.version) ; // We cannot do much unless we have one of these if ( !params.height && !params.width ) { return this; } // Calculate aspect ratio now, if possible if ( params.height && params.width ) { aspectRatio = params.width / params.height; } // Attach handler to load // Handler is executed just once per element // Load event required for Webkit browsers return this.one( "load", function() { // Remove all attributes and CSS rules this.removeAttribute( "height" ); this.removeAttribute( "width" ); this.style.height = this.style.width = ""; var imgHeight = this.height , imgWidth = this.width , imgAspectRatio = imgWidth / imgHeight , bxHeight = params.height , bxWidth = params.width , bxAspectRatio = aspectRatio; // Work the magic! // If one parameter is missing, we just force calculate it if ( !bxAspectRatio ) { if ( bxHeight ) { bxAspectRatio = imgAspectRatio + 1; } else { bxAspectRatio = imgAspectRatio - 1; } } // Only resize the images that need resizing if ( (bxHeight && imgHeight > bxHeight) || (bxWidth && imgWidth > bxWidth) ) { if ( imgAspectRatio > bxAspectRatio ) { bxHeight = ~~ ( imgHeight / imgWidth * bxWidth ); } else { bxWidth = ~~ ( imgWidth / imgHeight * bxHeight ); } this.height = bxHeight; this.width = bxWidth; } }) .each(function() { // Trigger load event (for Gecko and MSIE) if ( this.complete || isIE6 ) { $( this ).trigger( "load" ); } }); }; })( jQuery ); 

Answer 1

add an event to your function during your click event

from this (the code you sent):

 $(document).ready(function(){ $("#slideShow a").click(function() { var imgTitle = $(this).children('img').attr('title'); // Find the image title $("#thecap").html(' ' + imgTitle + ' '); $("#lgImage").attr('src', $(this).children('img').attr('rel')); $( ".resizeme1" ).aeImageResize({ height: 372 }); }); }); 

to that

 $(document).ready(function(){ $("#slideShow a").click(function(event) { var imgTitle = $(this).children('img').attr('title'); // Find the image title $("#thecap").html(' ' + imgTitle + ' '); $("#lgImage").attr('src', $(this).children('img').attr('rel')); $( ".resizeme1" ).aeImageResize({ height: 372 }); }); }); 

noticed a word event in the second function ()

Did it work?

Answer 2

Try FireQuery (for use with Firebug ), perhaps this tool will help you find the problem.

Answer 3

Just guessing:

 $(document).ready(function(){ $("#slideShow a").click(function(e) { e.preventDefault(); var imgTitle = $(this).children('img').attr('title'); // Find the image title $("#thecap").html(' ' + imgTitle + ' '); $("#lgImage").attr('src', $(this).children('img').attr('rel')); $( ".resizeme1" ).aeImageResize({ height: 372 }); }); }); 

Answer 4

@ user520300: You can also test it in Firefox 3.6.16 by installing it in a different folder than the default, and managing two versions in separate profiles (this example is for 3.0 and 3.5, but you can apply it by analogy with 3.6.16 and 4.0). Do not forget to install Firebug (1.6.2) and Firequery in your FF 3.6.16, then, comparing the consoles, you will see if there is any FF4 problem that prevents your OK code from working or is it just the wrong configuration (for example, in this case ), which leads to strange behavior in FF4.

Answer 5

Buddy will try to download the latest jquery package and try to use this js file. I think the problem is that FF4 does not support old js files of the old version. I'm not sure, but you can try.