Looking at Ben Kemens jquery-menu-aim, I stumbled upon an example at codepen.
This (codepen) works and allows the user time to pass from the main menu to the sub menu BUT if you move away from the menu completely the submenu still keeps showing i.e. it (the submenu) won't go away (display:none).
So, I recreated the same example at codepen on JsFiddle and changed the Javascript
from:
$(document).click(function() {
$('a.hover').removeClass('hover');
$('.popover').css('display', 'none');
}
to:
$(document).click(function() {
$('a.hover').removeClass('hover');
$('.nav ul ul').css('display', 'none');
}
Now, if you click anywhere on the web page, apart from the menu/sub menu, the sub menu disappears as it should.
Problem: The sub menu won't reappear if you hover the main menu again.
How do I solve this?
Edit: Is there an alternate jQuery / Javascript to jquery-menu aim?.
I think what you want needs enter and exit instead of activate and deactivate.
Have you read the documentation?
Here is your Fiddle Updated.
$menu.menuAim({
enter: activateSubmenu,
exit: deactivateSubmenu
});
Related
on my website I have a mobile menu. When I click a link a link in the menu the menu doesn't disappear.
From reading other posts I have a quite good idea what I have to do. But I don't get the code working, because I am completely new to javascript and probably just do something wrong.
The div I want to hide when clicking a link (in this same div) is defined with a class mobilemenuitems
As I already mentioned the links are within this div.
unfortunately I cannot add a class or an id to the links because I only have frontend access.
The website is here.
https://test.vereinonline.org/HTC_Uhlenhorst/?module=*Tennis Please note that the menu button only appears on mobile devices (width < 1000px)
In this jsfiddle the Problem is scaled down to the root.
http://jsfiddle.net/TheBB23/d6s3Ln50/3/
I am pretty sure that the problem is with the javascript:
document.getElementById(mobilemenuitems a).addEventListener('click', function(e) {
document.getElementById('mobilemenuitems').remove();
});
I believe you are trying to hide the div with class mobilemenuspace when any of the links inside it are clicked. To do so, you can use the following -
$('a').click(function(e){
e.preventDefault();
if ($(this).parents('.mobilemenuspace').length) {
$('.mobilemenuspace').hide();
}
});
Working sample - https://jsfiddle.net/zv18xuhL/
A pure JS solution forked from your Fiddle -
http://jsfiddle.net/e69snqjk/
I'm using bootstrap's default navbar. I want the active page to be represented by a dark gray block dynamically upon clicking the link. I can't seem to get it to work. Here's the code I have so far. It's similar to this question except I'm trying to integrate it with Bootstrap.
Codeply went down?
New demo with edits here.
I think you want
$(".navbar-nav a").click(function() {
$(".navbar-nav > .active").removeClass("active");
$(this).parent().addClass("active");
return false;
});
I am kind of simulating that I have multiple pages by defining 2 divs that each act as a page. Only one page at the time is shown. Those divs are:
divProjectList
divProjectListItem
When the user opens the website, the div 'divProjectList' is shown. This div contains an un-ordered list with projects. This is a long list, so it is sortable.
As soon the user clicks an item from the list, I do a $('#divProjectList').hide() followed by a $('#divProjectListItem').show(). The list is now invisible for the user and instead is presented with project details for the item he selected from the list.
As soon as the user clicks the close button it works the other way around. The project details page is being hidden and the project list page is being shown again.
If the user scrolled down a bit (or a couple of pages) then the project list is scrolled back to the first item and the item that he clicked is now out of view.
I have a JSFiddle that has a hide- and show-button and a list which simulates the behavior that I described above.
I would like to know if it is expected behavior what I see here and how I could circumvent this. For now I solved it by doing a $.ScrollTo:
$('#' + currentProjectId).ScrollTo({duration: 0, offsetTop: 151})
This jquery code reminds you where you scrolled to, and puts you back there when you press the show button:
http://jsfiddle.net/py7zemLo/1/
jquery:
var scroll;
$("#btnHide").on("click", function (e) {
scroll = $(document).scrollTop();
// $("#divOptions").hide();
$("#divOptions").css('display', 'none');
})
$("#btnShow").on("click", function (e) {
// $("#divOptions").show();
$("#divOptions").css('display', 'block');
if ( scroll !== null ) {
$(document).scrollTop(scroll);
}
})
I hope this helps you!
I'm using twitter boostrap for the first time & am using the collapsible accordion.
I wants to trigger the first accordion open when the last one get completed. Its working in the forward directions. But the control is not working fine for me when i looking in the backward direction. Can anyone please help on this?
Just use a jQuery cookie and make a modification to the accordion script
$(document).ready(function() {
var last=$.cookie('activeAccordionGroup');
if (last!=null) {
//remove default collapse settings
$("#accordion2 .collapse").removeClass('in');
//show the last visible group
$("#"+last).collapse("show");
}
});
//when a group is shown, save it as the active accordion group
$("#accordion2").bind('shown', function() {
var active=$("#accordion2 .in").attr('id');
$.cookie('activeAccordionGroup', active)
});
I have a super fish menu, the delay is set to 800, but when I move from one drop-down to another it still shows the previous drop-down and the new drop-down at the same time. until the 800ms delay is over then the previous drop-down goes away. I do not want to change the delay, but if a new drop-down is opened, I want the previously opened drop-down to close right away without delay. I hope this makes sense.
Is there a way to do that?
Thanks!!
Click to view
On its website, delay is set to 800 and I guess it works fine, it doesn't display old popup. Did you make any other changes in its code?
http://users.tpg.com.au/j_birch/plugins/superfish/#examples
Edit:
Ok here is a solution if you don't want to modify your multiple UL menu structure to a single UL. Just give unique ids to each UL, then modify over = function() in superfish.js like this
over = function(){
var $$ = $(this), menu = getMenu($$);
$('.sf-menu').each(function(){
if ($(this).attr('id') != $(menu).attr('id')) {
$(this).hideSuperfishUl();
}
});
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
this may cause some other side effects but I don't see any for now.