Creating mobile jQuery Toggle menu - javascript

I'm trying to make an jQuery toggle menu for a mobile website.
Since it is a wordpress site I would like to make this as dynamic as possible. I want to create a custom WordPress menu.
Now the tricky part comes.
I want it to check if the menu item has children (or child ul) and then toggle between:
<div class="plus">+</div> and <div class="min">-</div>.
When a item has no childeren nothing should happen at all.
So far I've managed to do this, please see my experiment at http://jsfiddle.net/jfvandekamp/9Dvrr/2/

You can use the jQuery function $.contains() to Check to see if a DOM element is within another DOM element.
http://api.jquery.com/jQuery.contains/
So in your example, you'd check to see if the menu item that was clicked contains another UL element
$jQuery.contains($(this), '<ul>');

I would use $.has() to filter out the collapsible items.
I've updated your jsFiddle: http://jsfiddle.net/9Dvrr/5/

Related

Getting a Magento Category to return false

I have set up a Magento website and am trying to get one of the top level menu items to return false so basically I have it set up as a Category on the top level of the menu system but don't want it to actually go anywhere. I just want the subcategories to be shown when they hover over it, is this possible?
Thanks
You should be able to do this with a jQuery Selector and binding a click() event to it. First, though, you'll need to find the link or some other unique attribute to the menu-item (right-click and inspect element). For this example, I will assume that the link is http://www.example.com/return-false and that it doesn't appear anywhere else on the website:
$('[href="http://www.example.com/return-false"]').click(function() {return false;});
JSFiddle

Bootstrap collapse without unique identifier

I'm trying to use the bootstrap collapse plugin in such a way that a unique identifier is not required. Normally there is usually a single or a couple of collapsible elements on a page.
But my elements are generated dynamically and passing index keys is overkill.
What happens now is that if I toggle the collapse for element2, it will collapse element1. Obviously because they have the same ID.
Any way to achieve this without actually giving each collapsible element a unique id?
Here's a functional js fiddle:
http://jsfiddle.net/hhvrjnr3/
It can be done. First remove the data-target="#collapseExample" from the elements you want to collapse. Then add an extra class to your toggle button, I've added 'collapser'. That's not really needed, but it's nice to identify the toggle button. Then add some jQuery to do the toggling, in this case I am using next() to get the subsequent element to the toggle button which is your element you wish to collapse.
$('.collapser').click(function() {
$(this).next().collapse('toggle');
});
Example jsFiddle

Bootstrap collapse section and expand another with one button

I have a bunch of HTML fields logically separated as such: half the fields reside in: div id="general" and the other half reside in: div id="advanced"
What I'm trying to implement (and failing) is the following:
The fields in the general div to be shown (by default). A button with the caption "Advanced" shown. And the fields in the advanced div to be hidden.
When this button is clicked, the following should occur:
General section collapses hiding all it's fields
Advanced section expands showing all it's fields
Button caption is changed to "General".
Subsequent clicks toggles the above.
E.g. upon the next click, the advanced section now is hidden, general section now is shown, and button caption changes to "Advanced"
Notes: This seems trivial but being new to web front-end, I can't get this easily. If my div section is incorrect, then scrap it. I suspect I'm on the right track, and just need some jQuery code to collapse and expand divs.
Below are my attempts:
I used the Bootstrap collapse plugin with accordian markup, but this isn't what I want. It comes close though, but each section has a heading/button. I'd like one heading/button to toggle each section in an opposite manner.
I used the Bootstrap collapse plugin without the accordian markup, but same result as attempt 1 - two button again.
I tried using jQuery to do this dynamically, but can't get the logic (or syntax) correct.
I'm using Bootstrap, but happy to go with jQuery (or JavaScript) solution if it can't be done solely in Bootstrap with the collapse plugin.
You can do it using jquery by toggling a class on element which decides which fields to be shown.
for e.g. Take an outer div, and put general and advanced div inside outer div and show only the fields based on outer div class like advanced using css. And bind a button to toggle the class on the outer div.
Checkout JSFiddle here : http://jsfiddle.net/eqhw2mxx/2/
Check the JSFiddle :- JSFiddle
$("#advanced").addClass('hide');
$(".button").click(function(){
$("#advanced").toggleClass('hide');
$("#general").toggleClass('hide');
if($(this).attr("value") == "Advanced"){
$(this).attr("value","General");
}
else if($(this).attr("value") == "General"){
$(this).attr("value","Advanced");
}
});

CSS dropdown menu not closing after click

I'm using the following tutorial: http://www.script-tutorials.com/css3-metal-menu-with-icons/
The problem is that when I click any element on the submenu, the submenu won't close. My app is using a jQuery UI tab to dynamically add a tab with the content as one partial view (mvc4) so that the app page isn't reloaded. I would like to hide the submenu when an item is clicked, how can i do that?
The submenus are all located in a div with class named subs. You could hide that with JQuery.
$('html').click(function() {
$(".subs").hide();
});
All clicks, anywhere should now hide the submenus or any other element with the class subs
Since you're using jQuery, I would do something like traversing the parents if you know the exact depths, using a click event handler (where e is the event):
$(e.target).parent().parent().hide(), etc
If it could be dynamic, you can do it slightly less efficiently, but in one go:
$(e.target).parents('.thedropdownmenuclass').hide()

How to disable a selected list item when using Fx.Morph?

http://jsfiddle.net/chakri/92tqF/
I need help with the above code. I am trying to disable the hover effect for a selected item in the menu. But am unable to modify the Javascript (fairly new).
It is a vertical Navigation using Mootools Fx.Morph. I am trying to use a class "selectedleftnav" by applying it to the list item (the user will be on this page when he clicks the link). The menu will be unique for different pages, so I need to disable the selected item for each page.
Any help is appreciated.
Thanks!
When you select the list elements to apply the effect using:
var list = $$('#idList LI');
You can improve the selector to exclude the selected one using the :not() selector pattern (that's the magic of CSS3 selectors, supported by Mootools and available thanks to Mootools in every browser):
var list = $$('#idList LI:not(#selectedleftnav)');
Here you can see the resulting fiddle.

Categories

Resources