www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript - Moving DIV - Confusing Results

  1. #1
    Join Date
    Mar 2013
    Posts
    2

    Unhappy Javascript - Moving DIV - Confusing Results

    Hi,

    Hope you can help. I have the streamlined the code below from my web page. I am testing by running from my PC. I've tested both in IE 10 & Firefox 19.0.2. It works perfectly and I am very happy with the results. However as soon as I put any <!DOCTYPE ... at the top, my DIV stops moving. i.e. skn.left and sk.top don't get assigned the values in function popup. I remove the <!DOCTYPE ... reference from the top of the HTML file and it works again.

    Any help will be appreciated and thank you in advance.

    The code below can be copied as-is into test.html and will work fine until you add a <!DOCTYPE ... reference on the top line. I've included a display of cursor coordinates as part of my testing.


    <html>
    <head>
    </head>

    <body>

    <DIV style="position:absolute; left: 20px; top: 300px;" ID="dek" >
    <TABLE WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 BGCOLOR="lightblue"><TD ALIGN=center><FONT COLOR=black SIZE=2>HELLO</FONT></TD></TABLE>
    </DIV>
    <DIV ID="divCoord"></DIV>


    <SCRIPT TYPE="text/javascript">
    <!--

    var Xoffset= 10; // modify these values to ...
    var Yoffset= -40; // change the popup position.
    var old,skn,iex=(document.all),yyy=-1000;
    var s,tleft,ttop,xtleft,xttop;
    var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
    var i,d = 0
    var ns4=document.layers;
    var ns6=document.getElementById&&!document.all;
    var ie4=document.all;

    if (ns4)
    skn=document.dek;
    else if (ns6)
    skn=document.getElementById("dek").style;
    else if (ie4)
    skn=document.all.dek.style;

    if(ns4)
    {
    document.captureEvents(Event.MOUSEMOVE);
    }

    function popup(msg,bak)
    {
    var content="<TABLE WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
    "BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>";
    yyy=Yoffset;
    if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
    if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
    if(ie4){document.all("dek").innerHTML=content;skn.display=''}

    xtleft = skn.left;
    xttop = skn.top;

    skn.left=storage[1]+Xoffset;
    skn.top=storage[0]+yyy;

    var s = 'XX=' + storage[0] + ' Y=' + storage[1] + ' SX=' + xtleft + ' SY=' + xttop;
    document.getElementById('divCoord').innerHTML = s;
    }

    function initTrail()
    { // prepares the script
    storage = new Array() // prepare the storage for the coordinates
    storage[0] = 0;
    storage[1] = 0;
    }

    function processEvent(e)
    { // catches and processes the mousemove event
    if (window.event)
    { // for IE
    storage[0] = window.event.y+standardbody.scrollTop;
    storage[1] = window.event.x+standardbody.scrollLeft;
    }
    else
    {
    storage[0] = e.pageY;
    storage[1] = e.pageX;
    }

    var s = 'X=' + storage[0] + ' Y=' + storage[1];
    document.getElementById('divCoord').innerHTML = s;
    }

    initTrail()
    document.onmousemove = processEvent // start capturing

    //-->
    </script>


    <br><br><br>
    <a href="javascript:void(0);" OnClick="popup('TEST','lightblue')" >
    TEST LINK 1
    </a>


    </body>
    </html>

  2. #2
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    What you have there is an old web page from the late 90's targeting the new CSS1 standard that was gaining support.

    As you can see the page is full of HTML markup, CSS style and inline JavaScript...

    much of it has be obsolete or deprecated from about IE8 and most definitely IE10...


    By using the HTML5 doc-type the browser says NO-Way is this a current standard and throws in the towel... without the doc-type it goes to quirks mode and does its best to show it as IE6..


    IMHO: the best thing to do is rewrite it to HTML5 standard and then it will be good until ...?...

  3. #3
    Join Date
    Mar 2013
    Posts
    2
    Hi all,

    I agree, its not the cleanest of code, but this needs to work in older browsers as well as the new ones. If I put any <!DOCTYPE ...>, see http://www.w3schools.com/tags/tag_doctype.asp, the code stops working. Without a <!DOCTYPE, it is fine. I get the same problem with Firefox and IE. What is the default <!DOCTYPE when you don't put one in and why does it work then?

    Someone from the late 90's must have an answer or can someone from the 00, 10s please guide me to a solution that will work and move a DIV successfully from one part of the screen to another and be cross browser compliant and a little older browser compliant.

    Help is really appreciated.

  4. #4
    Join Date
    Mar 2009
    Posts
    464
    I think your problem is the positioning. If you are positioning an element in quirksmode (without a DOCTYPE) a bare number will suffice and the browser will assume you meant pixels. With a DOCTYPE it doesn't. It requires a unit, whether 'px', '%', or whatever.

    Add 'px' to the code where appropriate.
    Last edited by Tcobb; 03-27-2013 at 07:35 PM. Reason: whatever

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles