jQuery in Firefox 4

Asked 7/4, 2011 at 15:13 Answered 9/6, 2011 at 3:35

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

Bred answered 7/4, 2011 at 15:13 Comment(10)

Can you go to a machine that has FF3 and see if the code still works? – Nightly 7/4, 2011 at 15:18

It does work in FF3, also in safari, chrome, ie 7, ie 8, (dont know about ie 6 or 9) – Bred 7/4, 2011 at 15:21

What version of jQuery are you using? – Nightly 7/4, 2011 at 15:23

code.jquery.com/jquery-latest.js im calling this file – Bred 7/4, 2011 at 15:24

I would blindly assume that it has something to do with this plugin aeImageResize. Have you stepped through your code using console.log() to verify everything is coming through as you'd expect? – Felicio 7/4, 2011 at 15:30

@Seth, still step through the code using console.log() ...? – Alidis 7/4, 2011 at 15:49

how do i use console.log()? i know that the error console in firefox 4 under tools->error console shows no errors on load or after clicking the images – Bred 7/4, 2011 at 15:51

basically you would start by checking console.log(imgTitle); put it right after you declare the variable. Make sure this is the correct title. Then check console.log($(this).children('img').attr('rel')); to verify your data is correct. Basically you can put anything in console.log() and if you have Firebug installed inspect the element and click the console tab. This will save you a million times over with JavaScript development. – Felicio 7/4, 2011 at 16:54

Ive used firebug which is showing no errors or warnings in FF4. Is it possible that FF4 (has issues) that is preventing this from working correctly? – Bred 8/4, 2011 at 1:33

Can you post the HTML you are working with? It would also help if you can upload your code to jsfiddle.net . – Kenon 11/4, 2011 at 2:0

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?

Iggy answered 9/6, 2011 at 3:35 Comment(0)

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

Hexahydrate answered 7/4, 2011 at 15:50 Comment(1)

Im not that familiary with firebug or firequery but i know firebug is showing now errors while using this code. Is it possible that FF4 that is preventing this from working correctly? – Bred 8/4, 2011 at 1:32

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

Papagena answered 7/4, 2011 at 15:40 Comment(0)

@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.

Hexahydrate answered 8/4, 2011 at 2:6 Comment(1)

thanks. Ill try. Not that familiar yet with firebug or firequery so im not 100% sure im following it correctly anyway but ill see if i can notice something between the two. – Bred 8/4, 2011 at 11:29

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.

Jungly answered 14/4, 2011 at 18:16 Comment(1)

OP stated (in a Comment) that he's using jquery-latest.js – Isomerism 14/4, 2011 at 18:37