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
    Oct 2004
    Location
    scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up div content is 'shifting' across fixed table-based layout.

    Hi,

    I'm stumped by a 'layer' (div) that appears to be 'floating' above my table based layout.

    I am developing my first website in dreamweaver and want to achieve a news box which is defined by a table cell (the table cell is part of a sliced fireworks document exported into dreamweaver), but the text content of the news box will be scrollable (and i didn't want one of those ugly grey overflow scroll bars). I found a bit of javascript on DHTMLcentral.com and edited it to give me the scroll box you can see 'floating' on the page, but when you resize the browser window (ie, maximise or restore down) or add/take away your favourites bar at the side of the screen the scroll box and it's little arrows move out of the defined white news box.

    The code is given below (ps can you tell me how to get the code in the scrollable example box like so many of you use to save the long post, cheers).

    I have done a search of past posts and also went to brainjar and am currently working my way through the 'CSS Positioning' document, but i am stumped by how to position a div over a table and get it to stay over a particular cell. I can get the layer to position fine if everything is aligned to the left, but i want my page centred (indicted by the pink box) and this is what is causing the problem.

    Cheers

    _______________________________________________________________

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    #divUp {position:absolute; left:523px; top:52px;}
    #divDown {position:absolute; left:474px; top:53px;}
    #divScrollTextCont {position:absolute; left:473px; top:72px; width:120px; height:250px; clip:rect(0px 300px 300px 0px); overflow:hidden; visibility:visible;}
    #divText {position:absolute; left:0px; top:0px;}
    </style>


    <script language="JavaScript" type="text/javascript">
    /**********************************************************************************
    ScrollText
    * Copyright (C) 2001 Thomas Brattli
    * This script was released at DHTMLCentral.com
    * Visit for more great scripts!
    * This may be used and changed freely as long as this msg is intact!
    * We will also appreciate any links you could give us.
    *
    * Made by Thomas Brattli
    *
    * Script date: 09/23/2001 (keep this date to check versions)
    *********************************************************************************/
    function lib_bwcheck(){ //Browsercheck (needed)
    this.ver=navigator.appVersion
    this.agent=navigator.userAgent
    this.dom=document.getElementById?1:0
    this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
    this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
    this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    this.ie=this.ie4||this.ie5||this.ie6
    this.mac=this.agent.indexOf("Mac")>-1
    this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
    return this
    }
    var bw=lib_bwcheck()
    /*****************

    You set the width and height of the divs inside the style tag, you only have to
    change the divScrollTextCont, Remember to set the clip the same as the width and height.
    You can remove the divUp and divDown layers if you want.
    This script should also work if you make the divScrollTextCont position:relative.
    Then you should be able to place this inside a table or something. Just remember
    that Netscape crash very easily with relative positioned divs and tables.

    Updated with a fix for error if moving over layer before pageload.

    ****************/


    //If you want it to move faster you can set this lower, it's the timeout:
    var speed = 30

    //Sets variables to keep track of what's happening
    var loop, timer

    //Object constructor
    function makeObj(obj,nest){
    nest=(!nest) ? "":'document.'+nest+'.'
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
    this.up=goUp;this.down=goDown;
    this.moveIt=moveIt; this.x=0; this.y=0;
    this.obj = obj + "Object"
    eval(this.obj + "=this")
    return this
    }

    // A unit of measure that will be added when setting the position of a layer.
    var px = bw.ns4||window.opera?"":"px";

    function moveIt(x,y){
    this.x = x
    this.y = y
    this.css.left = this.x+px
    this.css.top = this.y+px
    }

    //Makes the object go up
    function goDown(move){
    if (this.y>-this.scrollHeight+oCont.clipHeight){
    this.moveIt(0,this.y-move)
    if (loop) setTimeout(this.obj+".down("+move+")",speed)
    }
    }
    //Makes the object go down
    function goUp(move){
    if (this.y<0){
    this.moveIt(0,this.y-move)
    if (loop) setTimeout(this.obj+".up("+move+")",speed)
    }
    }

    //Calls the scrolling functions. Also checks whether the page is loaded or not.
    function scroll(speed){
    if (scrolltextLoaded){
    loop = true;
    if (speed>0) oScroll.down(speed)
    else oScroll.up(speed)
    }
    }

    //Stops the scrolling (called on mouseout)
    function noScroll(){
    loop = false
    if (timer) clearTimeout(timer)
    }
    //Makes the object
    var scrolltextLoaded = false
    function scrolltextInit(){
    oCont = new makeObj('divScrollTextCont')
    oScroll = new makeObj('divText','divScrollTextCont')
    oScroll.moveIt(0,0)
    oCont.css.visibility = "visible"
    scrolltextLoaded = true
    }
    //Call the init on page load if the browser is ok...
    if (bw.bw) onload = scrolltextInit

    /***************
    Multiple Scripts
    If you have two or more scripts that use the onload event, probably only one will run (the last one).
    Here is a solution for starting multiple scripts onload:
    1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
    2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
    Example: <body onload="initScroll(); initTooltips(); initMenu();">
    **************/
    </script>

    <title>test: scroll news</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </head>

    <body>
    <div id="divUp">
    <a href="#" onmouseover="scroll(-2)" onmouseout="noScroll()" onclick="return false"><img src="file:///Z|/UXL%20Products/Active%20Websites/uxl/down.gif" width="9" height="5" /></a>

    </div>

    <div id="divDown">
    <a href="#" onmouseover="scroll(2)" onmouseout="noScroll()" onclick="return false"><img src="file:///Z|/UXL%20Products/Active%20Websites/uxl/down.gif" width="9" height="5" /></a>
    </div>

    <div id="divScrollTextCont">
    <div id="divText">
    <p>News: <br>
    <font face="Verdana, Arial, Helvetica, sans-serif">www.bratta.com/dhtml - Have you ever experienced DHTML is now updated
    with more script, demos and how to's then ever. Visit now!
    Also added: The DHTML Scriptomania, a new and better interface
    to browser the scripts, demos and how to's.</font></p>
    <p><font face="Verdana, Arial, Helvetica, sans-serif">
    test text test text test text test text test text test text<br>
    <br>
    test text test text test text test text test text test text<br>
    test text test text test text test text test text test text<br>
    test text test text test text test text test text test text<br>
    test text test text test text test text test text test text<br>
    </font></p>
    <p><font face="Verdana, Arial, Helvetica, sans-serif">
    test text test text test text test text test text test text<br>
    test text test text test text test text test text test text<br>
    test text test text test text test text test text test text<br>
    <br>
    test text test text test text test text test text test text<br>
    test text test text test text test text test text test text - END</font></p>
    </div>
    </div>
    <table width="100%" height="57" border="0" cellpadding="0" cellspacing="0" bgcolor="#CC99FF">
    <!--DWLayoutTable-->
    <tr>
    <td width="760" height="1"></td>
    </tr>
    <tr>
    <td height="57" valign="top"><table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF33FF">
    <!--DWLayoutTable-->
    <tr>
    <td width="456" height="400">&nbsp;</td>
    <td width="152" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
    <!--DWLayoutTable-->
    <tr>
    <td height="400">&nbsp;</td>
    </tr>
    </table>
    </td>
    <td width="152">&nbsp;</td>
    </tr>
    <tr>
    <td height="2"></td>
    <td></td>
    <td></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </body>
    </html>

    _____________________________________________________________

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    You can make it relative to the cell instead of the absolute postion most likely.
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New Coder
    Join Date
    Oct 2004
    Location
    scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ccs mystery

    Thanks alien51. I've since been messing about with the code and took the div tags and their contents and pulled them into the relevant table cells (td tags). I also made the ccs code for the arrow and text box relative and it seems to be looking a bit better. I thought i would be able to do it all in the ccs though at the beginning of the code without having to pull the div tags into the table cell as well. Why is this?


  •  

    Posting Permissions

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