How do I manually hide the active window in anylinkmenu?

[davidw]

1) Script Title: Anylink JS Drop Down Menu v2.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem:

I am writing a mobile app. When the mobile device is pivoted to display in landscape mode, anylinkmenu keeps the current dropdown window showing. Is there a way to manually hide the active dropdown window in js, when a screen orientation change is detected?

Reinitializing anylinkmenu doesn't do it:
anylinkmenu.init("menuanchorclass");

function Detect_orientation_change() {
manually hide current drop down window <<???
readjust screen display settings for the new orientation
}

Thank you.

[ddadmin]

To reference a drop down menu (and in turn hide it), first, reference the corresponding anchor link by giving it a ID attribute for example:

<p><a href="http://www.dynamicdrive.com" class="menuanchorclass" id="myanchor1" rel="anylinkmenu1">Default Example</a></p>

Then, to reference its drop down menu and hide it, call the below method in such a manner:

anylinkmenu.hidemenu(document.getElementById("myanchor1")._internalID)

As you can discern, the code:

document.getElementById("myanchor1")._internalID

returns the unique ID of the associated drop down menu that the script uses internally when referencing it. In combo with the hidemenu() method, you hide that particular menu.

[davidw]

Hello,

Thank you for responding to my post (duplicated it by mistake... sorry, won't happen again).

I had read a previous post about the technique you describe (re: adding a menu element) and I think that is what I have been trying.

In my HTML I have:

<div class="buttonwrapper" id="narrow" style="display:none">
<a href="menu.php" class="menuanchorclass" id="counts" rel="counts" data-image="images/counts1-small.jpg" data-overimage="images/counts2-small.jpg"><img src="images/counts1-small.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="percents" rel="percents" data-image="images/percents1-small.jpg" data-overimage="images/percents2-small.jpg"><img src="images/percents1-small.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="means" rel="means" data-image="images/means1-small.jpg" data-overimage="images/means2-small.jpg"><img src="images/means1-small.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="sampling" rel="sampling" data-image="images/sampling1-small.jpg" data-overimage="images/sampling2-small.jpg"><img src="images/sampling1-small.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="myhelp" rel="myhelp" data-image="images/help1-small.jpg" data-overimage="images/help2-small.jpg"><img src="images/help1-small.jpg" style="border-width:0" /></a>
</div>

Then I added a test link:

<p><a href="javascript:test()">Default Example</a></p>

And I increased the hide delay to 3 seconds so I'd have time to test it before it faded on it's own: effects: {delayhide: 3000,

And my test function is:

function test() {
        anylinkmenu.hidemenu(document.getElementById("counts")._internalID);
        anylinkmenu.hidemenu(document.getElementById("percents")._internalID);
        anylinkmenu.hidemenu(document.getElementById("means")._internalID);
        anylinkmenu.hidemenu(document.getElementById("sampling")._internalID);
        anylinkmenu.hidemenu(document.getElementById("myhelp")._internalID);
}

It doesn't give a JS error, but it doesn't hide the menu window either.

Thank you again.

David

[davidw]

I'm a little red in the face.

I have several sections of code for the different mobile resolutions. The appropriate one is shown (and the rest are hidden) depending on the screen width of the device. Kind of like this:

<!--   Style for 240 - 319 -->

<div class="buttonwrapper" id="narrow" style="display:none">
<a href="menu.php" class="menuanchorclass" id="counts" rel="counts" data-image="images/counts1-small.jpg" data-overimage="images/counts2-small.jpg"><img src="images/counts1-small.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="percents" rel="percents" data-image="images/percents1-small.jpg" data-overimage="images/percents2-small.jpg"><img src="images/percents1-small.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="means" rel="means" data-image="images/means1-small.jpg" data-overimage="images/means2-small.jpg"><img src="images/means1-small.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="sampling" rel="sampling" data-image="images/sampling1-small.jpg" data-overimage="images/sampling2-small.jpg"><img src="images/sampling1-small.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="myhelp" rel="myhelp" data-image="images/help1-small.jpg" data-overimage="images/help2-small.jpg"><img src="images/help1-small.jpg" style="border-width:0" /></a>
</div>


<!--   Style for 320 - 539 wid -->

<div class="buttonwrapper" id="medium" style="display:none">
<a href="menu.php" class="menuanchorclass" id="counts" rel="counts" data-image="images/counts1-mid.jpg" data-overimage="images/counts2-mid.jpg"><img src="images/counts1-mid.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="percents" rel="percents" data-image="images/percents1-mid.jpg" data-overimage="images/percents2-mid.jpg"><img src="images/percents1-mid.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="means" rel="means" data-image="images/means1-mid.jpg" data-overimage="images/means2-mid.jpg"><img src="images/means1-mid.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="sampling" rel="sampling" data-image="images/sampling1-mid.jpg" data-overimage="images/sampling2-mid.jpg"><img src="images/sampling1-mid.jpg" style="border-width:0" /></a>
<a href="menu.php" class="menuanchorclass" id="myhelp" rel="myhelp" data-image="images/help1-mid.jpg" data-overimage="images/help2-mid.jpg"><img src="images/help1-mid.jpg" style="border-width:0" /></a>
</div>

And I used the same ID for each one. Grrr!

You advice works perfectly.

Sorry to have troubled you, and thank you for your speedy response.

Best regards,

David

[jscheuer1]

Get rid of all of that including the added id's. This bit of code will close them all without having to know which they are:

;(function(){
	if(window.anylinkmenu && anylinkmenu.menusmap && anylinkmenu.menusmap.hasOwnProperty){
		for( var p in anylinkmenu.menusmap ){
			if(anylinkmenu.menusmap.hasOwnProperty(p) && anylinkmenu.menusmap[p].hasOwnProperty && anylinkmenu.menusmap[p].hasOwnProperty('id')){
				anylinkmenu.hidemenu(anylinkmenu.menusmap[p].id);
			}
		}
	}
})();

That's the 'safe' way, this also works:

for( var p in anylinkmenu.menusmap ){
	anylinkmenu.hidemenu(p);
}

By way of explanation of the 'safe' method. It exposes no global variable (p), and can be run at any time on any page without error, regardless of whether or not the anylinkmenu code is present or not or has been run successfully or not.

[davidw]

John,

Worked great, Made my life easier and I appreciate your help.

Best regards,

David

[ddadmin]

Very nice John!