Carousel animation event issue - javascript

I have an issue with a carousel I have built. It has elements inside a container which are moved 'left' by the size of the visible container when the button with class moveCarouselRight is clicked.
My issue is that when the user clicks too fast, ie double click, the animation seems to fire twice, meaning the elements are not properly fitted in the container as if the first 'left' operation had not completed.
As you can see I tried to fix this with the 'disabled' flag but it seems the second click event is fired before the js from the first event has reached that line of code.
var disabled = false;
$('.moveCarouselRight').on('click', function() {
if (!disabled) {
disabled = true;
//change css property 'left' depending on container size
disabled = false;
}
});
Link to jsFiddle:
jsfiddle.net/6TPcT/5

Use this:
JS
$(".moveCarouselRight").dblclick(function(event){
event.preventDefault();
});
OR
$(".moveCarouselRight").dblclick(function(event){
return false;
});
OR
$(".moveCarouselRight").one("click", function(event) {
//do something
});
Link: http://api.jquery.com/one/

I fixed this by binding a click event to the selector on load:
$('.selector').click(moveLeft);
In the method I unbound the click event:
function moveLeft() {
$(this).unbind('click');
//css transition stuff
}
Then, I added a listener to the end of the css transitions:
$("selector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
$(this).siblings('.nextThree').click(moveThreeRight);
});
Works a charm :)
Thanks for the help on this

Related

menu hide and toggle strange behavior

