jQuery in Firefox 4

Question

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

Can you go to a machine that has FF3 and see if the code still works? — webdad3, Apr 07 '11 at 15:18
It does work in FF3, also in safari, chrome, ie 7, ie 8, (dont know about ie 6 or 9) — user520300, Apr 07 '11 at 15:21
http://code.jquery.com/jquery-latest.js im calling this file — user520300, Apr 07 '11 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? — Seth, Apr 07 '11 at 15:30
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 — user520300, Apr 07 '11 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. — Seth, Apr 07 '11 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? — user520300, Apr 08 '11 at 01:33
Can you post the HTML you are working with? It would also help if you can upload your code to http://jsfiddle.net/ . — Jeffery To, Apr 11 '11 at 02:00

score 1 · Answer 1 · answered Apr 07 '11 at 15:50

1

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

answered Apr 07 '11 at 15:50

Francisco Alvarado

2,815
2
26
51

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? – user520300 Apr 08 '11 at 01:32

score 0 · Answer 2 · answered Apr 07 '11 at 15:40

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

score 0 · Answer 3 · edited May 23 '17 at 11:47

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.

edited May 23 '17 at 11:47

Community

1
1

answered Apr 08 '11 at 02:06

Francisco Alvarado

2,815
2
26
51

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. – user520300 Apr 08 '11 at 11:29

score 0 · Answer 4 · edited May 02 '11 at 01:09

0

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.

edited May 02 '11 at 01:09

Kevin Pope

2,964
5
32
47

answered Apr 14 '11 at 18:16

Deepak Kumar

3,623
9
32
32

1

OP stated (in a Comment) that he's using **jquery-latest.js** – drudge Apr 14 '11 at 18:37

score 0 · Accepted Answer · answered Jun 09 '11 at 03:35

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?

jQuery in Firefox 4

5 Answers5