-
 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"> </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%"> </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%"> </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%"> </td>
</tr>
<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </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%"> </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%"> </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%"> </td>
</tr>
<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </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%"> </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%"> </td>
<td class="FrontTable" width="22%" bgcolor="#0066FF"><font color="#FFFFFF">9</font></td>
<td width="3%"> </td>
</tr>
</table>
</body>
</html>
-
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.
-
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.
-
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.
-
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
Forum Rules
|
Top DevX Stories
Easy Web Services with SQL Server 2005 HTTP Endpoints
JavaOne 2005: Java Platform Roadmap Focuses on Ease of Development, Sun Focuses on the "Free" in F.O.S.S.
Wed Yourself to UML with the Power of Associations
Microsoft to Add AJAX Capabilities to ASP.NET
IBM's Cloudscape Versus MySQL
|
Reply With Quote
Bookmarks