Complications using Javascript onresize function

Question

I am working on a prototype of a project in which I need to adjust the look and feel of site content according to the browser window size.

Now for the prototype I am using a sample image and I want to adjust the height and width of the image as per window's height and width.

Here's the code that I am using:

$(window).resize(function() {
   document.write("<img src='sample_image.jpg' border='0' height='"+window.innerHeight+"' width='"+window.innerWidth+"'>");
});

The above code doesn't work properly. I want to dynamically change the image height and width as user resizes the window. I also tried implementing this solution. But that didn't work either. Any ideas how can I solve this?

Couldn't responsive design be the solution, instead of javascript ? Just asking :) — Clement Herreman, May 07 '12 at 10:23
Well I managed to implement this in Flash, but I want to develop it for non-Flash browsers or for iPhone/iPads. Hence I am trying to see if its possible in javascript — skos, May 07 '12 at 10:28

VisioN · Answer 1 · 2012-05-07T10:39:03.187

Well, since this is needed for testing purposes only, and it seems that you use jQuery, try this code:

<img src="sample_image.jpg" border='0' height="1" width="1" style="display: block;">

<script>
    var resize = function() {
        $("img").width($(window).width()).height($(window).height());            
    };
    $(window).resize(function() {
       resize();
    });
    resize();
</script>

DEMO: http://jsfiddle.net/GvRJ7/

Otherwise, myself and other guys here strongly recommend you using good HTML/CSS markup to make your design fit any resolution.

score 0 · Answer 2 · answered May 07 '12 at 10:27

0

Instead of window.innerHeight and window.innerWidth you can try using percentage.That Will Resize your image accordingly to windows height andwidth.

document.write("<img src='sample_image.jpg' border='0' height='"70%"' width='"70%"'>");

answered May 07 '12 at 10:27

vishnu

869
1
16
25

score 0 · Answer 3 · answered May 07 '12 at 10:27

Think of how often window.resize() fires (if you have any doubt, console.log() it). Only inexpensive operations should be performed inside it, like incrementing a counter, or calculating a position.

In your particular case, I think a 100% width/height image will work using just CSS (or CSS generated with JavaScript if needed). Of course, this will look bad as the image gets beyond its real size, and waste bandwidth when it is below its real size, but it will have the equivalent effect to your code at a fraction of the expense.

As a side note, document.write() should rarely be used. Use DOM manipulation functions instead.

using `document.write()` purely for testing purpose – skos May 07 '12 at 10:31 — skos, May 07 '12 at 10:31

Complications using Javascript onresize function

3 Answers3