Jquery on('click').... Function Execute only once - javascript

So I got :
var current = $('.article.active');
$('div').on("click", function() {
if(current.next('.article').hasClass('hide')){
$(current).addClass('hide');
$(current).next('.article').removeClass('hide');
};
});
And Html:
<body>
<div class="app">
<div id="article0" class="article active"></div>
<div id="article1" class="article hide"></div>
<div id="article2" class="article hide"></div>
</div>
So when I click on the div the code works, but only once. I want to be executed multiple times for every div.
JSFIDDLE: http://jsfiddle.net/9xrpuru9/

You need to find the active element in the click handler, also the active class also have to be changed
$('div.app').on("click", function () {
var current = $('.article.active');
$(current).addClass('hide').removeClass('active');
if (current.next('.article').length) {
$(current).next('.article').removeClass('hide').addClass('active');
} else {
$('.article:first').removeClass('hide').addClass('active');
}
});
Demo: Fiddle

You are not setting the active class to the next article div.
You can try the following code.
$('.article').on("click", function () {
if ($(this).next('.article').hasClass('hide')) {
$(this).addClass('hide').removeClass('active');
$(this).next('.article').removeClass('hide').addClass('active');
};
});

Related

JS/jQuery - stop .on('click') from sending twice

I have a JS global event handler which looks like this (this is temp code):
$(document).on('click', '.my-class, #box-in-my-class', function(e) {
console.log($(this), 'was clicked!');
if ($(this).is('my-class')) {
$(this).children('.dropdown').toggleClass('active');
}
if ($(this).is('#box-in-my-class')) {
$('#expander').toggleClass('active');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-class">
<div class="other-bit"></div>
<div class="dropdown">
<div id="box-in-my-class"></div>
</div>
</div>
<div id="expander"></div>
(the .active class added makes the div bigger - through css).
However, in running this, when I click the #box-in-my-class, I get this in the console:
#box-in-my-class was clicked!
.my-class was clicked!
which toggles the dropdown (closing it).
How do I set it so that when you click the child of an element it does not bubble/propagate/etc. so that I can click the #box-in-my-class w/o running .my-class
Because your event bubbles. In the code you must call e.stopPropagation(); And also you have some missed ')'.
$(document).on('click', '.my-class, #box-in-my-class', function(e) {
e.stopPropagation();
console.log(e.target, 'was clicked!');
if ($(this).is('my-class')) {
$(this).children('.dropdown').toggleClass('active');
}
if ($(this).is('#box-in-my-class')) {
$('#expander').toggleClass('active');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-class">
<div class="other-bit"></div>
<div class="dropdown">
<div id="box-in-my-class">Test 1</div>
</div>
</div>
<div id="expander">Test 2</div>
For more see event bubbling
and e.stopPropagation()
try the following
$(document).on('click', '.my-class, #box-in-my-class', function(e) {
if ($(this).is('.my-class') && $(e.target).is(':not(#box-in-my-class')) {//check if the clicked element is not box-in-my-class
console.log($(this), 'was clicked!');
$(this).children('.dropdown').toggleClass('active');
}
if ($(this).is('#box-in-my-class')) {
$('#expander').toggleClass('active');
}
}
demo:http://jsfiddle.net/0yvuzm0c/
I think you shouldn't use 2 if class when you only need one response.
If I were you, I would write my JS function like this:
if ($(this).is('#box-in-my-class') {
$('#expander').toggleClass('active');
return;
}else if ($(this).is('my-class') {
$(this).children('.dropdown').toggleClass('active');
return;
}
I will check this $('#box-in-my-class') first due to the reason that $('#box-in-my-class') is the child of $(.'my-class').
In this case, if it detected $('#box-in-my-class') is clicked, it will stop the loop. instead of checking $(.'my-class') too.
You may study http://www.w3schools.com/js/js_if_else.asp to be more familiar with if, else, else if loop.

JQuery FadeIn and FadeOut with button issue

I am trying to create a button to show all content. I want a fadein on mouse enter, fadeout on mouseleave. when you click the button it disables the fade out, until clicked again and that re-enables it
Here is the Jsfiddle: https://jsfiddle.net/uv4bxdxs/16/
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
One possible solution would be to add a class to displayed elements on the button click event. The class purpose is to disable the fade-in-out functionality. When the button is clicked again that class is removed to re-enable fade-in-out effect.
var flag = true;
$('button').click( function() {
if (flag) {
$('#div1h1').fadeIn().addClass('shown');
flag = false;
}
else {
$('#div1h1').fadeOut().removeClass('shown');
flag = true;
}
});
See DEMO
Please use this code:
$(function() {
var showAllFlag = false;
var btnShowAll = $('#show-all');
$('body').on('mouseenter', 'div.info-box', function() {
showTitle($(this))
}).on('mouseleave', 'div.info-box', function() {
hideTitle($(this))
});
function showTitle(target) {
target.find('h1').stop().fadeIn();
}
function hideTitle(target) {
if (!showAllFlag) {
target.find('h1').stop().fadeOut();
}
}
function showAllTitles() {
$('.info-box h1').show();
showAllFlag = true;
}
btnShowAll.on('click', showAllTitles);
});
Or follow by this link: enter link description here
Change your function to this:
$(function() {
$('#div1').hover(function() {
$('#div1h1').fadeIn();
});
});
$(function() {
$('#div2').hover(function() {
$('#div2h2').fadeIn();
});
});
$(function() {
$('#div3').hover(function() {
$('#div3h3').fadeIn();
});
});
Assuming that you just want the H1 to fade in and for them to stay visible on hover, just have the following code:
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
The JSFiddle link you provided has an extra JavaScript section which is causing the H1 to fade out on hover.
Just don't trigger the fadein if its already visible?
$('#div1').not(":visible").hover(function() {
$('#div1h1').fadeIn();
},
edit - My bad i didn't see that comma :), gimme a second

OnClick event for div inside lots of container Divs

I have an app I'm developing and I need a onclick() event to be fired when a <div> is clicked.
So in other words,
<div id="panda"></div>
$("#panda").click(function () {
console.log("some text");
});
So this statement works but now lets say I have,
<div id="panda">
<lots of children>
<div id="koala">
</div>
</lots of children>
</div>
$("#koala").click(function () {
console.log("doesnt work");
});
Now you see for the life of me I can't get koala to be clickable. The click event on parents works fine, and click evens for some empty divs I use as buttons work fine, but for some reason I cant get I filled child <div> to be clickable.
Any ideas what the case could be?
I tried this,
$('#panda').click(function(e){
if ($(e.target).is('#koala'))
{
console.log("koala");
}
});
But it just logs every click on the parent.
One option is to listen to the div children for panda.
$("#panda").on('click','div',function() {
console.log($(this).text()+' '+$(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panda">
<div id="koala">
koala
</div>
<div id="bear">
bear
</div>
</div>
Try making the selector '#panda #koala' like this
$("#panda #koala").click(function () {
console.log("koala");
});
Here is an example,
<div id="panda">Panda
<div id="koala">Koala</div>
</div>
$("#panda").on('click', '#koala', function () {
alert("koala!!!");
});
Here is a Fiddle

Toggle visibility of three or more divs

I have a simple script that toggles the visability of two divs:
<script type='text/javascript'>
$(window).load(function(){
function toggle_contents() {
$('#page1').toggle();
$('#page2').toggle();
setTimeout(function(){
toggle_contents()
}, 25000)
}
toggle_contents();
});
</script>
<div id="container">
<div id="page1">This is page 1 contents.</div>
<div id="page2" style="display:none;">This is page 2 contents.</div>
</div>
It works great but I can not figure out how to add more divs to the mix.
http://jsfiddle.net/mxwv85px/1/
Any help is much appreciated...
To cycle through a set of divs you could use a class on the active div, and use next to move on each iteration. Something like this:
function toggle_contents() {
var $active = $('#container .active');
if ($active.length && $active.next().length) {
$active.hide().removeClass('active').next().show().addClass('active');
}
else {
$('.active').hide();
$('#container div:first').show().addClass('active');
}
setTimeout(toggle_contents, 3000)
}
toggle_contents();
Updated fiddle
.toggle() means the div's are toggled between hidden and displayed. I would suggest using .hide() and .show() instead, as this gives you more control about what content you want to display or not. However, the downside is you would need a code that has much more lines to it. Give me a second while I try to make such a thing for you.
Currently you can only have 2 divs, because the .toggle() function can only have 2 values, which means a third div will have the same value as another div, causing it to be either visible or hidden while another div is as well.
The code provided in this answer by #Rory McCrossan is already working, so I'll stop trying to program it myself:
https://stackoverflow.com/a/27447139/4274852
You could cycle through the selected elements and show only one each call
var page=0;
function toggle_contents() {
$('.page').hide();
var array = $('.page').toArray();
$(array[page]).show();
page=++page%array.length;
setTimeout(function(){toggle_contents()}, 3000)
}
toggle_contents();
http://jsfiddle.net/mxwv85px/9/
First of all, put timer out of toggle_contents function. Secondly, add to divs common class, cache them and operate with variable-cache
$(window).load(function(){
var divs = $('.some-class');
function toggle_contents() {
divs.toggle();
}
setTimeout(function(){
toggle_contents()
}, 25000)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-class">
</div>
<div class="some-class">
</div>
<div class="some-class">
</div>
You can do this
http://jsfiddle.net/mxwv85px/13/
The code
<div id="container">
<div id="page1">This is page 1 contents.</div>
<div id="page2" style="display:none;">This is page 2 contents.</div>
<div id="page3" style="display:none;">This is page 3 contents.</div>
<div id="page4" style="display:none;">This is page 4 contents.</div>
<div id="page5" style="display:none;">This is page 5 contents.</div>
function toggle_contents() {
var items = $('#container div');
for(var i= 0; i < items.length; i++)
{
if($(items[i]).is(":visible")) {
$(items[i]).hide();
i + 1 == items.length ? $(items[0]).show() : $(items[i+1]).show();
break;
}
}
setTimeout(function(){ toggle_contents() }, 500)
}
toggle_contents();
To add more divs, you can use .append, for example:
$('#container').append('<div id="page3">This is page 3 contents</div>');

Jquery - Adding event to specific div that shares class name with others

I'm looking to add a mouseup event to a series of divs, that when clicked, reveal a child div ('menu'). All the parent divs share the same class, for example:
<div class="container">
<div class="menu"><p>Text</p></div>
</div>
<div class="container">
<div class="menu"><p>Text</p></div>
</div>
etc...
However, I'd like the event to only trigger when I've clicked that particular 'container'. When I click on another 'container', I'd like the same thing to happen, however, I'd also like the previously opened 'menu' to hide. The only way I have managed to do this (being a JQuery noob), is to create variables for each container, as well as giving them unique classes. For example:
$(document).mouseup (function (e){
var buttonOne = $(".containerOne");
var buttonTwo = $(".containerTwo");
var menuOne = $(".containerOne").find(".menu");
var menuTwo = $(".containerTwo").find(".menu");
if(buttonOne.is(e.target)){
menuOne.toggle(100);
menuTwo.hide();
}
else if(buttonTwo.is(e.target)){
menuTwo.toggle(100);
menuOne.hide();
}
else {
$(".menu").hide();
}
});
Quick JSFiddle
This then creates lines and lines of code the more containers I add, and I feel there is almost certainly an easier way of doing this. Apologies if this was written poorly, it's been a long day, ha.
Add a new class to the containerxxx element then use a simple click handler
<div class="containerOne container">
<div class="menu">
<p>Text</p>
</div>
</div>
<div class="containerTwo container">
<div class="menu">
<p>Text</p>
</div>
</div>
then
var $menus = $('.container .menu');
$('.container').mouseup(function (e) {
var $menu = $(this).find('.menu').toggle();
$menus.not($menu).hide()
});
Demo: Fiddle
How about something like
$(".container").on("click", function() {
var mine = $(".menu", this).toggle(100);
$(".menu").not(mine).hide();
});

Categories

Resources