|
|
|
| View previous topic :: View next topic |
| Author |
Message |
ontrider
Ladies Man
Joined: 30 Jul 2003
Posts: 16491
City: Russia
|
 Posted: Jan 23, 2005 12:57 pm Post subject: Anyone Good at JavaScript? |
 |
|
Any Javascript programmers out there???
This is a top dropdown menu, but I want to add it to a side nav.
There is absolute positioning on the menu so it sits directly below the menu button it's applied to... I want to make it sit to the right of the menu button instead. Anyone know what I need to alter here to do this?
| Quote: | <style type="text/css">
#dropmenudiv{
position:absolute;
border:1px solid black;
font:normal 12px Arial;
line-height:18px;
z-index:100;
}
</style>
<script type="text/javascript">
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="#"><font color="#FFFFF">Item1</font></a><br>'
menu1[1]='<a href="#"><font color="#FFFFF">Item2</font></a><br>'
menu1[2]='<a href="#"><font color="#FFFFF">Item3</font></a><br>'
//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="#">Item1</a><br>'
menu2[1]='<a href="#">Item2</a><br>'
menu2[2]='<a href="#">Item3</a><br>'
var menuwidth='165px' //default menu width
var menubgcolor='#cc3333' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?
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-15 : 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, "top")
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> |
|
|
| Back to top |
|
 |
|
|
DC
Soul Rider
Joined: 11 Mar 2003
Posts: 456
|
|
| Back to top |
|
|
ontrider
Ladies Man
Joined: 30 Jul 2003
Posts: 16491
City: Russia
|
| Posted: Jan 23, 2005 9:22 pm Post subject: |
|
|
Tried that one, didn't really do anything.
I don't think the HTML has anything to do with it, the only relevant code in there is adding the "dropdownmenu" into the link which gets called onMouseOver. Here's the code though.
| Quote: | | <p><a href="#" onMouseOut="MM_swapImgRestore(), delayhidemenu()" onMouseOver="MM_swapImage('membership','','images/nav_membership_on.gif',1), dropdownmenu(this, event, menu1, '150px')" onClick="return clickreturnvalue()"><img name="membership" border="0" src="images/nav_membership_off.gif" width="117" height="22"></a></p> |
I've actually been playing with the position offset functions (leftedge, rightedge... whatever) I've almost got the stupid thing where I want it so I think I'll give it another crack tomorrow, and should be able to fix it. Thanks. |
|
| Back to top |
|
|
|
|
|
Add To Favorites
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum
|
Copyright © 2012 - Wakeboarding - Wakeboarder.com - All Right Reserved
Powered by phpBB © 2001, 2005 phpBB Group
|
|
|
FAQ
Search
Memberlist
Stats
Favorites
Register
Profile
Log in to check your private messages
Log in
