JQuery Weird Animation Looping - javascript

I wrote two javascripts to write my own modal system because the bootstrap one has so many issues. However when you click it the first time it will work correctly it will fade in, and when you click close it will fade out, but the next time you click show modal and then close modal it will animate 2 times on the fade in and 2 times on the fade out, then I click it a third time and the same thing will happen except it will animate 3 times. and so on. I supposed its how i wrapped my functions but im not quite sure. I'm still noob to javascript. No error is returned in console or debugger.
$(document).ready(function(){
$('#helppage').hide();
});
function displayHelp(){
$(document).click(function(){
$( "#helppage" ).fadeIn( "medium", function() {
});
});
}
function hideHelp(){
$(document).click(function(){
$( "#helppage" ).fadeOut( "medium", function() {
});
});
}
SPOKE TO SOON ..
function toggleHelp(){
$(document).click(function(){
if ($('#helppage').is(":visible")) {
$( "#helppage" ).fadeOut( "medium", function() {
});
} else {
$( "#helppage" ).fadeIn( "medium", function() {
});
}
});
}
The Real Working Code
**$(function toggleHelp() {
$(document).on('click', function() {
$('#helppage').fadeToggle('medium', function() {
});
});
});**

You are adding click events to the document each time the user clicks on the document. So each subsequent click and another instance to be triggered when the user clicks. So the firsat time its once, the second time it fires twice, etc.
I recommend putting the click on another element instead. Having said that, you could try something like this:
$(function() {
$(document).on('click', function() {
$('#helppage').fadeToggle('medium', function() {
// code here
});
});
});

Based on my comment above, without changing your code:
function toggleHelp(){
$(document).click(function(){
if ($('#helppage').is(":visible")) {
$( "#helppage" ).fadeOut( "medium", function() {
});
} else {
$( "#helppage" ).fadeIn( "medium", function() {
});
}
});
}

Related

Perform multiple clicks as long as user is hovering over an element in jQuery

I have the following jQuery. What it does is that once you hover over the next or previous arrows, it clicks on them, making the slider move. I need to modify this code, so it keeps clicking as long as you are hovering, right now, it only does it once.
$( "#slider .next, #slider .prev" ).hover(
function() {
$(this).click();
},
function() {}
);
The slider uses a jQuery plugin called Tiny Carousel
Thanks
This will trigger a click on the elements every second:
var clr;
$(".next, .prev").hover(function (e) {
clr = setInterval(function () {
$(e.target).click();
}, 1000)
}, function () {
clearInterval(clr);
});
jsFiddle example
var handle=null;
$( "#slider .next, #slider .prev" ).hover(
function() {
var self=$(this);
if(handle!=null)
clearInterval(handle);
handle = setInterval(function(){
$(this).click();
},100);
},
function() {}
);

Drop Down text won't come back up and won't recognize other instances

I used OnClick drop down text with JavaScript and HTML code to make the dropdown hidden div project.
But the problems are:
1 - It won't open divs separatelly, all of the "projects" are open at once;
2 - I won't come back up once I click it again.
I made another line of code to make it go up:
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
$(function() {
$(".project2").on('click', function() {
$(this).parent().find('.details').slideDown();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideUp();
});
});
And so on... and it goes up as soon as I click it only once, like an animation. It won't stay down and THEN on the next click it goes back up. AND it still gets both down instead of each one separately.
You shouldn't use document.ready to often if isn't needed.
// Shorthand for $( document ).ready()
$(function() {
});
If you bind two events to an element, .. it will be executed if you don't stopPropergation or making "cases".
So you can check the visibility and decide what to do:
$( function () {
$("[class^='project']").on( 'click', function () {
var $details = $( this ).parent().find( '.details' );
if ($details.is(':visible'))
$( this ).parent().find( '.details' ).slideUp();
else
$( this ).parent().find( '.details' ).slideDown();
});
} );
https://jsfiddle.net/3738Lnmf/
edit:
slideToggle is more elegant :) #Diego López
$( function () {
$("[class^='project']").on( 'click', function () {
$(this).parent().find('.details').slideToggle();
});
} );
https://jsfiddle.net/3738Lnmf/1/
Use .slideToggle() if you want to toggle between show and hide the div elements
$(function() {
$(".project").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
$(".project2").on('click', function() {
$(this).parent().find('.details').slideToggle();
});
});

How to disable functionality that takes place after a click event using jQuery

I have a button on my page which, when clicked, listens for another button being clicked and then performs an AJAX call. For example:
$( 'button#a' ).click( function() {
$( 'button#b' ).click( function() {
// Perform an AJAX call here.
});
});
Here is a demo of my code so far:
DEMO
I want to disable the ajax call functionality if a third button button#c is clicked at any time during the time that the page is loaded. I'm at a loss at how this can be done. Hoping someone can suggest an approach.
Should not code click event inside click, but after modifying in your code.
var third_click= false;
$(document).ready(function() {
$( 'button#c' ).click( function() {
third_click = true;
})
$( 'button#a' ).click( function() {
$( 'button#b' ).click( function() {
if( !third_click ) {
// Perform an AJAX call here.
alert( 'ajax call in progress' );
} else {
alert( 'Can\'t call ajax' );
}
});
});
})
here is demo.
What if you used button a to hide button b until a is clicked and then show button b and so fourth until your results are displayed as you with.
example:
$('.btnB').hide();
$('.btnA').on('click', function() {
$('.btnB').toggle();
});
Unless it needs to all display at one time this method wouldn't be able to work in that type of situation
You can just remove the click events from #a and b# when clicking on #c with:
$('#c').click(function () {
$('#a,#b').off('click')
})
jsFiddle example

Css function doesn't work

I am writing this code, first toggle function is working but second toggle isn't. Why is that?
<script type="text/javascript">
$(document).ready(function(){
$( ".navicon" ).click(function() {
$( "#menu" ).slideToggle( "medium", function() {
// Animation complete.
});
});
});
$(document).ready(function(){
$('.navicon').toggle(function () {
$("body").css({"overflow": "hidden !important"});
$("#mobile_menu").css({"width": "100% !important"});
});
});
</script>
The toggle() method was deprecated, you need to use an alternative, such as a flag to depict the 'toggled' state.
A loose example:
$('.myclass').click(function() {
if ($(this).hasClass('toggle')) {
doThis;
$(this).removeClass('toggle');
} else {
doThis;
$(this).addClass('toggle');
}
});
And encase all of your functions with $(document).ready() rather than doing it for each individual one.

JQuery.hover() not working when hovering over tile

I'm trying to add some functionality when hovering over a 2048 tile. Each tile of value n has a class 'tile-n'.
For the basic 'tile-2' tile, I have the hover functionality:
<script>
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
</script>
But nothing is happening and I don't believe the hover is being registered and I'm not sure why.
My implementation can be seen at: http://kpscript.github.io/PCN-Embark-2048/
The 'tile-2' div can be seen at: html.body.container.game-container.tile-container.tile-2.
Of course, I plan to do more non-trivial things with hover, but for now I can't even get the alert to show.
Try like this, It works for me...
$("body").on('mouseenter', '.tile-2', function () {
alert("in!");
}).on('mouseleave', '.tile-2', function () {
alert("out!");
});
I think you load html using ajax, this should work
<script>
$( "body" ).on('hover','.tile-2',
function(){
alert("in!");
}, function() {
alert("out!");
}
);
;)
You are trying to bind the event to the element before the element is rendered on the page. Wait until its loaded.
$(document).ready({
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
});

Categories

Resources