$(function(){
$(".OpenTopMenu").click(function (e) {
$("#top_menu").slideToggle("fast");
e.stopPropagation();
});
$(document).click(function() {
$("#top_menu").hide();
});
$(document).on("touchend", function (event) {
if (!$(event.target).closest("#top_menu").length) {
$("#top_menu").hide();
}
});
});
Hi all, i ran into a strange problem with toggle and hide.
As you can see in my code. If i touch the menu button (.OpenTopMenu) the menu (#top_menu) toggle.
And here its the problem. If #top_menu is visible so when i touch on .OpenTopMenu, #top_menu will hide then toggle to visible again. So i can't really hide #top_menu on touching the menu button (.OpenTopMenu).
Can someone help me with this?
Thanks
Your touchend and click are basically doing the same thing. For mobile uses it's always good to know that a "click" can actually be seen as two events that rapidly follow each other, namely the "mousedown" and "mouseup" event, the last one triggering the "click". On mobile devices, the "click" is triggered at the same time as your "touchend". Now there's also an event called "touchstart" which is triggered when a user put's his / her finger on the glass.
You are right now wondering what all this has to do with your question. Well, it has to do with your document click..
Personally I would solve your problem in the following way;
var userClick = function(){
//you will need something that determines whether your user is
//using a mobile device or not.
return (Browser.isMobile)? "touchend" : "click";
};
var menu = {
isOnMenu:false,
isOnMenu_reset:null,
attachEvents:function(){
$('#top_menu').on('mouseenter',function(){
menu.isOnMenu = true;
}).on('mouseleave',function(){
menu.isOnMenu = false;
}).on('touchstart',function(){
clearTimeout(menu.isOnMenu_reset);
menu.isOnMenu = true;
}).on('touchend',function(){
menu.isOnMenu_reset = setTimeout(function(){
menu.isOnMenu = false;
},30);
});
$('.OpenTopMenu').on(userClick(),function(){
$("#top_menu").slideToggle("fast");
});
$(document).on(userClick(),function(){
if(!menu.isOnMenu){
$('#top_menu').slideToggle("fast");
}
});
},
init:function(){
menu.attachEvents();
}
};
$(function(){
menu.init();
});
Try to change your $(document).click() by somthing like $(".OpenTopMenu").blur(). This might not work with old browsers.
I only wanted click and touched for testing purpose.
But it only have to work with touchend. This is the working code that i finally use. Thanks.
$(document).ready(function(){
$(".OpenTopMenu").click(function(){
$("#top_menu").slideToggle("fast");
});
});
$(document).on("touchend", function(event){
var $trigger = $(".OpenTopMenu");
if($trigger !== event.target && !$trigger.has(event.target).length){
$("#top_menu").slideUp("fast");
}
});
I tried earlier with
!event.target.hasClass('OpenTopMenu') instead of $trigger !== event.target
in the if condition but it doesn't work. Can someone tell me why the upper code work and this one not?

jQuery, animate and animate back. Call back function error? :S

I have no idea what I've done. The idea is to animate an element to slide in from a position and slide back when another element has been click. I've applied the second event within the call back of the original event function.
But, despite this structure, the second event function will run although I've not clicked the second element in the callback function.
If you're not following, the basic idea is this.
Click -> slidein -> outside click -> slide out
$('#mobileList').click(function(){
$('#mobileMenu').css({'display':'block'}).animate({
'left':'30%'
},500,function(){
$('#body').click(function(){
$('#mobileMenu').animate({
'left':'100%'
},500,function(){$('#mobileMenu').css({'display':"none"});/* I tried return false; here, failed to solve problem*/});
});
});
});
Starting CSS
nav#mobileMenu{display:none;width:70%;height:100%;background:#191820;color:#DCDCDC;position:fixed;top:0;left:100%;}
How the elements are structured.
<div id="body">
<a id="mobileList>☰</a>
<!-- content here -->
</div>
<nav id="mobileMenu">
<!-- content -->
</nav>
On the first two attempts it works fine. The next time I come to run, it will animate and then immediately animated out. I really can't see why as it's a call back function? :S
I think it's because the element #mobileList is within the element #body.
Is the call back still running? Can I cease it looking for the event?
Should I use queue() to run the slide in and slide out?
You don't need the callback here, just hook the click handlers up separately:
$('#mobileList').click(function(){
$('#mobileMenu').show().stop(true).animate({
'left': '30%'
}, 500);
});
$('#body').click(function(){
$('#mobileMenu').stop(true).animate({
'left': '100%'
}, 500, function() {
$(this).hide();
});
});
Example fiddle
Note that I used show/hide instead of css and added calls to stop() to prevent the queue being filled up on successive clicks during animation.
UPDATE
To hide the menu when you click anywhere else you need to attach an event handler to the document and check e.target to see what element caused the event. If it was outside the menu, hide it.
$('#mobileList').click(function (e) {
e.stopPropagation();
$('#mobileMenu').show().stop(true).animate({ 'left': '30%' }, 500);
});
$(document).click(function (e) {
var $menu = $('#mobileMenu');
if (!$menu.is(e.target) && !$menu.has(e.target).length) {
$('#mobileMenu').stop(true).animate({ 'left': '100%' }, 500, function () {
$(this).hide();
});
}
});
Updated fiddle

Prevent HTML Scrolling When scrolling inside element, without hiding scrollbar

I want to prevent scrolling of the body or html when user is scrolling inside the menu. However, I DON'T WANT to set $('html').css('overflow','hidden'); because this makes the entire document shift right. I just want to disable the HTML scroll when scrolling or swiping inside the menu. I tried to search this topic a lot, but nothing I found really worked for me.
FIDDLE
Set this when the menu is open:
var thisHeight = $(window).scrollTop();
$(window).on('scroll', function() {
$('html,body').scrollTop(thisHeight);
});
$('.noScroll').on('touchstart' , function(e) { e.preventDefault(); })
$('.noScroll').on('touchmove' , function(e) { e.preventDefault(); })
And this when it closes:
$(window).off('scroll');
$('.noScroll').off('touchstart');
$('.noScroll').off('touchmove');
$('.noScroll').on('touchstart' , function(){ return true; });
$('.noScroll').on('touchmove' , function(){ return true; });
You need to add a class="noScroll" in the text div for it, check FIDDLE.
iOS solution based on:
How to unbind a listener that is calling event.preventDefault() (using jQuery)?
JSFIDDLE: http://jsfiddle.net/m2ga2ygo/4/.
Uploaded test: https://liebdich.biz/develop/iosMobile.html.

Detecting class on HTML element not working correctly

I have a button and when it is clicked it should add a class to the HTML element, but then when the .class is clicked, it isn't detected.
This is the use case:
Click button - "testerclass" will be added to HTML element
Click "testerclass" - removes that class from that element
The detection for when "testerclass" is clicked only seems to work when the class exists before the page load, not when I add the class manually after load. Is this something to do with the problem?
I have tried to recreate the problem on jsfiddle, but I can't recreate the use case where the class is already added to the HTML element, as I can't edit that on jsfiddle.
But here is jsfiddle one, In this one you can see that the buttonone adds a class to HTML, but the detection for clicks on .testerclass never come through.
And here is jsfiddle two. In this one, I have changed the .testerclass selector to html, and this shows that HTML clicks are bubbling through (which I was unsure of when I first hit this problem).
And offline I created a third testcase where the HTML element already had the testerclass, and it detected the clicks sent through to it.
$(document).ready(function() {
$('button.1').click(function() {
$('html').addClass('testerclass');
$('.test').append('"testerclass" added to html<br />');
});
$('.testerclass').click(function() {
$('.test').append('testerclass clicked and removed<br />');
$('html').removeClass('testerclass');
});
});
Edit: I also tried doing this with a slightly different method of:
$('html').click(function() {
if(this).hasClass('testerclass') {
//do stuff
}
});
but that didn’t work either.
Since the testerclass is dynamic, you need to use event delegation to handle events based on that. Which will require us to register the event handler to the document object that causes another problem because the click event from the button will get propagated to the document object which will trigger the testerclass click handler as well. To prevent this from happening you can stop the event propagation from the button.
$(document).ready(function () {
$('button.1').click(function (e) {
e.stopPropagation();
$('html').addClass('testerclass');
$('.test').append('"testerclass" added to html<br />');
});
$(document).on('click', '.testerclass', function () {
$('.test').append('testerclass clicked and removed<br />');
$('html').removeClass('testerclass');
});
});
Demo: Fiddle
You need to stop the propagation to the html so the other click handler does not pick it up.
$('button.1').on("click", function(evt) {
$('html').addClass('testerclass');
$('.test').append('"testerclass" added to html<br />');
evt.stopPropagation();
});
$(document).on("click", function() {
$('.test').append('testerclass clicked and removed<br />');
$('html').removeClass('testerclass');
});
Other option would be to add one event handler and use the event target to see if it is the button or not and change the content that way.
$(document).on("click", function (evt) {
var isButton = $(evt.target).is(".btn");
var message = isButton ? '<p>"testerclass" added to html</p>' : '<p>"testerclass" clicked and removed</p>'
$('html').toggleClass('testerclass', isButton);
$(".test").append(message);
});
JSFiddle: http://jsfiddle.net/69scv/
here's a neat way to do it
$('html').on('click', function(e) {
var state = !!$(e.target).closest('button.1').length;
var msg = state ? 'class added' : 'class removed';
$(this).toggleClass('testerclass', state);
$('.test').append(msg + '<br>');
});
FIDDLE
You add a class to html element, so when this class is clicked, it means the html element is click. Now the problem is when you click any where in page, it will remove this class away from html! Let try add this class to body element instead.
$(document).ready(function() {
$('button.1').click(function() {
$('body').addClass('testerclass');
$('.test').append('"testerclass" added to html<br />');
});
$('.testerclass').click(function() {
$('.test').append('testerclass clicked and removed<br />');
$('body').removeClass('testerclass');
});
});
And now you can check it:
$('html').click(function() {
if(this).hasClass('testerclass') {
//do stuff
}
});

jQuery blur event fireing multiple times with dynamic content edit

When I click on a div element of a certain class, I change contenteditable to true. onblur of that clicked div I want it to alert something. The first time that I blur the div, it works fine, but after that it shows the same alert twice. So the first time, it alerts once. The second time, it alerts twice, etc.
What am I doing wrong?
content = $('#content');
content.delegate('div', 'click', function(event){
$(this).attr('contenteditable', 'true');
$(this).focus();
$(this).bind('blur', function(){
alert('blur');
});
});
Example: http://jsfiddle.net/W8que/4/
You're binding the blur again on each click. Each bind is new and they are stacking. Use .delegate() (or .on())for the blur function also.
fiddle: http://jsfiddle.net/W8que/11/
code:
content = $('#content');
content.on('click', 'div', function(){
$this = $(this);
$this.attr('contenteditable', 'true');
$this.focus();
});
content.on('blur', 'div', function(){
alert('blur');
});
Since the fiddle was already using jQuery 1.7.x, I went ahead and swapped out .delegate() for the more up-to-date .on(). Slipped in a few other things like caching $(this) and didn't bother passing the event into the function since there's nothing we need to preventDefault() or stopPropagation() on.
for prevent call multiple blur you can use 'off' before 'on'
for example :
$inputs.off().on("blur", function() {
})

Categories