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 to the CF scene
    Join Date
    Jul 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb How intelligent is Javascript ???

    Hi

    I am trying to use Javascript to center my page dynamically, I have come across some code but am unsure what it means, if anybody could decipher it I would be grateful as I am using this to get to grips with javascript.

    TIA

    in the <body>

    <snippet>
    <div style="position: absolute; left: 1; top: 0; height: 941; width: 781; id="logo">


    external javascript file
    ---------------

    t = navigator.appVersion;
    if ((t.indexOf("Mac") != -1)){
    u = t.indexOf('MSIE');
    v = parseInt(t.substring(u + 5));
    if (u != -1 && v >= 4){
    document.write('<img src="/pix/dot.gif" height="3000" width="1" border="0">')
    }
    }

    var screenWidth = 0;

    if (document.all != null) {
    screenWidth = document.body.offsetWidth - 765;
    } else if ((navigator.appName == 'Netscape')) {
    screenWidth = window.innerWidth - 765;
    }

    if (screenWidth >= 0) {
    screenMargin = screenWidth / 2;
    } else {
    screenMargin = 0;
    }

    document.write('<div id="outer" style="position: absolute; left: ' + screenMargin + 'px; top: 5px; z-index: 1">');

    window.defaultStatus = 'Intranet.net';

    var BannerAdPrefix = ""
    function VirginBannerClick(url){top.location = BannerAdPrefix + url}


    function sendToAFriend() {
    var pn = document.location.href;

    window.open("/sendtoafriend/sendtoafriend.html?"
    + pn,"","toolbar=no,scrollbars=no,width=480,height=520,noresize");

    }

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In response to your subject - Javascript, in common with everything else to do with computers, has no intelligence at all.


    Anyway - most of that code you posted is redundent. You only need this bit:


    Code:
    var screenWidth = 0; 
    
    if (document.all != null) { 
    screenWidth = document.body.offsetWidth - 765; 
    } else if ((navigator.appName == 'Netscape')) { 
    screenWidth = window.innerWidth - 765; 
    } 
    
    if (screenWidth >= 0) { 
    screenMargin = screenWidth / 2; 
    } else { 
    screenMargin = 0; 
    } 
    
    document.write('<div id="outer" style="position: absolute; left: ' + screenMargin + 'px; top: 5px; z-index: 1">');

    Except that that will exclude Opera. A cross-browser way of doing the same thing would be:

    Code:
    var pageWidth,pageMargin;
    
    if (typeof document.all != "undefined") { 
    pageWidth = document.body.offsetWidth - 765; 
    } else { 
    pageWidth = window.innerWidth - 765; 
    } 
    
    if (pageWidth >= 0) { 
    pageMargin = pageWidth / 2; 
    } else { 
    pageMargin = 0; 
    } 
    
    document.write('<div id="outer" style="position: absolute; left: ' + pageMargin + 'px; top: 5px; z-index: 1">');

    Here I used pageWidth instead of screenWidth because it's less confusing - the value you're defining is not the screen width, it's the page width.


    BTW - you don't actually need any of this to get centered content. Any reason for not just going

    <div align=center>


    ?

  • #3
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs down

    Hi

    Thanks for the reply. I agree with your point that just a <div align=center> does center the page, however I have some elements in the page like the example below that moves around the screen in different resolutions and does not stay where it is specifed.

    However when I used the script I showed you and the div tag I used earlier it stayed in its fixed position, but I was getting the problems I mentioned in the first posting?????

    Any advice on this ???


    <div id="empnewscont" style="position: absolute; left: 158; top: 295; visibility:hidden; height: 246; width:301">


    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="301">
    <tr>
    <td height=17 bgcolor=#003063 colspan="2" width="300" background="/images/intranethomepage/docbg1.gif"><font class=modnom> &nbsp; <a href="##" class="modnom1" onmouseover="hideLayers('presscont'); self.status = 'NEWS'; return true">Press Releases&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font>

    <font class=modnom1><a href="##" class="modnom" onmouseover="hideLayers('empnewscont'); self.status = 'NEWS'; return true">Employee News</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font><font class=modnom>
    &nbsp;<img border="0" src="/images/intranethomepage/warrow.gif" align="middle" width="6" height="7">&nbsp;
    SELECT</font></td>
    </tr>
    <tr>
    <td width="300" colspan="2">
    <img border="0" src="/images/intranethomepage/wnewdiv.gif" width="1" height="4"></td>
    </tr>

    <cfoutput query="empnews">


    <!-- start -->

    <tr>


    <td width="100%" colspan="2" valign="middle">

    <a href="/news/prmain.cfm?id=#id#" class=modtit target="">
    <span id="prev_titulo0">#headline#
    </span></a></td>
    </tr>
    <tr>

    <td width="60" valign="top">

    <p align="center"><a href="/news/newsdetail.cfm?id=#id#" class=modtit target="">


    <a href="/news/prmain.cfm?id=#id#" class=modtit target="">
    <img border="0" src="/testpages/#imgsrc#" name="prev_imagen_1" width="55" height="55" border=0 vspace=3 align=left></a>
    </td>

    <td width="240">
    <font class=modtxt><span id="prev_texto_2">
    #GetToken(ParagraphFormat(fp_summary), 1,".")#
    </span></font></td>
    </tr>

    <tr>
    <td width="100%" colspan="2">
    <img border="0" src="/images/intranethomepage/newsdiv1.gif" width="1" height="5"></td>
    </tr>

    </cfoutput>

    <tr>
    <td width="100%" colspan="2">
    <p align="right">
    <a href="/news/employeenews.cfm?PRmonth=0&amp;PRyear=0" class=modtit target="">
    <span id="prev_titulo0">View More Employee News
    </span></a>
    </td>
    </tr>
    </table>

    </div>


  •  

    Posting Permissions

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