Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2004
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Please help with script error :) - Trying to dynamically position div element

    Hi Everyone,

    I am trying to develop a script that will position html elements dynamically within various browsers regardless of screen resolution and hence available screen display area.

    The script and test page I am developing looks like this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Dynamic Element Positioning Script - Phase 1</title>
    <script type="text/javascript">
    //No need to call the browserType() function because a variable of this type is created
    //below.
    function browserType() {
    agent = navigator.userAgent.toLowerCase();
    this.major = parseInt(navigator.appVersion);
    this.minor = parseFloat(navigator.appVersion);
    this.ns = ((agent.indexOf('mozilla') != -1) &&
    ((agent.indexOf('spoofer') == -1) && (agent.indexOf('compatible') == -1)));
    this.ns4 = (this.ns && (this.major == 4));
    this.ns6 = (this.ns && (this.major >= 5));
    this.ie = (agent.indexOf("msie") != -1);
    this.ie3 = (this.ie && (this.major < 4));
    this.ie4 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") == -1));
    this.ie5 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.0") != -1));
    this.ie55 = (this.ie && (this.major == 4) && (agent.indexOf("msie 5.5") != -1));
    this.ie6 = (this.ie && (agent.indexOf("msie 6.0")!=-1) );
    }

    var is = new browserType();

    function displayProperties()
    {
    if(is.ns6) {
    page_width=innerWidth;
    page_height=innerHeight;
    } else if(is.ie5 || is.ie55 ||is.ie6) {
    page_width=document.body.clientWidth;
    page_height=document.body.clientHeight;
    }

    function elementObject(id,position,left,top,visibility) {
    if (is.ie5|| is.ie55||is.ie6|| is.ns6){
    this.obj = document.getElementById(id).style;
    this.obj.position = position;
    this.obj.left = left;
    this.obj.top = top;
    this.obj.visibility = visibility;
    return this.obj;
    }
    }
    function elementSetup(id, position, left, top, visibility) {
    positionElement = new elementObject(id, position, left, top, visiblity);
    }
    </script>
    <style type="text/css">
    <!--
    .main {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    color: #FBEED5;
    text-decoration: none
    }
    -->
    </style>
    </head>
    <body onLoad="displayProperties()">

    <div id="centerLayer" style="position: absolute; width:200px;
    height:24px; left: 0px; top: 0px; z-index: 6; visibility: hidden;" onload="elementSetup('centerLayer', 'absolute', page_width/2-100, page_height/2-12,'visible')">
    <span class="main">This is a Layer Centered By Screen Resolution</span>
    </div>
    </body>
    </html>

    The idea behind this script is that when it loads it creates a new object called 'is' which holds details of the browser type (to the best of my knowledge this object is created once the web page is loaded. Please correct me if I am wrong here). Once the body of the document is reached the 'displayProperties()' function is called which effectively stores the available screen area of the current browser (regardless of browser type, screen resolution, etc). Finally I am trying to center a div in the middle of the screen with the text "This is a Layer Centered By Screen Resolution".

    Unfortunately I am getting various error messages from different browsers. As I am a beginner with JavaScript I don't really understand the error messages.

    Any help with fixing this script up will be greatly appreciated.

    Thanks for your time.

    Regards

    David

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    onload is an event handler specific to BODY tag, not to any other objects on document. On the other hand onload must be unique on the page.

    Why not fire all the function in the same onload?

    <body onLoad="displayProperties();elementSetup('centerLayer', 'absolute', page_width/2-100, page_height/2-12,'visible')">

    Or fire the second function from the first inner?

    function displayProperties()
    {
    if(is.ns6) {
    page_width=innerWidth;
    page_height=innerHeight;
    } else if(is.ie5 || is.ie55 ||is.ie6) {
    page_width=document.body.clientWidth;
    page_height=document.body.clientHeight;
    elementSetup('centerLayer', 'absolute', page_width/2-100, page_height/2-12,'visible')
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    ...and, of course, remove onload="..." from div
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •