SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript - increase topmargin

    How could I increase the topmargin value in my bodytag depending on the screen resolution?

    For example if the users res is 8x6 or lower I want topmargin=0. If its 1024 then topmargin=5, 1200 topmargin=10 etc etc

    My knowledge of js is zilch so any help would be greatly appreciated!

  2. #2
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First you need to detect the users screen resolution in your <head> tag
    Code:
    <SCRIPT language="JavaScript">
    <!--
    var margin
    
    if ((screen.width<=800) && (screen.height<=600)){
      margin = "0";
    }
    else if ((screen.width<=800) && (screen.height<=600)){
      margin = "5";
    }
    
    //-->
    </SCRIPT>
    Then use the code in your <body> tag

    <body bgcolor="#ffffff" topmargin="javascript:document.write(margin)">

  3. #3
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by moospot
    ...Then use the code in your <body> tag

    <body bgcolor="#ffffff" topmargin="javascript:document.write(margin)">
    I really don't think javascript will work there.

    The topmargin property is not able to support an event.

    I just tested it with several other simple scripts too (alert,...) and nothing happens.
    Last edited by Bill Posters; Aug 6, 2002 at 05:16.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm I just tested it also and it didn't work. Perhaps some kinda onload event is needed?

  6. #6
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Bill Posters


    I really don't think javascript will work there.

    The topmargin property is not able to support an event.

    I just tested it with several other simple scripts too (alert,...) and nothing happens.
    The only other way is to detect the screen size and then redirect to the appropriate page

    Code:
    <SCRIPT language="JavaScript">
    <!--
    var margin
    
    if ((screen.width<=800) && (screen.height<=600)){
      window.location.href = "800page.htm";
    }
    else if ((screen.width<=1024) && (screen.height<=768)){
      window.location.href = "1024page.htm";
    }
    
    //-->
    </SCRIPT>

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, not the only way, moospot.

    Your best way would be to create 3 versions of the external stylesheet (each with different margin-top setting* for the body tag) and select one based on the resolution of the screen.
    (* remember that Opera is a little odd and actually uses padding-top to set the body margin, so be sure to use both margin-top and padding-top in each CSS file.)


    You'll find the basic instructions here at The Javascript Source.
    You may wish to trim that code down though as it contains lots of flabby nonsense.


    Fwiw, it can also be done quite simply with the DOM + Javascript, but it only works after the page has loaded.

    This means their would be a jump just after the page has loaded when all the content is shifted down by a certain number of pixels.


    Using the method of selecting a CSS file depending on resolution means the content is written in place first time and there will be no 'shift'.

    Hope this helps.
    Last edited by Bill Posters; Aug 6, 2002 at 08:45.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh..didn't think of that one! (CSS)

    Great job!


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
  •