#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Location
    Dallas, TX
    Posts
    14
    Rep Power
    0

    Javascripting pagelayout


    I have completed my site for 800x600 screen resolutions, but I would like to have it look decent in other resolutions as well. I was reading at some point about using javascript to determine certain layout configurations such as <div> sizes, pixel placements, and image changes.

    Does anyone know where I might be able to find a good resource for javascripting that would be able to help me with this?

    Thanks in advance.

    JCMacon
    www.iweavewebs.com

    Edit - I found a source for what I was looking for.

    http://www.dansteinman.com/dynduo/en/widthheight.html
    Last edited by jcmacon; March 27th, 2003 at 06:53 PM.
  2. #2
  3. No Profile Picture
    Got source?
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2003
    Location
    Laguna Niguel, California, USA
    Posts
    2,331
    Rep Power
    14
    Not quite what you were asking for, but this will redirect a user based upon their screen size:

    <html>
    <head>
    </head>
    <body>
    <script>
    function screensize() {
    if ((screen.width == 640))
    window.location.href= "640.htm";
    if ((screen.width == 800))
    window.location.href= "800.htm";
    if ((screen.width == 1024))
    window.location.href= "1024.htm";
    else window.location.href= "800.htm";
    }
    onload=screensize
    </script>
    </body>
    </html>


    And using this you can test at different resolutions:


    <tml>
    <head>
    <script>
    var testWin;
    function resTest(w,h) {
    frm = document.forms[0];
    urlF = frm.testURL.value;
    if(urlF == "" || urlF == "http://") {
    alert('Please enter a URL');
    frm.testURL.focus();
    return false;
    }
    if(w == null) {
    w = frm.customw.value;
    if(w == "" || !Number(w) || w < 100) {
    alert('Please enter a valid Width');
    frm.customw.value = "";
    frm.customw.focus();
    return false;
    }
    }
    if(h == null) {
    h = frm.customh.value;
    if(h == "" || !Number(h) || h < 100) {
    alert('Please enter a valid Height');
    frm.customh.value = "";
    frm.customh.focus();
    return false;
    }
    }
    properties = "width=" + w;
    properties += ",height=" + h;
    properties += ",scrollbars=1,toolbar=1,location=1";
    properties += ",directories=1,status=1,menubar=1";
    properties += ",resizable=1,left=0,top=0";
    if(testWin && !testWin.closed) {
    testWin.close();
    }
    testWin = window.open(urlF,"TestRes",properties);
    if(navigator.appName.indexOf("Netscape") != -1) {
    testWin.outerWidth = w;
    testWin.outerHeight = h;
    }
    frm.innerDim.value = "Test Resolution: " + w + "x" + h + "\n";
    if(navigator.appName.indexOf("Netscape") != -1) {
    frm.innerDim.value += "Window Inner Width: " + testWin.innerWidth + "\n";
    frm.innerDim.value += "Window Inner Height: " + testWin.innerHeight + "\n\n";
    }
    else {
    frm.innerDim.value += "IE does not allow access to the window properties of ";
    frm.innerDim.value += "pages on a different domain. Below are some general ";
    frm.innerDim.value += "inner dimensions:\n\n";
    frm.innerDim.value += "window document\n";
    frm.innerDim.value += "640x480 -> 615x314\n";
    frm.innerDim.value += "800x600 -> 775x434\n";
    frm.innerDim.value += "1024x768 -> 999x602\n\n";
    frm.innerDim.value += "For a custom resolution, you\'ll need to get a ";
    frm.innerDim.value += "screen grab of the new window, paste it to your ";
    frm.innerDim.value += "favorite graphics program, then measuer the size ";
    frm.innerDim.value += "of the content area.\n\n";
    }
    frm.innerDim.value += "To ensure that you\'ve tested properly, be sure ";
    frm.innerDim.value += "to make all your toolbars and window chrome viewable. ";
    frm.innerDim.value += "Be sure to test with both major browsers (IE and Netscape), ";
    frm.innerDim.value += "as each one will have different inner document dimensions!";
    this.focus();
    }
    </script>
    </head>
    <body>
    <form>
    URL: <input type=text name="testURL" SIZE="25" value="http://">
    <br><br>
    Width: <input type=text name="customw" SIZE="4">
    Height: <input type=text name="customh" SIZE="4">
    <input type=button value="Test" onClick="resTest()">
    <br>
    <b>OR</b>
    <br>
    <input type=button value="640 x 480" onClick="resTest('640','480')">
    <input type=button value="800 x 600" onClick="resTest('800','600')">
    <input type=button value="1024 x 768" onClick="resTest('1024','768')">
    <br><br>
    <TEXTAREA NAME="innerDim" rows="10" cols="40" wrap="physical">The test window inner dimensions will be displayed here.</TEXTAREA>
    </form>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo