I have a question similar to others on here but those didn't help because they referred to list links while these are not lists.
I have a horizontally sliding site. When you click the links at the top, they highlight according to what page it is sliding to. However, if you use the left and right nav arrows, the links don't highlight properly. It just stays highlightted on the last link that was clicked. I was wondeering if anyone could show me what I am doing wrong. I want the correct link to be highlighted even when the nav arrows are being used.
Here is the script on jsfiddle: http://jsfiddle.net/LD9YS/13/
And here is one of my failed attempts... (please don't try to figure out what I was doing here... I have no idea of this myself)
$(".arrow-right").click(function(){
prevA.removeClass("active");
prevA = $(A[index]).addClass("active");
});
It's painfully obvious that I haven't the first clue how to do this but at least i gave it a few attempts. I wanted to show more of my attempts but they were so obsurd that I can not even remember what I had done on those.
Can someone please help? If someone can't help with this, Im ready to just give up on it.
You'd do that like so
$('.arrow-left').on('click', function (e) {
e.preventDefault();
$('.tabs .active').prev().trigger('mousedown');
});
$('.arrow-right').on('click', function (e) {
e.preventDefault();
$('.tabs .active').next().trigger('mousedown');
});
FIDDLE
Here is what you should do:
$('.arrow-left').on('click', function(e){
e.preventDefault();
mySwiper.swipePrev();
$(".tabs .active").removeClass('active');
$($('.tabs a')[mySwiper.activeIndex]).addClass('active');
})
$('.arrow-right').on('click', function(e){
e.preventDefault();
mySwiper.swipeNext();
$(".tabs .active").removeClass('active');
$($('.tabs a')[mySwiper.activeIndex]).addClass('active');
})
This would work for right arrow...
$('.arrow-left').on('click', function(e){
e.preventDefault()
var current = $('.tabs').find('a.active').index();
if(current!= $('.tabs').find('a:first').index()){
$('.tabs a').removeClass('active');
$('.tabs a').eq(current-1).addClass('active');
}
mySwiper.swipePrev()
})
The same for left arrow
$('.arrow-right').on('click', function(e){
e.preventDefault()
var current = $('.tabs').find('a.active').index();
if(current!= $('.tabs').find('a:last').index()){
$('.tabs a').removeClass('active');
$('.tabs a').eq(current+1).addClass('active');
}
mySwiper.swipeNext()
})
Related
I'm using a Visual Composer Wordpress Shortcode to generate an Accordion. When I click on the tabpanels there is an anchor link which is linked to the panel body and opens it, however the body scrolls to the anchor link but I want to prevent the scrolling. I've already tried everything I could find such as
$('body, html').stop();
preventDefault();
return false;
stopPropagation();/stopImmediatePropagation();
However, after some trying around the only thing that is working right now, is the following code:
jQuery(document).ready(function($){
$('#product-accordion .vc_tta-panel-title a').on('click', function(){
e.preventDefault();
});
});
Well, with this "solution" I'm getting an error, of course, for undefined e, on every click. But I can't quite understand why it would work like I want that way.
Can anyone help me and find a solution which will work error-free?
You can try stopImmediatePropagation instead preventDefault.
jQuery(document).ready(function($){
$('#product-accordion .vc_tta-panel-title a').on('click', function(e){
e.stopImmediatePropagation();
});
});
I have a navigation bar in my website and all the links are loading a content in a container through AJAX.
Now, I need to hide the dropdown menu when a link is clicked. That's not the normal behavior of bootstrap.
Here's my code in the fiddle.
$(".dropdown-menu a").click(function() {
$(this).closest(".dropdown-menu").prev().toggle();
});
http://jsfiddle.net/fw7vh/158/
I recently browsed into existing answers but it removes the dropdown button. Please advise. Thanks!
Try with:
$(".dropdown-menu a").click(function() {
var menu = $(this).closest(".dropdown-menu");
$(menu).css('display','none');
setTimeout(function(){
$(menu).css('display','');
},200);
});
If I understood your question correctly, this might help you.
$(".dropdown-menu a").click(function() {
$(this).closest(".dropdown-menu").toggle();
});
You can achieve this easily with replacing your code
$(".dropdown-menu a").click(function() {
$(this).closest(".dropdown-menu").prev().toggle();
});
with this
$(".dropdown-menu a").click(function() {
$(document.body).click();
});
Here is the working fiddle
I have multiple tabs in one page and having trouble in setting up an active class to the selected menu. It's working great if I only have one set of tab. If I click on the first tab menu, the 2nd tab menu will lose its active class. Also the fade in effect is not workin. Please help. thank you. Fiddle here.
$(".tabs a").click(function() {
$(".tabs a").parent().removeClass("active");
$(this).parent().addClass("active").fadeIn('slow');
});
Do it like this
$(".tabs a").click(function(e) {
e.preventDefault();
var p = $(this).closest('.tabs');
var i = '#'+$(this).attr('data-tab');
$(this).closest('ul').find('li').removeClass("active");
$(this).parent().addClass('active');
$(p).find('.tabInner div').hide();
$(p).find(i).fadeIn('slow');
});
JFIDDLE EXAMPLE
Try this to fix the selection of the tabs:
$(".tabs a").click(function () {
$(this).closest('ul').find('li').removeClass("active");
$(this).parent().addClass("active").fadeIn('slow');
$(this).closest('ul').next(".tabInner").find("div").eq($(this).parent().index()).hide().fadeIn('slow');
});
jsFiddle example
I added the code to the js below. When you click on either the Sign up or Login the arrow moves / point up, but when you close it again it stay that way. Can someone help me out figure what to do.
I tried using this post but cant make this work either here
Here is the Jquery script I use
$(document).ready(function () {
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
$(this).addClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲');
$('#signup-content').slideUp();
})
$('#signup-trigger').click(function () {
$('#login-content').slideUp();
$(this).addClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲');
$('#signup-content').slideToggle();
});
});
Here is my jsfiddle, ( I know some people don't pref jsfiddle but since I have a lot of code and it will be so much easier to show what I'm trying to do with it)
the problem is since you are adding the class active to it, on click event .. and right after, you are checking if it has a class active(which is always true)...
use toggleClass(it toggles the mentioned class) instead of addClass and check with hasClass
$(document).ready(function () {
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')){
$(this).find('span').html('▲');
}else{
$(this).find('span').html('▼');
}
$('#signup-content').slideUp();
});
.... //same for signup
fiddle here
and yes I know some people don't pref jsfiddle .. i guess you are wrong , i am sure most people prefer jsfiddle rather than the code itself since it is easier to test in fiddle.
You missed else part.
Try:
$(this).toggleClass('active');
if ($(this).hasClass('active')){
$(this).find('span').html('▲');
}
else{
$(this).find('span').html('▰');//code of down arrow
}
Fiddle here.
You never remove the class active, so after the first click it looks like it is always active, and you also never change the triangle shape after the first click.
This code should work for the login:
$('#login-trigger').click(function () {
$('#login-content').slideToggle();
if (!$(this).hasClass('active')) { //Now is not active, I'll make it active
$(this).addClass('active'); //Add class
$(this).find('span').html('▲'); //BLACK UP-POINTING TRIANGLE
} else { //Now is active, I'll make it not active
$(this).removeClass('active'); //Remove class
$(this).find('span').html('▼'); //BLACK DOWN-POINTING TRIANGLE
}
$('#signup-content').slideUp();
})
This is the jsfiddle link.
I put a form inside a bootstrap dropdown, but when I click any of the fields in the form, the dropdown goes away. I have this piece of code but I don't know where to put it to prevent the dropdown disappearing.
$(function test() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
Could someone please tell me where I should put this? I tried in the bootstrap-dropdown, I tried within the HTML but it still doesn't work.
You can omit the dropdown call all together, the bootstrap dropdown works without it. Make sure you're wrapping your script properly, you can include it on the header or body of your page, although personally i prefer placing it on the body of your page.
JS
<script type="text/javascript">
$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
e.stopPropagation();
});
</script>
If you want to stop closing only some of dropdown menu, not all of them, then just add an additional class to your ul block:
<ul class="dropdown-menu keep-open-on-click">
And use this code:
$(document).on('click', '.dropdown-menu', function(e) {
if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});
Time passed since answer had been accepted, but if you want to keep the dropdown opened, if it acts like a kind of dialog, the best way i think is:
$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
if ($.contains(dropdown, e.target)) {
e.preventDefault();
//or return false;
}
});
You need to stop event from bubbling up the DOM tree:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.
This works for my (lateral sidebar opening a simple link with bootstrap toggle)
$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
e.stopImmediatePropagation();
});
Thank you for the above answer, I was having the same issue w/ submenus under the dropdown menus. Using the above solution I was able to solve the problem for this as well.
$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{
e.stopPropagation();
});
Simply use this example.This solution works for me.
<script type="text/javascript">
window.addEvent('domready',function() {
Element.prototype.hide = function() {
$(function () {
// replace your tab id with myTab
//<ul id="myTab" class="nav nav-tabs">
$('#myTab li:eq(1) a').tab('show');
});
};
});
</script>
Hope it'll help. Thanks.
Put
<script type="text/javascript">
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
</script>
on the original answer, remove all the classes, and just put the ".dropdown-menu" class, it worked for me.
i have an input field inside the dropdown menu.
If you look to the bottom of sources of dropdown widget, you will see this:
$(document)
.on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
e.stopPropagation()
})
So you have the following choices:
Simply wrap yor dropdown with form
Or you can add event listener for click event of .dropdown YOUR_SELECTOR
$(document)
.on('click.my', '.dropdown some_selector', function(e) {
e.stopPropagation()
})