SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize window as per resoltuion

    Hello Guys

    I would like to fit my webpage to every resoltuion by using jquery/javascript.

    Like this site: http://www.360-stl.com

    I would like to show full page without vertical scroll in any resoltion.

    Please help.

  2. #2
    SitePoint Member
    Join Date
    Jan 2012
    Location
    United States
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a very simple prototype that might help you get started. It simply scales the image content to fit the current size of the browser window. To do something like 360-stl.com, you might place the image inside a <div> element, which is what you would scale to fit the window. Then scale the image so it fits inside the <div>, but maintain a constant ratio between the image's height and width, so it isn't distorted. Any portion of the image that doesn't fit in the <div> would be truncated, as at 360-stl.com.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>JavaScript Tester Page</title>
    
    <style type="text/css">
    
    </style>
    
    <script>
    
    var image;
    
    window.onresize = function ()
       {
       image.width = window.innerWidth;
       image.height = window.innerHeight;
       };
    
    
    window.onload = function ()
       {
       image = document.getElementById ("image");
    
       image.width = window.innerWidth;
       image.height = window.innerHeight;
    
       }
    </script>
    
    </head>
    <body>
    
    <p>
       <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/240px-The_Earth_seen_from_Apollo_17.jpg" id="image">
    </p>
    
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i am trying to use this but JavaScript error is giving image not found... again and again..and even if i use this then scroll up the page then at some points image getting aside to right and to bottom..please help me to auto resize the html page image according to desktop resolution

  4. #4
    SitePoint Member
    Join Date
    Jan 2012
    Location
    United States
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand the nature of the problem you're having. I just checked and the code I gave still works in IE9 and FF10. It does need to be improved -- for example, it doesn't maintain the aspect ratio of the image so the proportions of the graphics get distorted.


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
  •