#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    69
    Rep Power
    11

    How to resize frame according to screen resolution???


    Hi,

    I designed a website for 800x600 screen resolution and now I want to have it centered in the page when the screen is set to a higher resolution.
    I have done that before by creating a left and a right frame set to * on the frameset, leaving the main page in the center with a 800 frame width.

    But the problem is that like this, I will get the vertical scroll on the main page, instead of in the left side of the scree. It looks weird and my client doesn't want that.
    So, I was thinking in having just two frame: a left one that would resize according to the detect screen resolution, and a right frame with the main page, set to * width.

    The question is: Is it possible to run a javascript or other kind of script that will detect the user screen resolution and change the frameset code...

    For instance...if the screen is set to 1024 width....than the left frame would be 224 pixels width.

    Maybe I can just use a screen res detection , and depending on the result, load a different index file.

    Would it be possible? Are there other alternatives?

    I appreciate your help.

    Thanks
  2. #2
  3. Gogga
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    198
    Rep Power
    21
    I don't believe that it is possible to detect the screen resultion (won't put any money on it thought). Have you tried using a % sign for your width instead of specifying the number of pixels? Otherwise, I don't really understand the vertical scroll on the main page part. Care to elaborate, or post some code (so that I can see for myself)?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    69
    Rep Power
    11
    It is possible to detect the screen res. I figured out. Thanks
  6. #4
  7. Gogga
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    198
    Rep Power
    21
    It is? Care to share the knowledge on how? This might come in VERY usefull. Thanks
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    69
    Rep Power
    11
    Sure....
    Make different framesets and use this on the index page.
    <script type="text/javascript">
    var w = screen.width;
    //alert(w);

    switch(w)
    {
    default:
    location.href = "site1.htm";
    break;
    case 1024:
    location.href = "site2.htm";
    break;
    case 1152:
    location.href = "Site3.htm";
    break;
    case 1280:
    location.href = "site4.htm";
    break;

    }
    </script>
  10. #6
  11. Gogga
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    198
    Rep Power
    21
    Sweet! It's amazing what you can learn by reading these threads.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    17
    Rep Power
    0
    Just a question,

    what if the user of the site is running 1024, but doesn't have it completely maximized, so that it falls between your values. It is going to be put into the default. Is that not going to give you the same problems?
  14. #8
  15. Gogga
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    198
    Rep Power
    21
    Good point. It might be a problem. But you can solve it by forcing the window to open to it's maximum width and height by adding the following code to the page:
    Code:
      <script language="javascript1.2">
        window.resizeTo((screen.availWidth),(screen.availHeight));
      </script>
    Don't know if this has other complications.
  16. #9
  17. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    14
    Rep Power
    0
    Well, I don't think many users would like page that resizes their window (and, it also has to be moved to the top left corner of the screen and there is no way how to detect if there aren't any toolbars attached to top or left side of the screen)

    I actually didn't get what do you want to do, skuba... you said something about scroll on the left side of the screen...?

    It is possible to detect size of browser's 'document area', do some calculations with that number and finally doument.write() frames with exact widths... but what if user resizes the window?
    It can be recalculated, but I think there must be a simplier solution.
  18. #10
  19. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Originally posted by Silian
    Good point. It might be a problem. But you can solve it by forcing the window to open to it's maximum width and height...
    Not on my machine. Mozilla lets me ignore impolite JS functions like resizing my browser.

    Why not simply use CSS to define a centered container? See this for an example.

    This will obviate the problem of visitors being so rude as to not use the right screen resolution or window size. (My own usual case is 1280x960 and 1024x768 screens and 800x600 windows.)

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  20. #11
  21. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Posts
    3
    Rep Power
    0

    Thumbs up


    You can try this type of java script though it isnt fully XHTML validated! If you know how to get the code right (XHTML Validation) please drop a line here thx. Adjust the width and height by trial and error by testing each resolution.

    Cheers

    <?xml version="1.1" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>...</title>


    </script>

    <script language="JavaScript" type="text/JavaScript">
    if (screen.width >= 1024)
    {
    document.write("<style> #floatframe {position:absolute; left: 28%; top: 50%; width: 70%; height: 300%; right:0px;}</style>")
    }
    if (screen.width == 800)
    {
    document.write("<style> #floatframe {position:absolute; left: 35%; top: 66%; width: 92%; height: 400%;right:0px;}</style>")
    }
    if (screen.width == 640)
    {
    document.write("<style> #floatframe {position:absolute; left: 35%; top: 83%; width: 65%; height: 600%; right: 0px;}</style>")
    }
    </script>

    </head>

    <body>

    <div id="floatframe"><iframe src="filename.html" width="100%" height="100%"></iframe></div>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo