homepage Welcome to WebmasterWorld Guest from 54.204.67.26
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
menu-hiding with jquery
sssweb




msg:4429920
 2:10 pm on Mar 16, 2012 (gmt 0)

I am using a menu widget that works with jQueryUI and am trying to configure it to hide when the user clicks off the menu. The problem is that the script changes the active layer on the fly (it overlays the main menu panel with sub-menus) and I can't pin down what element to hide.

Here is the abbreviated script (I'd also like to restore the menu to its initial state when hiding, so I've included relevant code for that too):


$(function($) {
$.widget("ui.drilldown", {
_init: function() {
var self = this;
this.active = this.element.find(">ul").attr("tabindex", 0);

// hide submenus and create indicator icons
this.element.find("ul").hide().prev("a").prepend('<html>').end().filter(":first").show();

....

// this code defines the "back" button which returns to previous menu levels
this.back = this.element.children(":last").button()
.click(function() {
self.up();
return false;
}).hide();
},

....

up: function() {
....
// active layer defs
this.active = this.active.parent().parent().show();
this.activeItem = this.active.data("menu").active;
if (!this.active.parent().parent().is(":ui-menu")) {
this.back.hide();
}
},

down: function(event) {
var nested = this.activeItem.find(">ul");
if (nested.length) {
this._open(nested);
nested.menu("activate", event, nested.children(":first"))
}
},

....

hide: function() {
},

widget: function() {
return this.element.find(">ul");
}
});

....

//* My code added to show menu on button click
$(".sitemenu button").button()
.click(function() {
$("#drilldown").show();
});

....

});
});


I adapted the working code from a different config, which is this:


$(document).one("click", function() {
$("#drilldown").hide();
});


But this hides the menu even when I click on the menu. I also tried using focusout:


$("#drilldown").focusout(function() {
$("#drilldown").hide();
});


This hides the menu after I've clicked it once, then click it again. I've tried using other selectors -- .sitemenu, #drilldown, ul (the menu is an unordered list), and various combinations -- but they all do the same thing.


Any ideas? I'll post the entire script if anyone wants.

 

sssweb




msg:4430018
 4:56 pm on Mar 16, 2012 (gmt 0)

I made some progress using a work-around, though it doesn't fully work and I'm still interested in a direct jquery solution.

I created a new div that covers the entire page, placed the menu outside it (it still shows due to absolute positioning), then used the following:

$(".newdiv").click(function() {
$("#drilldown").hide();
});

That hides the menu; then I added this to restore the menu to its initial state (adapted from line 7 in orig. script above):

$("#drilldown").find("ul").hide().prev("a").end().filter(":first").show();

That restores the first menu panel, but it's not active if the user returns to the menu a second time. I've tried playing with some of the relevant code below, but can't get it:

this.active = this.element.find(">ul").attr("tabindex", 0);
....
this.active = this.active.parent().parent().show();
this.activeItem = this.active.data("menu").active;

I also can't hide the 'Back' button -- even though it hides w/everything in my fix above, if the user returns to the menu, the Back button shows even though the menu is at the first panel and there's no 'back' to nav to. The script uses:

this.back.hide();

but it doesn't work even if I try:

$("#drilldown").back.hide();

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved