I have an animation using bodymovin that triggers when I mouseenter it and I'm trying to make it so that if I mouseover it again before the animation ends, it doesn't restart.
squareAnim.addEventListener('mouseenter', function(){
anim.removeEventListener('loopComplete', loopHandler);
anim.goToAndStop(1);
anim.play();
if(anim.play == true){
anim.mouseenter == false;
} else {
anim.mouseenter == true;
}
});
Am I getting the syntax wrong or is there a flaw in my logic?
Just check if the animation is playing before you call goToAndStop() and play():
squareAnim.addEventListener('mouseenter', function(){
anim.removeEventListener('loopComplete', loopHandler);
if(anim.play !== true){
anim.goToAndStop(1);
anim.play();
}
});
Related
I have a navigation with mouseover and mouseout animations. They work. I also have a statement for the click listener that adds a CSS class. The class sets the height of a div, the issue is that the mouseout also alters this div. So I'm trying to figure out a way to disable the mouseout listener when the link is clicked.
I tried to unbind it with no luck
js
var currentDiv;
function slideMenu(e) {
if(e.type === "mouseover"){
// console.log("mouseover");
TweenMax.to($(this).find('div') , 0.25, {height:20});
}
else if(e.type === "mouseout"){
// console.log("mouseout");
TweenMax.to($(this).find('div') , 0.25, {height:1});
}
else if(e.type === "click"){
console.log("click");
if (currentDiv !== undefined){
$(currentDiv).removeClass("selected");
}
currentDiv = $(this).find('div');
$(currentDiv).addClass("selected");
$(currentDiv).unbind('mouseout'); // not working
}
}
$(".menu a").click(slideMenu);
$(".menu a").mouseover(slideMenu);
$(".menu a").mouseout(slideMenu);
css
.selected{
height: 20px;
}
Would this accomplish your goal? Instead of worrying about the binding of click events, you could just check the "selected" class before you do anything else within that click event. Like the following...
var currentDiv;
function slideMenu(e) {
if(e.type === "mouseover"){
// console.log("mouseover");
var child_div = $(this).find("div")
if (!$(child_div).hasClass("selected")) {
TweenMax.to($(this).find('div') , 0.25, {height:20});
} else {
$(child_div).attr("style", "") // remove inline styles attr, so that height is based on css instead of JS
}
}
else if(e.type === "mouseout"){
// console.log("mouseout");
var child_div = $(this).find("div")
if (!$(child_div).hasClass("selected")) { // check to see if selected/clicked on
TweenMax.to($(this).find('div') , 0.25, {height:1})
} else {
$(child_div).attr("style", "") // remove inline styles attr, so that height is based on css instead of JS
}
}
else if(e.type === "click"){
console.log("click", this);
if (currentDiv !== undefined){
$(currentDiv).removeClass("selected");
}
currentDiv = $(this).find('div');
$(currentDiv).addClass("selected");
}
}
$(".menu a").click(slideMenu);
$(".menu a").mouseover(slideMenu);
$(".menu a").mouseout(slideMenu);
If I'm understanding you correctly, you want the height of the element to remain the same size when you click on it and move the mouse off the element. You can try using
var currentDiv;
// add a state
var hasBeenClicked = false;
function slideMenu(e) {
if(e.type === "mouseover"){
TweenMax.to($(this).find('div') , 0.25, {height:20});
}
else if(e.type === "mouseout"){
// only resize if the element hasn't been clicked
if (!hasBeenClicked) {
TweenMax.to($(this).find('div') , 0.25, {height:1});
}
}
else if(e.type === "click"){
// assuming all this stuff is what you want and wasn't testing code
if (currentDiv !== undefined){
$(currentDiv).removeClass("selected");
}
currentDiv = $(this).find('div');
$(currentDiv).addClass("selected");
// set state to true
hasBeenClicked = true;
}
}
Note that this will only work for one element, if you plan to use this function for multiple elements you'll need to have a var hasBeenClicked set up for every element.
I'm trying to detect a shift click with javascript but for some reason it only works on IE
.click(function (e) {
if (e.shiftKey) {
Rain();
}
});
this is the code that work for me in IE, how can I detect it on Chrome
I don't think there is a defined combo, but you could make it yourself. A (crude) example:
<div id="someElement">
Click me for an alert!
</div>
<script>
var shiftPressed = false;
$(document).keydown(function(event) {
shiftPressed = event.keyCode==16;
});
$(document).keyup(function(event) {
if( event.keyCode==16 ){ shiftPressed = false; }
});
$('#someElement').on('click', function(e){
if( shiftPressed ){
alert("Shift and click!");
}
else{ alert("Nope"); }
});
</script>
You could improve it by only binding the .keyup() when the keydown is a shift in order to minimize the number of events. You should add as little logic as possible outside the if statements, as this event gets fired a lot
I have a button that plays and stops a video. How can I toggle between the .play() and .pause() efficiently?
<button id="thebutton" onclick="BV.getPlayer().play();"></button>
First off, I would suggest not using inline event handlers. If you're using jQuery, then I suggest you use that.
After each click, set a variable to tell whether it's playing or not, then trigger the correct action.
$(function(){
$('#thebutton').click(function(){
var isPlaying = $(this).data('isplaying');
if(isPlaying){
BV.getPlayer().pause();
}
else{
BV.getPlayer().play();
}
$(this).data('isplaying', !isPlaying);
});
});
jQuery used to have a .toggle() "event", but it was removed.
Add a class that acts as check for the player status. And then use this code.
$("#theButton").click(function() {
if($(this).hasClass('playing')) {
BV.getPlayer().pause();
} else {
BV.getPlayer().play();
}
$(this).toggleClass('playing')
})
$('#thebutton').click(function() {
if ($(this).val() == "play") {
$(this).val("pause");
play_int();
}
else {
$(this).val("play");
play_pause();
}
});
or
$(function(){
$('#play').click(function() {
// if the play button value is 'play', call the play function
// otherwise call the pause function
$(this).val() == "play" ? play_int() : play_pause();
});
});
function play_int() {
$('#play').val("pause");
// do play
}
function play_pause() {
$('#play').val("play");
// do pause
}
aka
jquery toggle button value
var isPlaying = false;
var player = BV.getPlayer();
$("#thebutton").click(function() {
if (isPlaying) {
player.pause();
isPlaying = false;
} else {
player.play();
isPlaying = true;
}
});
Sorry for the misleading title its hard to explain!
Basically I have a function that when you click left/right a div moves X pixels either way.
// Upcoming events slide
$('.nextEvent').click(function(e){
e.preventDefault();
if($('.newsColWrap').offset().left == '597.5'){
} else {
$('.newsColWrap').stop(true,true).animate({'left' : "-=435px"},500)
}
});
$('.prevEvent').click(function(e){
e.preventDefault();
if($('.newsColWrap').offset().left == '1032.5'){
} else {
$('.newsColWrap').stop(true,true).animate({'left' : "+=435px"},500);
}
});
The function works fine, but if the animations is happening and you click again, because the if statement doesn't return my div moves too far, does this make sense?
You can check if the element is being animated using :animated before animating it again.
$('.nextEvent').click(function(e){
e.preventDefault();
if($(this).is(':animated')) return; // check if currently being animated
// ... animate
});
$('.prevEvent').click(function(e){
e.preventDefault();
if($(this).is(':animated')) return; // check if currently being animated
// ... animate
});
The problem could be that you are reading the offset before the previous animation is completed so try
$('.nextEvent').click(function (e) {
e.preventDefault();
var $newsColWrap = $('.newsColWrap').stop(true, true);
if ($newsColWrap.offset().left == '597.5') {
} else {
$newsColWrap.animate({
'left': "-=435px"
}, 500)
}
});
$('.prevEvent').click(function (e) {
e.preventDefault();
var $newsColWrap = $('.newsColWrap').stop(true, true);
if ($newsColWrap.offset().left == '1032.5') {
} else {
$newsColWrap.stop(true, true).animate({
'left': "+=435px"
}, 500);
}
});
You could use a simple setTimeout function running for 500.
I am trying to implement one event for a short press and a different for a long press. The short press is just doing the default action. The long press works, but also does the default action still. What am I missing?
HTML
<"Label for my Link"
Javascript
$(document).ready(function(){
$('.recordlongpress').each(function() {
var timeout, longtouch;
$(this).mousedown(function() {
timeout = setTimeout(function() {
longtouch = true;
}, 1000);
}).mouseup(function(e) {
if (longtouch) {
e.preventDefault();
$('#popupPanel').popup("open");
return false;
} else {
return;
}
longtouch = false;
clearTimeout(timeout);
});
});
});
I followed the jQuery documentation and was under the impress "preventDefault" should stop the short press default action. Any examples I have found online do not seem to be exactly my situation. I appreciate you taking the time to read this. Thank you for any input.
You're returning from your "mouseup" handler before clearing the timeout and setting "longtouch" to false.
Try:
}).mouseup(function(e) {
var returnval;
if (longtouch) {
e.preventDefault();
$('#popupPanel').popup("open");
returnval = false;
}
longtouch = false;
clearTimeout(timeout);
return returnVal;
});
I'd also clear "longtouch" in the "mousedown" handler. That said, I wouldn't do this with mouse events. I'd use "touchstart" and "touchend". On touch screen devices, "mouse" events are simulated from touch events, and there's a distinct delay involved. (You may also want to detect whether the finger moved during the touch period.)
jsFiddle Demo
In your code these lines are unreachable
longtouch = false;
clearTimeout(timeout);
JS:
$('.recordlongpress').each(function () {
var timeout, longtouch = false;
$(this).mousedown(function () {
timeout = setTimeout(function () {
longtouch = true;
}, 1000);
e.preventDefault();
}).mouseup(function (e) {
clearTimeout(timeout);
if (longtouch == true) {
longtouch = false;
$('body').append("long press" + longtouch);
return false;
} else {
return;
}
});
});
#Pointy lead me towards a working solution for clicking events.
$(document).ready(function(){
$('.recordlongpress').bind('tap', function(event) {
return;
});
$('.recordlongpress').bind('taphold', function(event) {
$('#popupPanel').popup("open");
});
});
Something still needs to be added because upon a long press on my mobile device, the default options screen with the four options; open, save link, copy link URL and select text still pops up as well. I will add on the fix for that once I find it.