0

I asked this question today and got some great answers (thanks to the guys who helped me out there :) ).

Now please have a look at the following code. I'm a 100% sure the resizing part works, but my if/else statement doens't work (I'm still a JS rookie). I also mentioned this in my previous topic, but someone said I should rather post a new question.

(The script should detect someones browser width, so it can resize the #fluidimage) note: the resizing part works. Only the viewportwidth detection and the if/else statement isnt functional yet.

$(window).load ( function () {

    function resizer (index, measurement) {
        var imageresize = 80;
        var viewportWidth = width();

       if ((viewportWidth >= 1680)) {
            imageresize = 100;
       } else if ((viewportWidth <= 1680) && (viewportWidth > 1280)) {
            imageresize = 80;
       } else if ((viewportWidth <= 1280) &&  (viewportWidth > 1024)) {
            imageresize = 60;
       } else if ((viewportWidth <= 1024) ) {
            imageresize = 40;
       } else {
            imageresize = 100;
       }


        this.wCall = (typeof this.wCall == "null") ? true : this.wCall ^ true;
        return this.wCall ? Math.round (measurement * imageresize / 100) : measurement;
    }
    $("#fluidimage").width (resizer).height (resizer);
} );
Community
  • 1
  • 1
Frank
  • 1,374
  • 2
  • 16
  • 34
  • Would you consider doing the sizing in pure CSS? You could follow the width-logic in a framework such as Less Framework (http://lessframework.com/) and then you'd be able to avoid any flicker effect between when the image has loaded and when the DOM is finished rendering. – Eric Caron Jul 23 '11 at 16:57

1 Answers1

1

Change:

var viewportWidth = width();

To:

var viewportWidth = $(window).width();


See it at jsFiddle.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295