SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Dynamically placing a div

    I am currently working on a site that requires a div to be dynamically placed depending on the user's resolution.

    As some background, the site is a static design (no expansion within the browser window) and very graphically intensive. For this reason, I want to separate the site's design from the content by using separate layers.

    The problem lies in the fact that the site sits in the center of the screen no matter what the resolution, so I am sure you can see my problem as this means a different location for each screen.

    To place the site's design element I have set it within a table 100% wide and 100% high (probably not the best method but the one I know). Does anyone know how I can tell a layer to be placed just above this area all the time?

    I would really appreciate some help with this as it has me stumped!

    AG
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See a site of mine, http://www.surprisingcareers.co.uk/ -- it does exactly what you're after with JavaScript -- just pinch it from the source. I don't mind.

    Since there's quite a lot of JS in there, here's what you need. Firstly the refresh function:

    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    function refresh()
    { 
        window.location.replace( 'default.htm' );
    }
    //-->
    </script>
    You need this to re-centre the layers if someone resizes their screen, so you need onResize=refresh() in your body tag.

    Then you need this script (obviously, change dimensions to suit):

    Code:
    <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
    n = (document.layers) ? 1:0
    ie = (document.all) ? 1:0
    
    if (n) {
    	windowWidth = window.innerWidth-16
    	windowHeight = window.innerHeight
    }
    if (ie) {
    	windowWidth = document.body.offsetWidth-20
    	windowHeight = document.body.offsetHeight
    }
    
    document.writeln('<STYLE TYPE="text/css">');
    document.writeln('<\!--');
    document.writeln('#centerLayer {position:absolute; left:'+(windowWidth/2-780/2)+'; top:'+(windowHeight/2-440/2)+'; width:760; height:430; clip:rect(0,780,440,0); z-index:1');
    document.writeln('-->');
    document.writeln('</STYLE>');
    </SCRIPT>
    Finally, nest all your content in the layer, <DIV ID="centerLayer">

    G

  3. #3
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That worked perfectly.

    AG
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  4. #4
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool. Just to warn you, it's scatty in Netscape 4.7, but I tend to say "Netscape what? Upgrade!! You're holding the Internet back!!!"

  5. #5
    SitePoint Evangelist Alexandra's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Australia
    Posts
    414
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tend to feel the same way - thanks for letting me know though....

    AG
    Alex Graham
    Cadmium Design & Development
    www.cadmium.com.au
    alexandra@cadmium.com.au

  6. #6
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries. I suspect you could make it work in Netscape 4 if you wanted to, but I could never be bothered -- the page still displays fine, just sits in the top left instead of the centre so I figured that as long as Netscape 4 users could still access the content without issue it didn't really matter.


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
  •