I have a dropdown menu that slides up and down when toggled to reveal it's menu items. The problem is that when i go to click one of the menu items after the menu has slid down, it is recognized as a toggle and the menu slides up without opening the link of the menu item.
HTML
<li class="dropdown">
Carbohydrates, proteins & fats
<ul>
<li>Carbohydrates</li>
<li>Proteins</li>
<li>Fats</li>
</ul>
</li>
dropdown script:
$(document).ready(function () {
$('.dropdown').toggle(
function () {
//show its submenu
$('ul', this).slideDown(300);
},
function () {
//hide its submenu
$('ul', this).slideUp(300);
}
);
});
I'd appreciate any help with this.
Try moving the triggering link outside of the dropdown items
Carbohydrates, proteins & fats
<div class="divdropdown">
<ul>
<li>Carbohydrates</li>
<li>Proteins</li>
<li>Fats</li>
</ul>
</div>
And then slightly modify your jquery
$(document).ready(function () {
$('.dropdown').toggle(
function () {
//show its submenu
$('ul', $(".divdropdown")).slideDown(300);
},
function () {
//hide its submenu
$('ul', $(".divdropdown")).slideUp(300);
}
);
});
Why are you individually closing/opening the menu items? Everything gets hidden anyway when the parent <li> element is hidden -- why do anything after that?
I think you want to disable event bubbling.
EDIT 1: You're over-complicating things. Try this:
$(document).ready(function () {
$('.dropdown').toggle();
});
EDIT 2: Can you be more specific about what you want? If you want a particular element, when clicked, to control the motion of a particular list, try this:
$(document).ready(function () {
$('a.someLink').click(function() {
$('.dropdown').toggle();
});
});
Unfortunately none of the above answers were working for me. I found a solution shortly afterwards.
HTML
<li class="dropdown">
<a class="disablelink" href="#">Carbohydrates, proteins & fats</a>
<ul class="sub_navigation">
<li>Carbohydrates</li>
<li>Proteins</li>
<li>Fats</li>
</ul>
</li>
jquery script
$(document).ready(function() {
$('.dropdown').click(function() {
// When the event is triggered, grab the current element 'this' and
// find it's children '.sub_navigation' and display/hide them
$(this).find('.sub_navigation').slideToggle();
});
$(".disablelink").click(function(e) {
e.preventDefault();
});
});
That solution is working perfectly for me. I added in e.preventDefault(); to stop the page jumping up and down when i clicked on the link.
Related
In mobile view of my page, when the menu option is selected, it drops down and an expanded class value is added. That value never gets removed once I click on a menu element. I need to remove the expanded class value when any item in the menu is clicked and remove the expanded menu since it covers the entire page of my one page site.
check in mobile view.
<nav class="top-bar" data-topbar="" style="position: fixed; top: 0px;">
.
.
.
</nav>
<script type="text/javascript">
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".expanded").hasClass("expanded in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$("button.navbar-toggle").click();
}
});
});
</script>
You can do something like this.
You can remove that "expanded" class from the "top-bar" for each menu item click by checking that class is exist.
$(".top-bar-section ul li > a").click(function() {
if($('.top-bar').hasClass('expanded')){
$('.top-bar').removeClass('expanded')
}
});
Use $('#menuContent').toggleClass('expanded') when the menu button is clicked, and $('#menuContent').removeClass('expanded') when a menu item is clicked, like so:
$(document).ready(function() {
$('#menuButton').click(function(event) {
$('#menuContent').toggleClass('expanded');
});
$('.menuItem').click(function(event) {
$('#menuContent').removeClass('expanded');
});
});
Here is a fully functional JSFiddle to demonstrate.
On my mobile site I've got a vertical dropdown menu (like an accordion) where each parent item features a down-pointing arrow to indicate the drop-down. When the user clicks on the parent item the arrow rotates and when you click it again to close the drop-down it rotates back to it's original state. However, if you don't click the drop-down to close it but just click on another parent item the drop-down closes, but the arrow stays in the rotated position.
Here is the code :
$('li.nav-about').click(function () {
$('#arrow-about').toggleClass("rotate");
$(this).find('ul').toggle();
});
$(' li.nav-industry').click(function () {
$('#arrow-indusrty').toggleClass("rotate");
$(this).find('ul').toggle();
});
$('li.nav-application').click(function () {
$('#arrow-application').toggleClass("rotate");
$(this).find('ul').toggle();
});
Any suggestions how to remove the 'rotate' class when another item is clicked?
EDIT
Here's what the mark up looks like :
<ul id="nav-list">
<li class="nav-list_item nav-about">About Us<div class="arrow-down" id="arrow-about"></div>
<ul>
<li>....</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li class="nav-list_item nav-products">Products<div class="arrow-down" id="arrow-products"></div>
<ul>
<li>....</li>
<li>...</li>
<li>...</li>
</ul>
</li>
You can remove the existent rotate class from every button before toggle the current like:
$('li.nav-about').click(function () {
$('.rotate:not("#arrow-about")').removeClass("rotate");
$('#arrow-about').toggleClass("rotate");
$(this).find('ul').toggle();
});
(' li.nav-industry').click(function () {
$('.rotate:not("#arrow-indusrty")').removeClass("rotate");
$('#arrow-indusrty').toggleClass("rotate");
$(this).find('ul').toggle();
});
$('li.nav-application').click(function () {
$('.rotate:not("#arrow-application")').removeClass("rotate");
$('#arrow-application').toggleClass("rotate");
$(this).find('ul').toggle();
});
If you don't want to change too much of your code, just try this.
$('li.nav-about').click(function () {
$('#arrow-about').toggleClass("rotate");
$('#arrow-indusrty').removeClass("rotate");
$('#arrow-application').removeClass("rotate");
$(this).find('ul').toggle();
});
$(' li.nav-industry').click(function () {
$('#arrow-about').removeClass("rotate");
$('#arrow-indusrty').toggleClass("rotate");
$('#arrow-application').removeClass("rotate");
$(this).find('ul').toggle();
});
$('li.nav-application').click(function () {
$('#arrow-about').removeClass("rotate");
$('#arrow-indusrty').removeClass("rotate");
$('#arrow-application').toggleClass("rotate");
$(this).find('ul').toggle();
});
Now you are sure that each element, instead of the selected one, will turn to their original state.
you could do this.
var toggleNavigation = function(){
var r_navigation = $('li.nav-about,li.nav-industry,li.nav-application');
$(r_navigation).each(function(i, oNav){
$(oNav).on('click',function(){
if(!$(oNav).hasClass('rotate')){
$(r_navigation).removeClass('rotate');
$(oNav).addClass('rotate');
}else{
$(oNav).removeClass('rotate');
}
});
});
};
I have this problem with the shown.bs.dropdown event handler for the bootstrap dropdown. At the show event i set the animation class and i want that after the animation is complete to remove the class. Unfortunately the event is firing immediately after the show event.
I tried applying the class in the attribute at runtime (thought that this way bootstrap will be aware about the css transition to be applied and to delay the shown event) but with no result. The animation classes are provided by animate.css library. I set up a fiddle to show my issue. - http://jsfiddle.net/u08bt6ck/
Here is my markup:
<ul class="nav navbar-nav">
<li id="userMenu" class="dropdown">
Open me
<ul class="dropdown-menu">
<li><i class="fa fa-sliders"></i>lnk 1</li>
<li><i class="fa fa-user"></i>lnk 2</li>
<li><i class="fa fa-clock-o"></i>lnk 3</li>
</ul>
</li>
</ul>
And this is the js:
$('#userMenu').on({
"show.bs.dropdown": function () {
$('.dropdown-menu', this).addClass('animated fadeInDown');
},
"shown.bs.dropdown": function () {
$('.dropdown-menu', this).removeClass('animated fadeInDown');
},
"hide.bs.dropdown": function() {
$('.dropdown-menu', this).addClass('animated fadeOutDown');
},
"hidden.bs.dropdown": function () {
$('.dropdown-menu', this).removeClass('animated fadeOutDown');
//alert('ni ca s-a terminat');
}
});
For everyone having this problem i'll post here how i managed to work around this issue/problem.
Basically i set the fade in class when the user clicks and let it there until the menu is closing. If the menu starts to close, the fadeIn class is removed, the fadeOut class is added and after the animation is complete (handeled by the jquery .on([animationEndSelectors])) i remove the fadeOut class and close the submenu (by revmoving the open class on the ul).
var animationEndSelectors = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var inAnimation = 'animated ' + 'fadeInDown';
var outAnimation = 'animated ' + 'fadeOutUp';
$('#userMenu').on({
"show.bs.dropdown": function () {
$('.dropdown-menu', this).addClass(inAnimation);
},
"hide.bs.dropdown": function() {
var ddl = this;
$(ddl).addClass('closing');
$('.dropdown-menu', this).removeClass(inAnimation);
$('.dropdown-menu', this).addClass(outAnimation);
$('.dropdown-menu', this).one(animationEndSelectors, function () {
$('.dropdown-menu', ddl).removeClass(outAnimation);
$(ddl).removeClass('open closing');
});
return false;
}
});
You just need to create delays for when the animation classes are added/removed. For the "hide" event, you'll need to prevent Bootstrap from hiding it too soon by manually removing the open class after your animation classes are added...
$('#userMenu').on({
"shown.bs.dropdown": function () {
$(this).find('.dropdown-menu').addClass('animated fadeInDown');
setTimeout(function(){
$('.dropdown-menu').removeClass('animated fadeInDown');
},1000);
},
"hide.bs.dropdown": function(e) {
e.preventDefault();
$(this).find('.dropdown-menu').addClass('animated fadeOutUp');
setTimeout(function(){
$('.dropdown-menu').removeClass('animated fadeOutUp').parent().removeClass('open');
},1000);
}
});
Demo: http://bootply.com/iZObFaEJwr
Try this way.
$('#userMenu').on({"show.bs.dropdown",function () {
$('.dropdown-menu').addClass('animated fadeInDown');
});
$('#userMenu').on({"shown.bs.dropdown",function () {
$('.dropdown-menu').removeClass('animated fadeInDown');
});
$('#userMenu').on({"hide.bs.dropdown",function() {
$('.dropdown-menu').addClass('animated fadeOutDown');
});
$('#userMenu').on({"hidden.bs.dropdown",function () {
$('.dropdown-menu').removeClass('animated fadeOutDown');
});
I had exactly the same problem and it made no sense why the dropdown events wouldn't fire for me properly; turns out that class="dropdown-toggle" in my <a> element interfered with its data-toggle="dropdown" attribute.
Why this is the case, no idea (probably a package issue I'm not willing to spend more time delving into), but removal of this class did it for me; no need for all those crazy manual animation class hacks in the events.
I am building a registration system and I have a progress bar and a bootstrap nav-tabs in that page.
I am trying to setup the JQuery so that the progress bar advances with the nav-tabs. Here is a visual.
I tried to come up with a simple if else conditional jquery using hasClass and addCLass functions but never got to make a dent.
Something like this:
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if (".nav-tabs") hasClass(".active"); {
$(".checkout-bar li").addClass("active");
}
});
});
I am attaching a CODEPEN
Any idea on how to do this client side? I'd rather keep C# out of this one
http://jsfiddle.net/o3637uwh/2/ (update)
in html remove class form all checkout-bar li, except first
HTML
<ul class="checkout-bar">
<li class="active">Get Started</li>
<li class="">About You</li>
<li class="">Looking For</li>
<li class="">Review</li>
</ul>
JQ (update)
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var href = $(e.target).attr('href');
var $curr = $(".checkout-bar a[href='" + href + "']").parent();
$('.checkout-bar li').removeClass();
$curr.addClass("active");
$curr.prevAll().addClass("visited");
});
});
You are not specifying which .checkout-bar li to select. You have to get the index of the .active tab and with this index select the checkount li, I think you shoud do something like this:
$(document).ready(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
activeTabIndex = $('.nav.nav-tabs > li.active ').index();
(".checkout-bar li.active").removeClass('active');
$(".checkout-bar li:eq("+activeTabIndex+")").addClass('active')
});
});
I'm trying to assign two actions to a button in jQuery. The button is supposed to:
open a hidden div, and...
scroll down to get said div into view.
While both actions are working on the button, they currently require 2 clicks. On the first click the div appears, but to scroll it into view I need to click the button a second time.
Any suggestions how I am going wrong?
jQuery
$(document).ready(function () {
"use strict";
$('.footer a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn(function () { // show cuurent click link's popup
$(this).css({
'display': 'block'
});
});
$.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
});
});
HTML
<div id="impressum-footer">
<div class="footer">
<div class="inner-wrap-imp">
<ul class="impressum-links">
<li>Impressum</li>
<li>|</li>
<li>Datenschutz</li>
<li class="impressum-button" ></li>
</ul>
</div>
</div>
<div id="impr-text" class="impr-text">
<div class="inner-wrap"> ...
You need to put the scrollTo in the fadeIn completion callback handler. That way callTo is performed on completion of the fadeIn rather than, essentially, at the same time. Currently you seem to also be placing a callback function where another parameter is to go (either duration or options object depending on which method signature you are using). Not sure why you have the css change there at all.
Try something like this:
$(document).ready(function () {
"use strict";
$('.footer a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn({
duration: 100, // or whatever duration you want to use
complete: function() {
$.scrollTo( '#impressum-footer', 800, {easing:'elasout'} );
}
});
});
});
if you want to assign 2 different actions on one button, set it 2 different classes (or IDs), lets say
<div class="action1 action2">
After, in jQuery you will be able to do:
$('.action1').on('click', function (e) { console.log('#1'); ... });
$('.action2').on('click', function (e) { console.log('#2'); ... });
JsFiddle: http://jsfiddle.net/g2wdd2cb/
I have now managed to get it going. The approach as explained by #euvl was the one...
I changed my code (the scrolling part) after I realized it wasn't working. The final (working) code now looks like this:
jQuery:
$(document).ready(function () {
"use strict";
$('.footer-action-1 a').click(function (event) {
event.preventDefault();
$('.impr-text').hide(); // hide previous popup div
var id = $(this).data("id"); // get the div id which to show
$('#' + id).fadeIn(function () { // show cuurent click link's popup
$(this).css({
'display': 'block'
});
});
});
});
$(document).on('click','.footer-action-2 a', function(event) {
event.preventDefault();
var target = "#" + this.getAttribute('data-target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
HTML:
<div id="impressum-footer">
<div class="footer footer-action-1 footer-action-2">
<div class="inner-wrap-imp">
<ul class="impressum-links">
<li>Impressum</li>
<li>|</li>
<li>Datenschutz</li>
<li class="impressum-button" ></li>
</ul>
</div>
</div>
<div id="impr-text" class="impr-text">
<div class="inner-wrap">
The only problem now is that it scrolls a little too far. The moment I add an offset it stops working.