Check if button has been clicked more than once - javascript

I have a set of 3 tabs and everytime i click on the same tab it replays the fade-in animation and blinks and i need it to only show the animation when i click on a new tab and not display the fade-in animation when i click on the same tab.
Its because it removes and re-adds the same class everytime i click at it.
what i currently have is:
(function ($) {
var tabs = $(".tabs li a");
tabs.on("click", function () {
var content = this.hash.replace("/", "");
tabs.removeClass("active");
$(this).addClass("active");
$("#content").find("section").hide();
$(content).fadeIn(200);
});
})
<ul class="tabs">
<li><a class="active" href="#/one">Tab 1</a></li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
What i have tried:
// if tab is clicked/selected then remove animation
if(!$(tabs).data("clicked")) {
$(content).fadeIn(200);
} else {
$(content).fadeIn(0);
}
$(".active").data('clicked', true);
// if click count is higher than 1 then remove animation
var trigger = $(this),
clickCount = trigger.data('clickCount');
clickCount++;
trigger.data('clickCount', clickCount);
if(clickCount > 1) {
$(content).fadeIn(0);
}

Have you tried like that :
var tabs = $(".tabs li a");
tabs.on("click", function () {
if( !$(this).hasClass("active") ){
var content = this.hash.replace("/", "");
$("#content").find("section").hide();
$(content).fadeIn(200);
$(".tabs li").find(".active").removeClass("active");
$(this).addClass("active");
}
});

I'd suggest always check if active class exists before adding it.
And only if it doesn't exist add this class and animation.
In this case if active class exists you will not be able to add this class again and the animation not be triggered again.

in JavaScript
element is the button you need specifically.
you can get the button id using a simple Js query
var element = document.getElementById('buttonID');
element.on('click', (){
let counter = 0;
return function inner() {
counter++;
console.log('Number of clicks: ' + counter);
};
})

Related

Making a jQuery image slider stop at last image and adding next and prev buttons

I have the following example which goes through each LI and if you hover image will pause and the continue when you mouseout but this is as far as I have got.
I would like it to stop when it gets to the last LI and also would like to make the 2 links I added wth classes "next" and "prev" so if clicked will move to next or prev image. Of course if at first image to set a class on prev like hidden and if on last image set next button to hidden so cannot be used, however this is as far as I have got.
$( function() {
var timer;
lis = $(".productImage");
function showNext() {
var active = lis.filter(".active").removeClass("active");
var next = active.next();
if (next.length===0) {
next = lis.eq(0);
}
next.addClass("active");
}
function showPrev() {
var active = lis.filter(".active").removeClass("active");
var prev = active.prev();
if (prev.length===0) {
prev = lis.eq(0);
}
prev.addClass("active");
}
function playGallery() {
stopGallery();
timer = window.setInterval(showNext, 2500);
}
function stopGallery() {
if (timer) window.clearTimeout(timer);
}
// move to next image
$('.galleryNext').on('click', function(event){
stopGallery();
showNext();
});
// move to previous image
$('.galleryPrev').on('click', function(event){
stopGallery();
showPrev();
});
// reset slider timer if thumbnail changed
$('.thumbnail-list li a').on('click', function(event){
stopGallery();
playGallery();
});
// pause image slider if mouse is hovering gallery main image
$(".featured-image-list")
.on("mouseleave", playGallery)
.on("mouseenter", stopGallery);
playGallery();
});
.productImage {
display : none;
}
.productImage.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="featured-image-list">
<li class="productImage active">1</li>
<li class="productImage">2</li>
<li class="productImage">3</li>
<li class="productImage">4</li>
<li class="productImage">5</li>
</ul>
<a class="galleryPrev">prev</a>
<a class="galleryNext">next</a>
modifying your code a bare minimum I've come up with this:
JSFIDDLE
Simply placing showNext() and showPrev() within the functions below gets the next and prev buttons working with the caveat that it also stops the slides from auto progressing (and I see in your edit that's what you did):
function nextImage() {
stopGallery();
showNext();
}
function prevImage() {
stopGallery();
showPrev();
}
I'll leave it up to you to come up with a solution to that.
And you can also edit your showNext and showPrev functions with the addition of the following:
// add to showNext()
if (next.next().length===0) {
stopGallery();
nextBtn.addClass("hidden");
}
// add to showPrev()
if (prev.prev().length===0) {
prevBtn.addClass("hidden");
}

Bootstrap nav-tabs with progress bar

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')
});
});

