SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi hellofromlondon. Welcome to the forums.

    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello there! thanks for the welcome

    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!!


    thanks -

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,894
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Here's a JavaScript solution using your original image:

    HTML Code:
    <!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.

  5. #5
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    Here's a JavaScript solution using your original image:
    hey there!

    thanks fo much for this. i tested it and it works brilliantly across browsers....
    http://www.slapadrone.com/test3.php

    but one thing though is that as the image loads, it loads on the right side, then 'jumps' into position after the full image has loaded. is there any way to avoid that jumping of the image.

    perhaps it can load in the right position, in the center as it loads?


    HTML Code:
    <!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.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,894
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    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.

  7. #7
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,894
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    No problem.
    Watch this space ...

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,894
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    So,

    Here's the revised script:

    Code:
    <!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.

  10. #10
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">


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



    ps. thanks again pullo!





    Quote Originally Posted by Pullo View Post
    So,

    Here's the revised script:

    Code:
    <!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.

  11. #11
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?



    Quote Originally Posted by hellofromlondon View Post
    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

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,894
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

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

    HTML Code:
    <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.

  14. #14
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •