I need to trigger an action only once when user moves the mouse slightly and it doesn't matter on what part of the page. If the mouse doesn't move, action shouldn't be triggered. When mouse moves (could be 3 minutes after the page is completely loaded), then the action should take place only once.
This is what I have right now:
$(document).one('mousemove', function() {
$('.front #main .block-content').animate({opacity : 0.3}, 200);
});
The problem is immediately after the page is completely loaded, the animation will be triggered, no matter what I do with the mouse (stopped or moving).
I hope I was clear enough, but I can try to clarify further if this isn't enough. Is there a solution for this I am trying to achieve?
Thank you.
use
$(document).mousemove(function(){
$('.front #main .block-content').animate({opacity : 0.3}, 200);
})
instead
Related
I am developing a web application:
http://filebox.vt.edu/users/sharni/Radio/spectrum.html
Clicking on the help button pops up a resizeable help window. However, if the cursor moves outside of the dialog when resizing, the dialog stops resizing! Does anyone know how to prevent this from happening? Still, it is possible to resize the window by moving the cursor very slowly.
Thanks in advance!
Hey i got short solution for you:
Step 1: Create layer that will appears when user works with UI. That layer will cover canvas.
var coverLayer = $('<div>').appendTo("body").css({ "width" : "100%", "height" : "100%", "z-index" : "2", "background-color" : "rgba(124, 124, 124, 0.5)", "position" : "absolute" }).hide();
Step 2: Make layer visible only when user works with UI.
$(".ui-dialog").on( "resizestart dragstart" , function( event, ui ) {
coverLayer.show();
// here you can add some code that will pause webgl while user works with ui, so resizing and moving will be faster and smoother
});
$(".ui-dialog").on( "resizestop dragstop" , function( event, ui ) {
coverLayer.hide();
// here you unpause webgl
});
Step 3 (optional): Pause webgl while user works with UI. Couse if he does, he isn't probably interested in canvas, so you can make other stuff happening faster and smoother...
PS: You had same problem with dragging dialog, so I fixed this too simply with adding dragstart/dragstop. You can also add more events there.
EDIT:
Why that problem happen?
I guess its because of resize event. It is happening in some short periods and is responsible for element redraw (setting new width and height). I also think that it can detect if another event is triggered, then resize is not triggered anymore.
Now, because you are using webgl that eats a lot of javascript calculation power, then short periods for resize event are not short anymore. Since then, element is not redrawed that often as you want and mouse will appear futher from element which probably trigger some event that cause stop calling resize.
If you stop webgl, calling period will be short again, so it could prevent that problem, but I'm not very sure about that...
I have a #pagination on my site which is by default set to display:none
When moving the mouse on my entire document I want to fade them in and fade them out after a certain time once the mousemovement stopped. I have absolutely no clue what's the best way to do this. Any ideas on that?
$(document).ready(function(){
$(document).on('mousemove', 'body', function() {
$('#pagination').fadeIn('fast');
//once the mousemovement stopped I want a 3sec counter till it fades out agian
});
});
Once the mousemovement stopped I'd like to have a short delay in it before the `#pagination' fades out again.
Assuming you'd want to make sure the user stops moving their mouse before fading our your #pagination, you'd need to set a simple timer:
$(document).ready(function(){
var c, p = $('#pagination');
$(document).on('mousemove',function() {
p.fadeIn('medium');
clearTimeout(c);
c= setTimeout(function(){
p.fadeOut('medium');
}, 600);
});
});
Whenever the user stops moving their mouse, the #pagination fades out. When they start moving it again, #pagination fades in. You could easily modify it if you don't want it to fade back in.
See the live example at: http://jsfiddle.net/akVkT/2/
$(document).ready(function(){
$(document).on('mouseout', '#pagination', function() {
$(this).delay(5000).fadeOut('fast');
});
});
This is for 5 sec. after 5 sec it will fadeout
I'm making a navigation bar that remains at the top of the page. When the user scrolls down, this bar will shrink, and when the user goes back to the top of the page, the navbar returns to its original dimensions.
Problem: When the user scroll down, the navbar shrinks as expected. However if the user scrolls back to the top of the page quickly, the navbar remains shrunken, and the animate() function within the scrollTop() callback function triggers after a few seconds.
To debug this, I included console.log($(window).scrollTop()); to tell me the current position of the user on the page. I get the console.log output as quick as the user scrolls. But {console.log('animated'); which is supposed to fire when the animation is completed, does not appear till a few seconds later after console.log($(window).scrollTop()); outputs 0.
How can I get animate() to respond quickly when the user scrolls up?
JS Code
var navBar = $('#navbar-inner');
var top = navBar.css('top');
$(window).scroll(function() {
console.log($(window).scrollTop());
if($(this).scrollTop() > 50) {
navBar.animate({'marginTop':'-20', 'height':'60'}, 300);
} else {
navBar.animate({'marginTop':'0', 'height':'80'}, 300, function()
{console.log('animated');});
}
});
(Posting my comment as an answer)
Use .stop() to stop any ongoing animations before starting a new one.
I experienced this kind of issues before with animations that last longer than the user action. You just need to stop the animation, something like
navBar.stop(true, true).animate(...);
To understand stop() better here is the link http://api.jquery.com/stop/. Hope it helps
What would be the best way to have a single image which when you hovered your mouse over it, it would cycle fade in/out into a series of other images (like 3 or 4) before returning back to the original? Also, it would stop fading/changing images and go back to the original image if you moved your mouse off of the image.
Any help is appreciated.
Thanks!
I would see about having the mouseover event (or hover if you are using an external library) of the object that you are wishing to switch tied to a window.setTimeout function. Make sure to store the timeout id so that you can cancel it if the user's mouse exits the window. The window.setTimeout would then scroll through the pictures.
Maybe something like this:
$(function(){
$("#test").hover(function(e) {
$.data("timeout", window.setTimeout(function() {
//Transition here
}));
}), function(e) {
window.clearTimeout($.data("timeout"));
//Put image back to normal
});
});
Hope this helps,
JMax
I am trying to make a div slide down when the mouse moves over another div just above it. Basically the div above it is just the trigger that makes the div slide down. Mouseover of .trigger makes .slidedown expand, and mouseout of .slidedown makes itself slide back up. Here's the code i have so far:
$(document).ready(function() {
$('.slidedown').hide();
//When mouse rolls over
$('.trigger').mouseover(function(){
$('.slidedown').stop().animate({
height: ['toggle', 'swing'],
}, 600, function() {
// Animation complete.
});
});
//When mouse is removed
$('.slidedown').mouseout(function(){
$('.slidedown').stop().animate({
height:'0px'
}, 600, function() {
// Animation complete.
});
});
});
This works, but there are just two teaks i need help with. Firstly, after mouseout and the .slidedown div slides up and disappears, if i then mouse over the .trigger div again, nothing happens. It should make the .slidedown move down again. I need it to every time keep working. I tried removing the .stop() but it still doesn't work.
Also can i make it also slide back up if the mouse moves out of .trigger but only if it isn't moving out of .trigger into .slidedown? This is so incase the user doesn't move the mouse into .slidedown, it would remain forever which isn't good. Or just have a time limit that it can remain expanded if the mouse doesn't move over .slidedown.
Second, is there a way to make a delay of around 1 second between mouseout and the div sliding back up? Thanks for your help!
You might try using the jQuery hover event. For the delay, you can put the closing animation in setTimeout:
$(document).ready( function(){
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
You might also look into the hoverIntent plug-in for more nuanced control over the mouseenter/mouseleave behavior, including timing.
I think you'll find that setting a numerical height in $('.trigger').mouseover() may help the animation be repeatable. FYI, you can set an integer number for something like height or width in jQuery and it will automatically set the unit to px for you.
As Ken pointed out, setTimeout is useful for a delay in code, but keep it in your $('.slidedown').mouseout() event or the slideown div will hide after you mouseout of the trigger div instead of when you leave the slidedown div as you specified.