Help with javascript resizing image based on browser size

hey guys,

i found a free script online that would scale my image in a div based on the size of a users browser windows.

which is great. but the image always seems to ‘jump’ on load. (as my image is big to cover for larger res’s)… is there a way to avoid the unsightly jump?

see a preview here:

thanks!

ps. any code additions to fix this, or alt script recommendations would be super useful

Hi hellofromlondon. Welcome to the forums. :slight_smile:

The link seems to have taken a walk. Could you post it again? It’s likely that you could just use CSS for this. The jump may be the time it takes the JS to kick in.

hello there! thanks for the welcome :slight_smile:

whoops. the link is here:

http://www.slapadrone.com/test.php

i’ve got the fluid images script working great in chrome (test on page load, an resizing window)… but just doesn’t work in firefox. in firefox the image loads HUGE, and there’s no image resizing when the window is resized either.

any ideas how i can get it working in firefox just like it does in chrome???

am really new to coding. and is all based off tutorials i found online.

any help appreciated!! :slight_smile:

thanks -

Hi there,

Here’s a JavaScript solution using your original image:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Center image with jQuery</title>
    <style>
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <img src="http://www.slapadrone.com/images/bmclose3.gif" id="img">
    
    
    <script>
      jQuery.fn.center = function () {
        var maxHeight = $(window).height() - 100;
        
        if (this.height() > maxHeight){
          this.css("max-height",  maxHeight);
        } else {
          this.css("max-height",  "90%");
        }
        
        this.css("position","absolute");
        this.css("top", ($(window).height() - this.height()) / 2);
        this.css("left", ($(window).width() - this.width()) / 2);
        return this;
      }     
      
      $(window).load(function() {
        $("#img").center();
      
        $(window).on("resize", function(){
          $("#img").center();
        });
      });
    </script>
  </body>
</html>

This works in all of the major browsers, down to and including IE8.

I would find it interesting if anyone could show me how to implement the same thing using just CSS.

Hi,

The jump occurs, because the script has to work out the dimensions of the viewport before centering the image.
The easiest way to avoid this, is to set the image’s display propety to none in the css.
The you can alter the display property to block via javascript, once the image has loaded.

I’m away from the PC at the moment, but I could make you a demo of this later on if you would like.

would love if you could help with any direction. am new to much of this.

thanks so much. really appreciate it

and any notes to help me understand what’s going on would be great too, so can learn on it.

No problem.
Watch this space …

So,

Here’s the revised script:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Center image with jQuery</title>
    <style>
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>$("#img").css("display", "none");</script>
  </head>

  <body>
    <img src="http://www.slapadrone.com/images/bmclose3.gif" id="img">


    <script>
      jQuery.fn.center = function () {
        var maxHeight = $(window).height() - 100;

        if (this.height() > maxHeight){
          this.css("max-height",  maxHeight);
        } else {
          this.css("max-height",  "90%");
        }

        this.css("position","absolute");
        this.css("top", ($(window).height() - this.height()) / 2);
        this.css("left", ($(window).width() - this.width()) / 2);
	this.css("display", "block");
        return this;
      }

      $(window).load(function() {
        $("#img").center();

        $(window).on("resize", function(){
          $("#img").center();
        });
      });
    </script>
  </body>
</html>

What I’ve done is to add a line of JavaScript directly after the jQuery include, which hides the image.
Then it is not until the center() function has positioned the image correctly that I use JavaScript to set the display property to block.
I used JS to do this, so that anyone who has it turned off, will still see the image.

Anyway, this should hopefully avoid the jumping effect.

thanks so much!!! for some reason this latest one didn’t work - but as you explained it, i copied the hide scrip into the old one you sent, and now it works fine.

this is an update if it helps anyone else:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title>Center image with jQuery</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<script src=“http://code.jquery.com/jquery-latest.min.js” type=“text/javascript”></script>
<script>$(“#img”).css(“display”, “none”);</script>

</head>

<body>
<img src=“http://www.slapadrone.com/images/bmclose3.gif” id=“img”>

&lt;script&gt;
  jQuery.fn.center = function () {
    var maxHeight = $(window).height() - 100;
    
    if (this.height() &gt; maxHeight){
      this.css("max-height",  maxHeight);
    } else {
      this.css("max-height",  "90%");
    }
    
    this.css("position","absolute");
    this.css("top", ($(window).height() - this.height()) / 2);
    this.css("left", ($(window).width() - this.width()) / 2);
    return this;
  }     
  
  $(window).load(function() {
    $("#img").center();
  
    $(window).on("resize", function(){
      $("#img").center();
    });
  });
&lt;/script&gt;

</body>
</html>

ps. thanks again pullo!

hey pullo,

so when i test your script by itself it works beautifully:
http://www.slapadrone.com/test4.php

BUT when i put in all my like buttons and my little nav, i still get the same jumping image problem.
any idea why and how to resolve? thanks again for all your help
http://www.slapadrone.com/test3.php

or this is another example

is there a way to have a simple loading symbol like we have here… http://dronesofnewyork.com/set.php?set=2

and then just have our image appear at the correct size centered, after it has loaded, without having to see it jump around?

Hi there,

Sorry, that was my mistake, I had the JavaScript in the wrong position.
It should be like this:

<img src="http://www.slapadrone.com/images/bmclose3.gif" id="img">
<script>$("#img").css("display", "none");</script>

i.e the image should exist on the page before the JavaScript attempts to hide it.

You will then want to keep the line this.css("display", "block"); in the center() function.

The reason why you’re experiencing a jump on the page load is that you have included some third-party widgets (Twiiter and FB).
The chances are that these are holding everything else up.

If you try the above and it still doesn’t work for you, you could always go the evil route of setting the image’s display property to zero in the CSS, then reverting it in the JavaScript.

This should be a last resort though.

thanks for your help!