CODEWITHSUNDEEP
jqueryfirefox4
user520300
user520300

Reputation: 1527

jQuery in Firefox 4

This code was working fine until i went to firefox 4 and now it requires two clicks on the same image for the resize to work? Any thoughts? 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 in case someone sees something in it?

(function( $ ) {



  $.fn.aeImageResize = function( params ) {

    var aspectRatio = 0
      // Nasty I know but it's 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 );

Upvotes: 6

Views: 960

Answers (5)

IberoMedia
IberoMedia

Reputation: 2304

add event to your function within your click event

from this (code you posted):

$(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 this

$(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 the word event in your second function()

did it work?

Upvotes: 0

Deepak Kumar
Deepak Kumar

Reputation: 3751

buddy try to download the latest jquery package and try to use that js file. I think the problem is FF4 does not properly support old version js files. I am not sure but you can try.

Upvotes: 0

Francisco Alvarado
Francisco Alvarado

Reputation: 2813

@user520300: Also you can test it in Firefox 3.6.16 by installing it in a different folder than default one and managing the two versions in separate profiles (this example is for 3.0 and 3.5 but you can apply it by analogy to 3.6.16 and 4.0). Don't forget to install Firebug (1.6.2) and Firequery to your FF 3.6.16 too, then by comparing consoles you'll see if there is some FF4 issue that prevents your code from working OK, or it's just a misconfiguration (like in this case) that leads to strange behaviors in FF4.

Upvotes: 0

Francisco Alvarado
Francisco Alvarado

Reputation: 2813

Please give a try to FireQuery (for use with Firebug), maybe this tool could help you to find out the problem.

Upvotes: 1

ZippyV
ZippyV

Reputation: 13028

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 });
        });
});

Upvotes: 0

Related Questions