-
Positioning problems with Javascript
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().clientWidth-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().clientHeight-25 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
}
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>
-
Does anyone have any ideas?
When I attach the list to a table item, the list overlaps with the text, obscuring part of it.
Outside tables, the list is shown below the text. What the flap is going on?
-
I don't see any Java in there.
-
errr....
all those functions in the <script> section?
-
-
terribly sorry, oh pedantic one.
I'm not a programmer.
Does this mean you can't help?
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