Watch elements count by class using jQuery

I have simple HTML:
ul > li > button
And have some JavaScript code:
$('.side-filters .filters_list li').each(function(){
$(this).find('button').click(function(){
var arrList = $('.side-filters .filters_list li .active').map(function(){
return $(this).attr('id');
}).get();
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
});
If I click on a button, add class 'active' to the button, and if clicked again, remove class.
I need live count elements witn class 'active'. If there is at least one given ul class 'someclass' and if I click again and have no elements with class active, remove 'someclass' from the Ul.
How can I do this?
There is no need to loop through the elements and add a click to every button. Add one listener.
//listen for click on a button
$('.side-filters', "click", ".filters_list li button", function(){
//toggle the active class on the button
var button = $(this).toggleClass("active");
//see if anything is selected
var hasSelection = $('.side-filters .filters_list li .active').length > 0;
//toggle a class on the closest ul based on if anything is selected.
button.closest("ul").toggleClass("someclass", hasSelection);
});
References:
toggleClass(class [, switch])
.closest( selector )
You can add this function ()
function someclass () {
var count = $('.active').length;
if (count >= 1) {
$('ul').addClass('clasHere')
} else {
$('ul').removeClass('clasHere')
}
}

touch device hover to doubletap for sub menus?

In a jQuery setting what is the best way to stop default propagation on the first click and show the submenu if the user is on the first click then restore the a link on the second click, or hide the currently displayed submenu if the users clicks on any other part of the page i have tried this with a few variations but none seem to work:
$('.nav-bar li:has(ul)').on('click', function () {
var CheckForClasssub = $('.nav-bar li ul').hasClass('subshow');
if (CheckForClasssub) {
$('.subshow').hide('slow').removeClass('subshow');
} else {
$('.nav-bar li').on('click', function () {
var thisflyout = $(this).find('.flyout');
$(thisflyout).toggle('slow').addClass('subshow');
});
}
});
this is my current menu structure:
<ul class="nav-bar">
<li>
google
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</li>
<li>google</li>
<li>google</li>
<li>google</li>
<li>google</li>
</ul>
currently clicking on class="flyout" toggles the sub menu, but i would love to use the whole link
/*UPDATE**/
Ok this works fine to display on first click then follow link on second but it doesn't hide if the page is clicked anywhere else...
$('.nav-bar li:has(ul)').on('click', function (e) {
var CheckForClasssub = $('.nav-bar li ul').hasClass('subshow');
if (CheckForClasssub) {
$('.subshow').hide('slow').removeClass('subshow');
} else {
var thisflyout = $(this).find('.flyout');
e.preventDefault();
$(thisflyout).show('slow').addClass('subshow');
}
});
/*UPDATE**/
To clarify requirments:
user clicks on menu item with both an A link as the parent and a submenu using
ul > li + a > ul > li
If this is the first click show submenu.
If second click direct through to the relvant a link.
If user has clicked once on menu item 1 showing the submenu but decided to click on another parent menu item with a submenu hide submenu 1 show submenu 2.
If user has clicked on menu item 1 and decides to click anywhere else on page that isn't a menu item with a submenu hide the open submenu....
var submenucheck = $('.nav-bar li ul');
var submenucheckli = $('.nav-bar li a');
showHide = false;
function checkforsubsopen() {
// body...
$.each(submenucheck, function(el) {
/* iterate through array or object */
if($(this).hasClass('subshow')){
showHide = true;
}
});
return showHide;
}
$('.nav-bar li:has(ul)').on('click', function(e) {
var CheckForClasssub = $('.nav-bar li ul').hasClass('subshow');
if(CheckForClasssub){
}
else{
var thisflyout = $(this).find('.flyout');
e.preventDefault();
$(thisflyout).show('slow').addClass('subshow');
}
});
$(document).on('click', function(){
checkforsubsopen();
if(showHide){
$('.subshow').hide('slow').removeClass('subshow');
}
console.log(showHide);
});

Nav/Subnav list, how to give clicked item active class after reload of page

I have a couple nested & hidden sub-nav lists
<ul class="nav">
<li>Home</li>
<li><a class="profile" href="#">Profile</a>
<ul id="profile">
<li>Company</li>
<li>Structure</li>
<li>Team</li>
</ul>
</li>
<li><a class="projects" href="#">Projects</a>
<ul id="projects">
<li>Chapter</li>
<li>Pblc Trde</li>
<li>Globe</li>
<li>Komforte</li>
</ul>
</li>
I am currently using some jQuery i found online to show/hide the sub-nav upon click. What I am trying to accomplish is:
Hopefully clean up the show/hide click function of the sub-nab menus.
When clicking on the sub-nav menu items, the corresponding page that opens, needs to have the sub-nav expanded and give the corresponding menu item active class, so as to let the user know which page they are on.
I am hoping to do this purely in JS/jQuery. The installation of the site will be in WordPress.
$(document).ready(function () {
$(".profile").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$("#profile").hide();
$(this).attr('id', '0');
} else {
$("#profile").show();
$(this).attr('id', '1');
}
});
//Mouse click on nav
$("#profile").mouseup(function () {});
//Document Click
$(document).mouseup(function () {
$("#profile").hide();
$(".profile").attr('id', '');
});
$(".projects").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$("#projects").hide();
$(this).attr('id', '0');
} else {
$("#projects").show();
$(this).attr('id', '1');
}
});
//Mouse click on nav
$("#projects").mouseup(function () {});
//Document Click
$(document).mouseup(function () {
$("#projects").hide();
$(".projects").attr('id', '');
});
});
window.onload = function () {
$("ul#profile li:first").addClass("active");
};
$(document).ready(function () {
$("ul#profile").show()
});
$(document).ready(function()
{
// Get the name of the page. Split the URL at the '/':s and get the last part
// with pop():
var pageName = (location.pathname).split('/').pop();
// If we couldn't get a page name, default to index.html:
if( pageName == '' )
{
pageName = 'index.html';
}
// Hide ul:s that are children of the navigation:
$('.nav ul').hide();
// Event handler for clicks on navigation links:
$('.nav a').on('click', function()
{
// Change visibility for the first ul-child of the current li.
// $(this) refers to the clicked element.
$(this).parent('li').find('ul').first().toggle();
// Hide other sub-menus:
$(this).parents('li').siblings('li').children('ul').hide();
});
// Search through all link elements in the nav menu:
$('.nav').find('a').each(function(index, value)
{
// Append a '$' to the pagename to make the match()-function search
// from the end of the href value:
pageName += '$';
if( value.href.match(pageName))
{
// If the pagename matches the href-attribute, then add the 'active'
// class to the parent li, and show parent ul:s:
$(this).parent('li').addClass('active').parents('ul').show();
}
});
});
You could use a Cookie to hold the value of the currently open menu. This will allow for the value to be saved/retrieved between page loads and browser sessions.
As you've already got jQuery setup you can use the jQuery Cookie plugin to simplify things.
The code for it is quite simple (more examples on plugin page).
$.cookie('open_menu', 'projects'); //Save 'projects' under 'open_menu'
$.cookie('open_menu') //Returns 'projects'
Just check the value on page load and save it when one of the menu's is clicked.
If you'd prefer not to add any extra plugins here's some documentation on JavaScript's inbuilt cookie API.
Edit: I've created a JSFiddle with an example for you. The Cookie code doesn't seem to work in there sandbox, but the code should work for you, let me know if you have any troubles.
$(window).load(function() {
if ($.cookie('show_menu') !== undefined) {
$('#' + $.cookie('show_menu')).click();
}
$('.nav > li > ul').each(function () {
//Hide the sub lists
$(this).hide();
//Get link with same ID as Class
var id = $(this).attr('id');
//When link is clicked
$('.' + id).click(function () {
//Get the sub list
var list = $('#' + $(this).attr('class'));
//Check if it's currently visible
if (list.is(':visible')) {
list.hide(); //Hide list
$.cookie('show_menu', ''); //Unset open menu
} else {
$('.nav > li > ul').hide(); //Hide all other lists
list.show(); //Show list
$.cookie('show_menu', list.attr('class')); //Set open menu
}
});
});
});

Categories

Resources