How to apply event of mousemove, so we can get effect like vlc player has for seekbar, or Youtube has for VideoTitle.
i.e : On mouse movement show title, if mouse not moved then hide title
Why need : I am developing website something like video library, there is one seekbar which I want to disable when mouse is not moved till someminute, and if mouse move then make it visible.
What I Did :
document.body.onmousedown = function() {
$(".myPrivateSeek").hide();
};
document.body.onmouseup = function() {
$(".myPrivateSeek").show();
};
althought its wroking,Unfortunately its not so much helpfull,
You can make use of mousemove event.
Below is a working code for that , you can play with it here in JSfiddle and modify as you want.
HTML
<div id="item">
<p>This is my item</p>
<div class="tooltip">Tooltip</div>
</div>
CSS
#item {
position: relative;
background: #CCC;
}
#item .tooltip {
position: fixed;
width: 80px;
height: 30px;
background: #06F;
z-index: 10;
display: none;
}
jQuery
$(document).ready(function() {
$("#item").on('mousemove', function(e) {
$('.tooltip').css('left', e.pageX + 10).css('top', e.pageY + 10).css('display', 'block');
});
$("#item").mouseout(function() {
$('.tooltip').css('display', 'none');
});
});
If you would like it so that on mouse movement your element appears then after a specified time of no movement it automatically disappears you could implement the following:
$(document).ready(function () {
var timeoutId;
//Replace document.body with the element you wish the mouse movement to be recognised within.
$(document.body).on('mousemove', function () {
//Checks if an existing timeout function exists, if so remove it.
if (timeoutId) {
clearTimeout(timeoutId);
}
$(".myPrivateSeek").show();
//Set a callback for how long to wait after the mouse has stopped moving to hide your element.
timeoutId = setTimeout(function () {
$(".myPrivateSeek").hide();
}, 1000); //The time in milliseconds to wait.
});
});
Related
In a website I'm building, I have a button with a :hover animation, and when you click the button a lot of things on the page including the button move around. My problem is that even after the button moves out from under the mouse, it doesn't update and lose its :hover effect until you move the mouse again.
Here's an example - here once you click the button it stays light blue (the hovered colour) until you move the mouse again.
function clicked() {
if (document.getElementById('mydiv').style.transform == 'translateY(70px)') {
document.getElementById('mydiv').style.transform = 'translateY(0px)';
} else {
document.getElementById('mydiv').style.transform = 'translateY(70px)';
}
};
div {
background-color: #fedcba;
padding: 20px;
display: inline-block;
}
div:hover {
background-color: #abcdef;
}
<div id="mydiv" onclick="clicked();">Click me</div>
How do I make the element update without the user needing to move the mouse again? JQuery is ok.
I think with your current CSS approach you won't be able to handle that. Try another JavaScript approach:
const el = document.getElementById('mydiv');
el.addEventListener('click', () => {
if(el.style.transform == 'translateY(50px)') {
el.style.transform = 'translateY(0px)';
} else {
el.style.transform = 'translateY(50px)';
}
el.style.background = "#fedcba";
});
el.addEventListener('mouseover', () => {
el.style.background = "#abcdef";
});
el.addEventListener('mouseout', () => {
el.style.background = "#fedcba";
});
div {
background: #fedcba;
padding: 20px;
display: inline-block;
}
<div id="mydiv">Click me</div>
If you extract the "hover" into the JS code then you can update the state of the element without the user having to move the mouse.
I'm trying to accomplish a "reveal" effect where I show items from a grid when hovering them.
Everything's OK here but once revealed I want to make them disappear again after X seconds – so it's not that when you move the mouse from the item they disappear inmediately.
That's what I tried so far but the items are not going back to their "unrevealed" state after I leave the mouse from the item.
var timeout;
$(".home-box").hover(function () {
clearTimeout(timeout);
$(this).css("opacity", 1);
}, function () {
timeout = setTimeout(function(){
$(this).css("opacity", 0);
},500);
});
Does anyone have any idea about how to solve it?
Thanks in advance.
You should use mouseenter and mouseleave events and add separate functionalities in each.
The reference to this might be lost in the callback function passed to setTimeout.
$(".home-box").mouseenter(function() {
clearTimeout(timeout);
$(this).css("opacity", 1);
});
$(".home-box").mouseleave(function() {
var $element = $(this)
timeout = setTimeout(function(){
$element.css("opacity", 0);
},500);
});
Was it necessary? I used the event mouseover instead of the hover, as the hover will always fire when the mouse moves, even if you try to move the cursor away from the object.
$(".home-box").mouseover(function () {
$('img').css("opacity", 1);
setTimeout(function(){
$('img').css("opacity", 0);
}, 2000);
});
.home-box {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid green;
position: relative;
}
img {
opacity: 0;
position: absolute;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="home-box">
hover me pls and wait...
<img src="https://im0-tub-ru.yandex.net/i?id=1a59e5c138260403e2230f0d2b264513&n=13">
</div>
The issue is that this has a different meaning within the setTimeout - you can store the box (this) and reuse it.
var timeout;
$(".home-box").hover(function() {
clearTimeout(timeout);
$(this).css("opacity", 1);
}, function() {
var box = this;
timeout = setTimeout(function() {
$(box).css("opacity", 0);
}, 500);
});
I have an animation triggered by a scroll event, which makes a menu slide out of view. There is also a button that when clicked brings the menu back into view.
Because the menu can be closed by scrolling, when the user clicks the button to bring the menu in, if they scroll during this period of the animation, the menu disappears again without the animation completing.
I have put together a simplified version of the animation here http://codepen.io/emilychews/pen/evbzMQ
I need to temporarily prevent the scroll function working after the button is clicked, which I'm assuming would be best done with the setTimeout() method on the click function? I've tried a number of things but can't seem to solve it/ get it to work.
Any help would be awesome. For quick reference as well the code is below
JQUERY
jQuery(document).ready(function($){
// slide menu to left on scroll
function hideOnScroll() {
$(window).scroll(function() {
if ( $(document).scrollTop() > 1) {
$('.menubox').css('left', '-25%');
}
});
}
hideOnScroll(); // call hideOnScroll function
// click handler to bring menu back in
$('.mybutton').on('click', function() {
$('.menubox').css('left', '0%');
var scrollPause = setTimeout(hideOnScroll, 2000) // temporarily pause hideOnScroll function
});
}); //end of jQuery
CSS
body {
margin: 0;
padding: 0;
height: 200vh;}
.menubox {
top: 100;
position: fixed;
width: 20%;
height: 100%;
background: red;
padding: 10px;
color: white;
transition: all 2s;
}
.mybutton {
position: fixed;
left: 40%;
top: 50px;
padding: 5px 10px;
}
HTML
<div class="menubox">Menu Box</div>
<button class="mybutton">Click to bring back menu</button>
** Also please note I've simplified the animation for the sake of the forum, the actual animation function contains Greensock code, but I didn't want to include this in case it confused the issue. I can't therefore just use the .addClass() and .removeClass() or have a workaround that changes the given CSS or scrollTop() values. I need to disable the hideOnScroll() function when the button is clicked for the duration of the click invoked animation - which in the examples is 2s. Thus I think the only way to achieve this is with the setTimeOut() method (i may be wrong on this). But I can't get it to work.
Many thanks
Emily
you can simply check the offset is complete.
function hideOnScroll() {
$(window).scroll(function() {
if ( $(document).scrollTop() > 1) {
if( $('.menubox').offset().left == 0 ){
$('.menubox').css('left', '-25%');
}
});
}
http://codepen.io/anon/pen/aJXGbr
I have made a few changes in your javascript. Have a look
var animating = false;
$(document).ready(function(){
function hideOnScroll() {
$(window).scroll(function() {
event.preventDefault();
if ( $(document).scrollTop() > 1 && !animating){
console.log("Hiding")
animating = true;
$('.menubox').animate({'left': '-25%'},2000,function(){
animating = false;
});
}
});
}
hideOnScroll();
$('.mybutton').click(function() {
var pos = $(window).scrollTop();
animating = true;
$('.menubox').animate({'left':'0%'},2000,function(){
console.log("Finished Opening");
animating = false;
});
console.log("Animating Open");
var siId = setInterval(function(){
if(animating){
console.log("Preventing Window Scrolling.");
$(window).scrollTop(pos);
}
else{
console.log("Stopping setInterval");
animating = false;
clearInterval(siId);
}
},0);
});
});
This will stop your browser window from scrolling until your Menu Open Animation is finished.
Also I have removed the transitionproperty from style.
Tested in Google Chrome.
Kindly inform me if i have misinterpreted your question.
I managed to hide and show my classes when the user moves his mouse over the specific element. But what I would actually like is that these show when the user moves his mouse anywhere on the screen, not just the selected div's.
This is my current code:
$(window).on('mousemove', function () {
$('.barhide').addClass('show');
try {
clearTimeout(timer);
} catch (e) {}
timer = setTimeout(function () {
$('.barhide').removeClass('show');
}, 1000);
});
And my css:
.barhide {
background: #333;
color: #fff;
display: block;
opacity: 0;
transition: all 1.5s ease;
}
.barhide.show {
opacity: 1;
display: none;
}
So what I would like is that after 3 seconds, the classes with .barhide get hidden and if the user moves his mouse anywhere in screen, they show up again, instead of just when they move over the element.
Also I was wondering if it's not a lot easier to do these things with React?
I have restructured the code a bit and added some comments explaining what's happening and when. Also, lose the try since attempting to clear a timer will never throw an exception.
Keep in mind that mouseover type events are an issue on mobile devices. These two articles may help in that regard:
JQuery's Virtual Mouse Events
Simulated Mouse Events using JQuery
$(function(){
// When page loads, wait 3 seconds and hide all elements with .barhide class:
setTimeout(toggle, 3000);
});
var timer = null;
// General function for adding/removing the "hide" class.
// This is used when the page first loads and each time
// the mouse moves on the page. We're not calling toggle()
// here because a flicker effect can happen which would leave
// the elements showing instead of being hidden.
function toggle(){
$('.barhide').toggleClass('hide');
}
$(window).on('mousemove', function(){
// When anywhere on page is moused over bring back .barhide
// elements for 3 seconds. Removing "hide" simply restores
// the original CSS & layout
$('.barhide').removeClass('hide');
// Kill any previous timers
clearTimeout(timer);
// Wait 3 seconds and hide again
timer = setTimeout(toggle, 3000)
});
.barhide { background-color:blue; }
.hide { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="barhide">ONE</div>
<div class="show">TWO</div>
You just count the nr of timers running and when the last finishes you hide the bar.
var count = 0;
$(window).mousemove(function( event ) {
$('.barhide').show();
count += 1;
setTimeout(function() {
if (count == 1) {
$('.barhide').hide();
}
count -= 1;
}, 3000);
});
I have the back to top button that appears when you reach a point on the page, which is working fine, however, when it appears the text is on two lines until the box has finished the animation to appear. So, is there anyway to prevent this? What I mean by the animation is: btt.show('slow');
Code:
$(document).ready(function () {
var btt = $('.back-to-top');
btt.on('click' , function(e) {
$('html, body').animate({
scrollTop: 0
}, 500);
btt.hide('slow');
e.preventDefault();
});
$(window).on('scroll', function () {
var self = $(this),
height = self.height(),
top = self.scrollTop();
if (top > 500) {
btt.show('slow');
} else {
btt.hide('slow');
}
});
});
Example: http://codepen.io/Riggster/pen/WvNvQm
The problem is caused by animating the width of a box, I think it might be better to animate the position of it instead, but - even better - lets use CSS animations!
$(window).on('scroll', function () {
if ($(window).scrollTop() >= 500) {
$(".button").addClass('show');
} else {
$(".button").removeClass('show');
}
});
#wrapper {
width: 100%;
height: 2000px;
}
.button {
position: fixed;
bottom: 50px;
right: -100px;
/* You might still need prefixes here. Use as preferred. */
transition: right 500ms;
}
.button.show {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper">
<div class="button">Here's my button!</div>
</div>
I've defined your button as hidden by default, by giving it a position of right: -100px. When we hit the correct scroll position, we add the class show and that triggers the animation performed by CSS and not javascript, as we have the transition property for the property right defined - that way the browser does the heavy lifting.
Toggling show/hide alters your elements width. You either have to put it in a container with display: inline
Or more ideally you might want to change show/hide to jQuery fadeIn() / fadeOut() which is more appropriate for "Back to Top" indicators.
Here is your codepen example modified with inline container:
http://codepen.io/anon/pen/MwWweY