Using JQuery / javascript to create a dynamic image: what am I doing wrong?

Question

please have a look at the following code: (I removed all doctypes etc for readability).

I guess the code is pretty self-explaining: The javascript code retrieves the height and width from the image below and creates two new variables (newHeight and newWidth) which are shrunk by 80% of the original values. When the document loads, those two new variables (newHeight and newWidth) should be assigned to the height and width attribute of the image, but this doesn't happen.

Can somebody help me out?

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />

<script type="text/javascript">
var width = $("#fluidimage").width();
var height = $("#fluidimage").height();

var imageresize = 80;
var newHeight = Math.round(height/100)*imageresize);
var newWidth = Math.round(width/100)*imageresize);
</script>

</head>
<body onload="document.getElementById('#fluidimage').style.width=newWidth; document.getElementById('#fluidimage').style.height=newHeight;"> 
    <img src="images/1.jpg" id="fluidimage" height="" width=""  />
</body>
</html>

aren't width and height always 0, since you declare them before even setting the width and height of #fluidimage? — Quasdunk, Jul 23 '11 at 14:53
Frank, please ask follow-on questions, in new questions. Thanks! — Brock Adams, Jul 23 '11 at 16:37

Brock Adams · Answer 1 · 2011-07-23T16:08:33.063

3

You need to wait for the whole document to load (pictures load last), so that the images will have a detectable size.

This code should work:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />

<script type="text/javascript">
    $(window).load ( function () {
        var width   = $("#fluidimage").width();
        var height  = $("#fluidimage").height();

        var imageresize = 80;
        var newHeight = Math.round(height*imageresize/100);
        var newWidth = Math.round(width*imageresize/100);

        $("#fluidimage").width (newWidth).height (newHeight);
    } );
</script>

</head>
<body> 
    <img src="images/1.jpg" id="fluidimage" />
</body>
</html>

See it in action at jsFiddle.

Note that the math needs to take place before the rounding.

Also, jQuery allows you to "simplify" the JS to:

$(window).load ( function () {

    function resizer (index, measurement) {
        var imageresize = 80;
        this.wCall = (typeof this.wCall == "null") ? true : this.wCall ^ true;
        return this.wCall ? Math.round (measurement * imageresize / 100) : measurement;
    }
    $("#fluidimage").width (resizer).height (resizer);
} );

See that in action at jsFiddle.

edited Jul 23 '11 at 16:08

answered Jul 23 '11 at 14:53

Brock Adams

90,639
22
233
295

Thank you, but somehow the JQuery version doesnt resize in porportion. – Frank Jul 23 '11 at 15:19
@brock: +1 superb. thanks for `.width( function(index, width) )` and `.height( function(index, height) )`. also curious on why its not re-sizing correctly – naveen Jul 23 '11 at 15:24
Yes, should have stuck with the first version (which works fine). @naveen, the chained second version acted like this: (1) set width correctly {good}, then (2) the browser reduced height in proportion, which the code failed to account for. Then (3) the height was set to 80% of the *new* value -- hence it was too short. So H and W cannot be chained that way. – Brock Adams Jul 23 '11 at 15:40
ah! i got that. thanks anyway.is that a universal behaviour of browser / jquery. i mean if it works for all browsers then you could just call `$("#fluidimage").width (resizer)` right? – naveen Jul 23 '11 at 15:42
@naveen, You also need the `removeAttr ('height')` bit. And, even then, CSS can override the height. Best just to use my original version. – Brock Adams Jul 23 '11 at 15:54
@naveen and Frank: Updated the second version to also work correctly (proportional and no additional worries about CSS). – Brock Adams Jul 23 '11 at 16:10
Frank, don't change the question like that! This one was answered. [Open a new question for the new issue](http://stackoverflow.com/questions/how-to-ask). – Brock Adams Jul 23 '11 at 16:36
But it's just an addition to this question :( – Frank Jul 23 '11 at 16:41
Yes, but it's changing the question midstream in a way that can confuse and lower the value of BOTH questions. Anywho, I looked at the addition and it appears that the new problem may just be that `var viewportWidth = width();` should be `var viewportWidth = $(window).width();`. – Brock Adams Jul 23 '11 at 16:44

naveen · Accepted Answer · 2011-07-23T15:36:17.757

Looks like the first two answers missed an opening brace at Math.Round
Try this.

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />

        <script type="text/javascript">
            $(document).ready(function() {
                var imageresize = 0.8;
                var $image = $("#fluidimage");
                $image.css({
                    "width": Math.round($image.width() * imageresize),
                    "height": Math.round($image.height() * imageresize)
                });
            });
        </script>
    </head>
    <body> 
        <img id="fluidimage" src="images/1.jpg" />
    </body>
</html>

Working Demo: http://jsfiddle.net/naveen/58GBd/

Use screen.width for resizing according to screen.

$(document).ready(function() {
    var imageresize = 0.0;
    var $image = $("#fluidimage");
    switch (screen.width) {
        case 1680:
            imageresize = 0.5;
            break;
        case 1280:
            imageresize = 0.4;
            break;
        case 1024:
            imageresize = 0.3;
            break;
        default:
            imageresize = 0.8;
            break;
    }
    $image.css({
        "width": Math.round($image.width() * imageresize),
        "height": Math.round($image.height() * imageresize)
    });
});

Working Demo: http://jsfiddle.net/naveen/Xbe4v/

Now where to place the javascript code: before or after the image? — Frank, Jul 23 '11 at 15:11
Nevermind, I included jquery the wrong way. This works perfectly, thanks! — Frank, Jul 23 '11 at 15:15
Thanks again. Could you also help me out with the following: What if I'd like to resize depending on the browser viewport dimensions? For example: if your screen width is 1680px, resize it by 50%. If your screen is 1024 px, resize it by 30%. (fictional numbers) — Frank, Jul 23 '11 at 15:23
Hmmm. This only works if you screenwidth is exactly 1680 or 1280 or 1024, right? — Frank, Jul 23 '11 at 15:55

score 0 · Answer 3 · answered Jul 23 '11 at 14:53

You should wait for the page to be loaded before you calculcate the widht/height. Try this

  <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" />

    <script type="text/javascript">
    function() setImageDimensions{

      var width = $("#fluidimage").width();
      var height = $("#fluidimage").height();

      var imageresize = 80;
      document.getElementById('#fluidimage').style.width= Math.round(width/100)*imageresize);       
      document.getElementById('#fluidimage').style.height=Math.round(height/100)*imageresize;

    }
    </script>

    </head>
    <body onload="setImageDimenstions();"> 
        <img src="images/1.jpg" id="fluidimage" height="" width=""  />
    </body>

</html>

Using JQuery / javascript to create a dynamic image: what am I doing wrong?

3 Answers3

Linked