AnyLink Drop Down Menu - onclick issue

**billgates2000** · 10-24-2012, 06:13 AM

1) Script Title:

AnyLink Drop Down Menu

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem:

I'm using a slightly modified code of this script. What I currently have are two (or more) links on a page that each show a div when the user clicks on them. The divs dissappear when the user clicks anywhere else in the browser's window, or on other links. What I need to do is to further modify the code so that the divs of each link also dissapear when the users clicks on the same link again. For example, clicking link1 should show div1, but when the user re-clicks again on link1, the div should dissapear.

My current script is here: http://www.eurovisionclub.com/memberstest.html

Thanks.

**ddadmin** · 10-25-2012, 07:28 AM

This might require some additional tweaking, but try the below modified version of the script. Changes in red:

Code:

<html><head>
	<title>Test</title>

	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">


<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 1;
font:normal 11px Verdana;
padding: 5px 5px 5px 5px;
line-height:14px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}

</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
***********************************************/


function show_member_name(member_name)
{
    return '<strong><font size=+2>' + member_name + '</strong></font>';
}




function drawline()
{
    return '<hr style="color: #FFCC66; height: 1px; text-align: left; width: 96%;">'
}

//Contents for menu 1

var menu0=new Array()
menu0[0]='' + drawline() + '' + show_member_name('test1') + drawline() + '</font>'
var menu1=new Array()
menu1[0]='' + drawline() + '' + show_member_name('test2') + drawline() + '</font>'
var menu2=new Array()


		
var menuwidth='165px' //default menu width
var menubgcolor='lightyellow'  //menu bgcolor
var disappeardelay=250  //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()"></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="-500px"
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 topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
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){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){

var menustate = obj.getAttribute('data-menustate')

if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (menustate == "hidden"){
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left") + 40
dropmenuobj.y=getposOffset(obj, "top") - 25
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
}
else{
hidemenu(e)
}

obj.setAttribute("data-menustate", (menustate=="hidden")? "visible" : "hidden")

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><div id="dropmenudiv" style="visibility: hidden; width: 400px; background-color: lightyellow; top: 63px; left: 48px;" onmouseover="clearhidemenu()"><hr style="color: #FFCC66; height: 1px; text-align: left; width: 96%;"><strong><font size="+2">test2</font></strong><hr style="color: #FFCC66; height: 1px; text-align: left; width: 96%;"></div>







<br>


<a href="#" onclick="hidemenu();return dropdownmenu(this, event, menu0, '400px')" data-menustate="hidden">link 1</a>

<br><br>

<a href="#" onclick="hidemenu();return dropdownmenu(this, event, menu1, '400px')" data-menustate="hidden">link 2</a>




</body></html>

**billgates2000** · 10-25-2012, 08:14 AM

It worked, but it is a bit buggy

The problem is that now, it needs 2 clicks to make a div appear again after it has dissappeard.

**ddadmin** · 10-25-2012, 07:53 PM

Ok, in addition to the above changes, try also adding the new part in red below inside your <a> elements:

Code:

<a href="#" onclick="hidemenu();return dropdownmenu(this, event, menu0, '400px')" data-menustate="hidden" onBlur="this.setAttribute('data-menustate', 'hidden')">link 1</a>

<br><br>

<a href="#" onclick="hidemenu();return dropdownmenu(this, event, menu1, '400px')" data-menustate="hidden" onBlur="this.setAttribute('data-menustate', 'hidden')">link 2</a>

**billgates2000** · 10-28-2012, 07:08 PM

it's still buggy when clicking between the links

http://www.eurovisionclub.com/test.html

**ddadmin** · 10-30-2012, 07:57 PM

I see the issue, but only in IE9 (versus say FF). Give your document a valid doctype at the very top, for example, by adding the following:

Code:

<!doctype html>

**billgates2000** · 10-30-2012, 08:11 PM

It doesn't work properly in Google Chrome either, even with a doctype. http://www.eurovisionclub.com/test.html

**ddadmin** · 10-31-2012, 02:04 AM

Hmm it seems Chrome doesn't fire the onBlur event handler on general elements on the page unless it's accompanied by a "tabindex" attribute inside the element. So try defining one for each of your anchor links:

Code:

<a href="#" onclick="hidemenu();return dropdownmenu(this, event, menu0, '400px')" data-menustate="hidden" tabindex="0" onBlur="this.setAttribute('data-menustate', 'hidden')">link 1</a>

<br><br>

<a href="#" onclick="hidemenu();return dropdownmenu(this, event, menu1, '400px')" data-menustate="hidden" tabindex="1" onBlur="this.setAttribute('data-menustate', 'hidden')">link 2</a>

**billgates2000** · 10-31-2012, 05:30 PM

It now works great in both Chrome and Firefox - thanks!!

The only thing that is missing now is to make it work with IE. I tested it in IE6 and unfortunately it doesn't work properly. I know, it's an out-of-date browser but many organisations still use it, so if the script can me modified to work with that, it would really be nice. The problem with IE6 is when clicking the same link several times - after a couple of clicks it doesn't do anything, unless you click on it again. The updated code is here: http://www.eurovisionclub.com/test.html

Thread: AnyLink Drop Down Menu - onclick issue

Thread Tools

Search Thread