Results 1 to 7 of 7

Thread: How do I manually hide the active window in anylinkmenu?

  1. #1
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default How do I manually hide the active window in anylinkmenu?

    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.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    <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:

    Code:
    anylinkmenu.hidemenu(document.getElementById("myanchor1")._internalID)
    As you can discern, the code:

    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.
    DD Admin

  3. #3
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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:
    Code:
    <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:

    Code:
    <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:

    Code:
    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
    Last edited by ddadmin; 01-06-2012 at 03:41 AM.

  4. #4
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default My bad - discoverd the source of my problem

    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:

    Code:
    <!--   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
    Last edited by ddadmin; 01-06-2012 at 03:40 AM.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    ;(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:

    Code:
    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.
    Last edited by jscheuer1; 01-05-2012 at 08:08 PM. Reason: add 'safe' method - later explanation of 'safe' method
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jan 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Thank you.

    John,

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

    Best regards,

    David

  7. #7
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Very nice John!
    DD Admin

  8. The Following User Says Thank You to ddadmin For This Useful Post:

    davidw (01-06-2012)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •