Unveiling Hidden Nested Subnavigation Menus - javascript

I have been working with a navigation menu that uses a sub-navigation menu that is hidden but shown using jQuery. The problem is that I now need to add an additional sub-navigation menu that is nested within the sub-navigation menu that I have already created.
I have a JSFiddle that recreates my problem here: http://jsfiddle.net/Learner12/xkaxbhvj/
Basically, I am trying to get the links (Link D, E, and F) to show underneath "Sub-submenu Nav 1".
The current code that I am using only encompasses the first sub-navigation menu, not the one to be nested within it:
JS:
var main = new function () {
$('.trigdrop').click(function() {
$('.trigdrop a:first-child').removeClass('borderIndent');
$('.submenu').slideUp();
$(this).children('a:first-child').addClass('borderIndent');
$(this).children('.submenu').slideDown(400);
});
I tried following the same guidelines by making a "trigdrop2" and a "submenu2" but unfortunately could not solve the problem. I think it has something to do with with this line of code:
$('.submenu').slideUp();
That line simply brings everything back up, but I do not know of another method to ensure only one sub-menu is opened at any given time while allowing a "sub-sub-navigation menu" to be opened within that given sub-navigation menu.
Please view the JS fiddle for the accompanying HTML and CSS.

You are probably looking for the .not() jQuery function. This removes specified elements from the current jQuery object. So the line you were thinking was the problem,
$('.submenu').slideUp();
could be turned into
$('.submenu').not($(this).children('.submenu')).slideUp();
to select all .submenus except the one inside the clicked .trigdrop. Then the .trigdrop2 can be handled just as you were thinking:
$('.trigdrop2').click(function() {
$('.submenu2').not($(this).children('.submenu2')).slideUp();
$(this).children('.submenu2').slideDown();
});
(Note this uses .not() again). And here's your updated JSFiddle.

Related

mmenu: expand only one submenu at a time (slidingSubmenus: false)

I like to use mmenu: http://mmenu.frebsite.nl/ in my Web project. I should set slidingSubmenus: false but to save vertical space, I should automatically collapse the previous expanded submenu, if a new submenu is expanded - i.e. only one submenu shall be expanded at the time.
These are requirements of the customer.
Please have a look at this example: http://plnkr.co/edit/O2CCBYuXtxnHH7wbdqMa?p=preview [1]
If we expand About us, then About us 2, the first one should be collapsed.
Is this possible using native settings or with a simple trick?
I also found How to toggle the vertical jQuery.mmenu submenus?, but I hope for a cleaner solution
- badera
[1]
Thanks to ankoehn (https://stackoverflow.com/users/5174279/ankoehn) for his answer https://stackoverflow.com/a/31727879/4106030 (it is the base of my plunker - I need also a solution for AngularJS).
This amendment allows only a single submenu open at a time, at any level.
$('.mm-next').click(function(){
var myMenu = $(this).closest('.mm-vertical');
myMenu.parent().children('.mm-vertical').not(myMenu).removeClass('mm-opened');
})
http://plnkr.co/edit/axlVAHBb38boNMoqxJ1D?p=preview
(My first plnkr and SO answer, hope it works :)
Since you are using jQuery, you could add some jQuery to do this:
jQuery(document).ready(function(){
$('.mm-next').click(function(){
var myMenu = $(this).closest('.mm-vertical');
$('.mm-vertical').not(myMenu).removeClass('mm-opened');
})
})
Updated plunker http://plnkr.co/edit/3kr45X8fPnGMo64wXc7j?p=preview
This simply removes the opened class from items other than the current one you have opened.

JQuery to expand all collapsible sections of a page (from external website)

The page contains multiple sections. Each section is represented by a TD block (see code below), the actual page would show a ">" icon (hovering over it shows the a href: javascript:void(0)), and when manually clicked, it would expand the section by a POST call to the endpoint from the SPAN block.
<td id="abc-parent" data-column="parent" data-row="abc" class="mt-cell mt-center">
<a href="javascript:void(0)">
<span class="a-declarative" data-action="myitable-fetch-rows" data-myitable-fetch-rows="{"endpoint":"/hz/inventory/variation?parentRecord=abc","rowId":"abc"}">
<div class="mt-variation-icon mt-variation-expand"/>
</span>
</a></td>
I am looking to create a bookmarklet containing a line of JQuery. And when called, it would expand all collapsible sections of a page.
What I mean is something like this (note this does not achieve what I described above):
javascript:jQuery('.a-declarative').each(function(i,e){e.click()})
I think you are looking for the "Trigger" function:
.trigger( eventType [, extraParameters ] ) Description: Execute all handlers and behaviors attached to the matched elements for the given event type.
https://api.jquery.com/trigger/
So your code above should be something like:
$('.a-declarative').trigger('click');
Use at your own risk as this is not a very stable way to trigger events.
Create a global class .active for all the expandable areas (make sure they all have it, even if you have to add it after another class="another active")
Assure .active is the expanded state. Then call it like below.
$('.item').toggleClass('active');
Simple jsfiddle demo of this.
If for some reason you can't alter the mark-up to make a global active class, you may have to call it with all the 'expanded selectors' (but should be no reason for this)
$('.item').toggleClass('active expanded open');
For help on the bookmarklet aspect; this is a cool link that should help you out; but all you should be doing is defining the above in a function and then trigger with a .click() event.
Update! I just sent another pointer via comment section below; but you know you can add a class .active via jQuery to all the toggles that share same class or ID. But you will still have to investigate how the toggles were built on this external website for you to incorporate the expanded state with your new .active state. There is no way for use to know this as you didn't post that code; but it's typically found in the .css pretty easily.
$('td').find('.mt-center').addClass('active');

side sliding menu tab

i want to implement a right side sliding menu similar to the one in amazon.com..
i am trying to use javascript to edit the script on every mouseover/onclick event..
i want to hide/show the table on every event.
function show(a){
var id="myMenu"+a
if (i<-12){
i=i+speed;
document.getElementById(id).style.left=i;
}
}
function hide(a){
var id="myMenu"+a
if (i>-135){
i=i-speed;
document.getElementById(id).style.left=i;
}
}
this should be good to show/hide the tables.. but how to id dynamically add two tables one over another..because the main menu table will always be visible, but the sub menu when hidden will be beneath the main menu..
any method to do the same?
am i in the right path?
Definitely on the right path, this is a good test of concept.
I would suggest you look at jQuery (or other JavaScript libraries like Scriptaculous) specifically at the slideToggle() and toggle() methods.
Don't want to give it all away, but take a look at the Amazon source code, you may get some helpful little tips. :P

Changing styles on navigation links - including next and prev buttons

I'm currently working on a website for a Danish company. The content is all in one page and I've included some jQuery-scrolling and stuff. Works nice!
For the menu I'm asked to programme the elements so the active element is bold. That I've done too.
The problem comes here:
The client wants a home button and a next and previous button. But when I click them and the page scrolls the CSS-classes do not change for the active element - so the bold element in the menu is still the last clicked page.
I hope that anyone can help.
The page can be seen at:
http://vedelform.dk/new/intro/
In addition to calling the serialscroll plugin, the event handler for the images needs to update the appropriate class name on your navigation link. When you click on a navigation link directly, you call the changeActiveStates function, but that isn't happening with the home, next, and previous buttons.
You should use the onBefore attribute of the serialScroll plugin to define a method that will figure out which navigation link is supposed to receive the class name. It can then call the changeActiveStates function.
It doesn't look like it would take more than a few more lines of code to fix your problem. If you need more help getting it to work, let me know.
edit:
If you add this (starting at line 84 of init.js), you should be in business:
easing: 'swing',
onBefore:function(e, elem, $pane, $items, pos){
if ((pos >= 0)&&(pos < $('ul.navigation > li > a').size())) changeActiveStates($('ul.navigation > li > a').get(pos));
return true;
}
You will then need to call changeActiveStates (probably after you initialize the function) on page load to initialize the correct menu item.
I hope that helps; let me know if it gives you any more trouble.
You used minified version of scripts so it is very hard to debug the code. Also you didnt give us name of plugin you use. I think there is a bug in plugin. Because css class "selected" sould jump from one menu item to another.
#Jason Francis:
You're probably right. I'm not that much into jQuery and Javascript and what I've done so far is more luck than it's knowledge. I did A LOT of trial and error.
I understand what you're saying about getting the serialScroll plugin to figure out what element to call changeActiveStates on - but I seriously don't know how to do that.

How to go to anchor tag in scrollable div without having the whole browser jump down?

I'm building a simple glossary widget as part of a larger project for a client. The content of the glossary is enclosed within a scrollable div (overflow:auto). Each letter has an anchor tag associated with it (#a, #b, #c, etc). Above the scrollable div is a div which contains every letter of the alphabet. Clicking on one of these letters takes the user down to that letter's definitions in the scrollable div. This works, but an unintended side effect is that the entire window jumps down to the anchor, which is confusing and annoying to the user.
Here is the widget, stripped down a bit and with a bunch of <br />'s to let you see what I mean.
http://www.nitrohandsome.com/clients/topics/glossary-widget/
I had tried a few different javascript ideas I cobbled together from some Googling, but nothing was working, so i just got rid of everything but the actual go to anchor code (I'm a pretty big JS newbie). So right now, clicking on any of the letters executes this javascript function, with the anchor tag passed to it:
function jumpToAnchor(myAnchor) {
window.location = String(window.location).replace(/\#.*$/, "") + myAnchor;
}
How can I pull this off so the overall window doesn't jump each time a link is clicked?
Thanks in advance!
If you're using jQuery, you can try the scrollTo plugin. Also, to edit just the hash portion or the URL, you can just do
function jumpToAnchor(myAnchor) {
window.location.hash = myAnchor;
}
Try to use IFrame instead of Div or create a specific function using ScrollBy.

Categories

Resources