Positioning problems with Javascript


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 5 of 5

Thread: Positioning problems with Javascript

  1. #1
    Join Date
    Jun 2005
    Posts
    7

    Unhappy Positioning problems with Javascript

    Posted this in Java originally, it should probably be in here. Can anyone help?

    I am having problems positioning drop-down lists with Javascript in my web page. The list is being placed over the text that activates it. I have tried altering various values in the code but cannot seem to affect the position of the drop-down. Below is the full code of my page.
    Thanks for any help in advance:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>VLA 2007 - Being better and different by 2007</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" HREF="../../VLA2007_Site/Shared/Styles/2007CSS.css" Type="text/css">
    <style type="text/css">
    #dropmenudiv{
    position:absolute;
    border:1px solid black;
    font:normal 8px Verdana;
    line-height:16px;
    z-index:100;
    }
    #dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    }
    #dropmenudiv a:hover{ /*hover background color*/
    background-color: navy;
    }
    </style>

    <script type="text/javascript">
    /***********************************************
    * AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    //Contents for menu 1
    var menu1=new Array()
    menu1[0]='<a href="progWhat.html">What is it?</a>'
    menu1[1]='<a href="progNews.html">News</a>'
    //Contents for menu 2, and so on
    var menu2=new Array()
    menu2[0]='<a href="CSRWhat.html">What is CSR?</a>'
    menu2[1]='<a href="CSRNews">CSR News</a>'
    var menu3=new Array()
    menu3[0]='<a href="DRWhat.html">What is Domestic Reval?</a>'
    menu3[1]='<a href="DRNews">Reval News</a>'
    var menu4=new Array()
    menu4[0]='<a href="PIPWhat.html">What is PIP?</a>'
    menu4[1]='<a href="PIPNews">PIP News</a>'
    var menu5=new Array()
    menu5[0]='<a href="CAMAWhat.html">What is CAMA?</a>'
    menu5[1]='<a href="CAMANews">CAMA News</a>'
    var menu6=new Array()
    menu6[0]='<a href="NDRWhat.html">What is Non-domestic Reval?</a>'
    menu6[1]='<a href="NDRNews">Non-Dom Reval News</a>'
    var menu7=new Array()
    menu7[0]='<a href="RRMPWhat.html">What is RRMPB?</a>'
    menu7[1]='<a href="RRMPNews">RRMPB News</a>'
    var menu8=new Array()
    menu8[0]='<a href="HRWhat.html">What is HR Skills?</a>'
    menu8[1]='<a href="HRNews">HRS News</a>'

    var menuwidth='165px' //default menu width
    var menubgcolor='white' //menu bgcolor
    var disappeardelay=500 //menu disappear speed onMouseout (in miliseconds)
    var hidemenu_onclick="yes" //hide menu when user clicks within menu?

    /////No further editting needed
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    function showhide(obj, e, visible, hidden, menuwidth){
    if (ie4||ns6)
    dropmenuobj.style.left=dropmenuobj.style.top=-500
    if (menuwidth!=""){
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    }
    if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
    obj.visibility=visible
    else if (e.type=="click")
    obj.visibility=hidden
    }
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    function clearbrowseredge(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
    var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWid th-15 : window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
    }
    else{
    var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeig ht-25 : window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeigh t
    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHe ight
    }
    return edgeoffset
    }
    function populatemenu(what){
    if (ie4||ns6)
    dropmenuobj.innerHTML=what.join("")
    }
    function dropdownmenu(obj, e, menucontents, menuwidth){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    populatemenu(menucontents)
    if (ie4||ns6){
    showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
    dropmenuobj.x=getposOffset(obj, "left")
    dropmenuobj.y=getposOffset(obj, "bottom")
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
    }
    return clickreturnvalue()
    }
    function clickreturnvalue(){
    if (ie4||ns6) return false
    else return true
    }
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    function dynamichide(e){
    if (ie4&&!dropmenuobj.contains(e.toElement))
    delayhidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    delayhidemenu()
    }
    function hidemenu(e){
    if (typeof dropmenuobj!="undefined"){
    if (ie4||ns6)
    dropmenuobj.style.visibility="hidden"
    }
    }
    function delayhidemenu(){
    if (ie4||ns6)
    delayhide=setTimeout("hidemenu()",disappeardelay)
    }
    function clearhidemenu(){
    if (typeof delayhide!="undefined")
    clearTimeout(delayhide)
    }
    if (hidemenu_onclick=="yes")
    document.onclick=hidemenu
    </script>
    </head>

    <body background="../Shared/Images/VLAbg.jpg">
    <table><tr><td width="27%"><IMG SRC="../../VLA2007_Site/Shared/Images/vlaLogo.jpg" align = "right" hspace="10"></td><td width="47%"><H1 class="Banner">VLA 2007</H1></td><td width="26%"><P class="small"><b>Programme Office:</b><br>Tel: <b>(028)9054 3845</b><br>E-mail: <a href="mailto:lorraine.braniff@dfpni.gov.uk"><font size="-2">lorraine.braniff@dfpni.gov.uk</font></a></P></td></tr>

    <tr><td colspan="3"><H1 class="Tag"><i>"Being better and different by 2007"</i></H1></td></tr>
    <tr><td colspan="3"><p class="center">
    <A href="../../VLA2007_Site/Content/Home">Home</A>
    ||
    <A href="../../VLA2007_Site/Content/AboutUs">About us</A>
    ||
    <A href="../../VLA2007_Site/Content/Contacts">Contacts</A>
    ||
    <A href="../../VLA2007_Site/Content/YourViews">Your views</A>
    ||
    <A href="../../VLA2007_Site/Content/links">Useful Links</A>
    ||
    <A href="../../VLA2007_Site/Content/SiteMap">Site map</A>
    </p></td></tr>
    <tr><td colspan="3">&nbsp;</td></tr>
    <tr><td colspan="3"><b><u>Latest News</u></b></td></tr></table>
    <table>
    <tr>
    <td width="25%" rowspan="5"> <Marquee direction="up" width="200" height="300" hspace="5" vspace="10" scrolldelay="20" scrollamount = "2" bgcolor="#FFFFFF" onMouseover="this.scrollAmount=0" onMouseout="this.scrollAmount=2">
    <a href="31-May.html">31-May 2005</a><br>
    Link to latest news on VLA2007 </Marquee></td>
    <td class="FrontTable" width="22%" bgcolor="#00AAFF"><p>
    <a href="vla2007.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '100px')" onMouseout="delayhidemenu()">
    VLA 2007 Programme</a></p></td>
    <td width="3%">&nbsp;</td>
    <td class="FrontTable" width="22%" bgcolor="#BFC7F9"><a href="csr.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '110px')" onMouseout="delayhidemenu()">Core system replacement</a></td>
    <td width="3%">&nbsp;</td>
    <td class="FrontTable" width="22%" bgcolor="#0088FF"><a href="dr.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '200px')" onMouseout="delayhidemenu()">Domestic Reval</A></td>
    <td width="3%">&nbsp;</td>
    </tr>

    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>

    <tr>
    <td class="FrontTable" width="22%" bgcolor="#0066FF">
    <p><a href="pip.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '110px')" onMouseout="delayhidemenu()"><font color="#FFFFFF">Public interface planning</font></A></p>
    </td>
    <td width="3%">&nbsp;</td>
    <td class="FrontTable" width="22%" bgcolor="#00CCFF"><a href="cama.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '150px')" onMouseout="delayhidemenu()">CAMA</a></td>
    <td width="3%">&nbsp;</td>

    <td class="FrontTable" width="22%" bgcolor="#0000FF"><a href="ndr.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '230px')" onMouseout="delayhidemenu()"><font color="#FFFFFF">Non-Domestic Reval</font></a></td>
    <td width="3%">&nbsp;</td>
    </tr>

    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>

    <tr>
    <td class="FrontTable" width="22%" bgcolor="00CCFF"><p><a href="rrmp.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu7, '150px')" onMouseout="delayhidemenu()">RRMPB</A></p>
    </td>
    <td width="3%">&nbsp;</td>

    <td class="FrontTable" width="22%" bgcolor="#0000FF"><a href="hrs.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu8, '110px')" onMouseout="delayhidemenu()"><font color="#FFFFFF">HR skills</font></a></td>
    <td width="3%">&nbsp;</td>

    <td class="FrontTable" width="22%" bgcolor="#0066FF"><font color="#FFFFFF">9</font></td>
    <td width="3%">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2003
    Location
    tx/us
    Posts
    131
    Once I fixed a couple of strange "embedded space" errors like "dropmenuobj.offsetHeigh t" and "obj.offsetHe ight" it worked ok for me in both IE and Firefox.

  3. #3
    Join Date
    Jun 2005
    Posts
    7
    Cheers but unfortunately, the embedded spaces aren't in my code. They must have been added when I pasted it into the forum.

    Maybe it's some inexplicable bullsh*t error with my computer, I'll try it on another.

    Thanks again.

  4. #4
    Join Date
    Jun 2005
    Posts
    7
    I just tried it myself on Firefox and the positioning of the lists worked fine. Unfortunately, I need it to work on IE 6.0

    Does this help anyone solve my problem? Surely it's an Internet explorer settings problem.

  5. #5
    Join Date
    Dec 2003
    Location
    tx/us
    Posts
    131
    Hmm. It looked ok in IE6 for me, too. Of course it's running like it's on IE4 so there could be some problems there but, as I said, I don't see them.

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
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center