I have a link that shows a div on mouse over.
On mouse out I hide the div again.
Yet, if the user never mouse overs the div after it opens then it stays open so I need to hide the div after a certain time.
Since these are 2 elements (link and a div) I do not think I can use .hover. How would I best write this to hide .tooltip-profile after 10 seconds of no mouse over?
$("#profile").mouseenter(function(){
var position = $(".tooltip-profile").offset();
$(".tooltip-profile").css( { position: "absolute", left: "720px", top: "-110px" } );
$(".tooltip-profile").fadeIn(500);
} );
$(".tooltip-profile").mouseleave(function(){
$(".tooltip-profile").fadeOut(500);
} );
You need to provide a callback function to your fadeIn() which defines a timeout of 10 seconds. When reached, the time out will fadeOut() the element:
$("#profile").mouseenter(function () {
var position = $(".tooltip-profile").offset();
$(".tooltip-profile").css({
position: "absolute",
left: "720px",
top: "-110px"
});
$(".tooltip-profile").fadeIn(500, function () {
setTimeOut(function () {
$(".tooltip-profile").fadeOut(500);
}, 10000);
});
});
$(".tooltip-profile").mouseleave(function () {
$(".tooltip-profile").fadeOut(500);
});
Wait for some time using setTimeout on mouseleave during this time if mouse is again on link or tooltip don't hide tooltip.
var keepOpend ;
$("#profile").mouseenter(function(){ keepOpend = true;
var position = $(".tooltip-profile").offset();
$(".tooltip-profile").css( { position: "absolute", left: "720px", top: "-110px" } );
$(".tooltip-profile").fadeIn(500);
}).mouseleave(function(){
keepOpend = false;
setTimeout(function(){
!keepOpend && $(".tooltip-profile").fadeOut(500);
}, 500);
});
$(".tooltip-profile").mouseleave(function(){
keepOpend = false;
setTimeout(function(){
!keepOpend && $(".tooltip-profile").fadeOut(500);
}, 500);
}).mouseenter(function(){
keepOpend = true;
});
Related
I try to move a set of different div, to do that I did a function to make an infinite movement in the space. Now I want to put the different div in a sort of grid to class them. It runs sometimes but It don't stop the function and when every divs are placed it continue to move.
What I wan't (without using a library like Particle.js) is to make it move continually but when I click, it instantly stop the div and run from their position to the grid, and on the second click, it go from the grid to the function.
I write it on this jsFiddle
Here is the Jquery :
$(document).ready(function(){
function move() {
$('div').each(function(){
var top = $(this).css('top');
var left = $(this).css('left');
var topEnd = $(this).data('top-end');
var leftEnd = $(this).data('left-end');
$(this).animate({
left: leftEnd,
top: topEnd
}, 3000).animate({
left: left,
top: top
}, 3000,move);
}
)}
move();
$('button').click(function(){
$('div').each(function(){
var position = $(this).position();
var gridTop = $(this).data('grid-top');
var gridLeft = $(this).data('grid-left');
var topEnd = $(this).data('top-end');
var leftEnd = $(this).data('left-end');
if(position.top == gridTop ){
$(this).animate({
left: leftEnd,
top: topEnd
}, 2000);
} else {
$(this).animate({
left: gridLeft,
top: gridTop
}, 2000);
}
});
});
});
And here the html :
<button>click moi</button>
<div data-grid-left="10px" data-grid-top="130px" data-left-end="250px" data-top-end="250px" style="background:green;left:-50px;"></div>
<div data-grid-left="130px" data-grid-top="10px" data-left-end="350px" data-top-end="-50px" style="background:red;top:200px;left:-200px;"></div>
<div data-grid-left="130px" data-grid-top="130px" data-left-end="500px" data-top-end="100px" style="background:blue;top:400px;left:-100px;"></div>
You can add .stop() at the end of
$('button').click(function(){
...
I have a onClick function that works to move boxes on and off the webpage when the screen is clicked. I'm trying to convert this code so that the movement will happen automatically every four seconds. The problem is that the timeout event most likely needs to be happening inside the main function, because of the functions already repetitive nature, and that's where I'm stuck.
This is the working code:
<script>
$('.box').click(function() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this).animate({
left: '-56%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
});
</script>
And this is what I've tried for the timeout:
<script>
window.onload = function(){
setTimeout(boxMove, 1000);
};
function boxMove() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this).animate({
left: '-56%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
}
</script>
To make sure I am understanding correctly, you no longer want the click to clear this box, but rather want it to clear automatically 4 seconds after the page loads.
Your code is close, it just looks like you missed some closing brackets when converting the code. Try this:
window.onload = function(){
setTimeout(boxMove, 1000);
};
function boxMove() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
$(this).animate({
left: '-56%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
});
}
Assumptions:
Your DOM manipulation with jQuery was functioning as you expect it
to now prior to converting to a timeout.
You only need to clear these boxes once and they never return. If they do return and you want to clear them every 4 seconds regularly, change setTimeout to setInterval.
I have a problem with link inside page. This is part of jQuery code I use in my page
$.fn.stopAtTop= function () {
var $this = this,
$window = $(window),
thisPos = $this.offset().top,
//thisPreservedTop = $this.css("top"),
setPosition,
under,
over;
under = function(){
if ($window.scrollTop() < thisPos) {
$this.css({
position: 'absolute',
top: ""
});
setPosition = over;
}
};
over = function(){
if (!($window.scrollTop() < thisPos)){
$this.css({
position: 'fixed',
top: 0
});
setPosition = under;
}
};
setPosition = over;
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(function(){setPosition();});
setPosition();
};
And this is a example DEMO
When I scroll down everything works fine but when I want go to the top of the page it's impossible. I know that issue is that the script makes the div fixed, but I don't know how to fix it. Any ideas?
Add a click handler that scrolls to the top of the page:
$("[href='#one']").click(function() {
scrollTo(0, 0);
});
jsfiddle.net/jx8nmhfq/1
I have jQuery slider that slides items through a container div every 5 seconds by animating the left property by 1400px. Once the left property reaches -2800px an if conditional starts resetting the left property while also removing items from the front of the row and appending them to the back of the list, so that the sliding loop continues infinitely. This slider also has left and right buttons that will allow the user to cycle through the images if they would like to.
The problem I have encountered is that if you click the sliders multiple times in quick succession then the left property goes outside of the -2800px boundary set in the if conditional. I am assuming this is because the multiple click events are all fired off before the left property reaches the -2800px. How can I stop this from happening? Is there a function that will stop multiple functions from firing before the first one is complete? Here is a jsFiddle (I changed the widths for displays sake) :
http://jsfiddle.net/25tt5vmp/
My jQuery:
$(document).ready(function () {
var myTimer = setInterval(slide, 5000);
function slide() {
var left = $('#sliderList').css('left');
left = left.substring(0, left.length - 2);
if (left <= -2800) {
$('#sliderList').css('left', '-1400px');
var slide = $('#sliderList li:first');
$('#sliderList').children('li:first').remove();
$('#sliderList').append(slide);
$('#sliderList').animate({ left: "-=1400px" }, "slow", "swing");
}
else {
$('#sliderList').animate({ left: "-=1400" }, "slow", "swing");
}
}
$('#sliderLeft').click(function () {
var left = $('#sliderList').css('left');
left = left.substring(0, left.length - 2);
if (left <= -2800) {
$('#sliderList').css('left', '-1400px');
var slide = $('#sliderList li:first');
$('#sliderList').children('li:first').remove();
$('#sliderList').append(slide);
$('#sliderList').animate({ left: "-=1400px" }, "slow", "swing");
clearInterval(myTimer);
myTimer = setInterval(slide, 5000);
}
else {
$('#sliderList').animate({ left: "-=1400" }, "slow", "swing");
clearInterval(myTimer);
myTimer = setInterval(slide, 5000);
}
});
$('#sliderRight').click(function () {
var left = $('#sliderList').css('left');
left = left.substring(0, left.length - 2);
if (left >= 0) {
$('#sliderList').css('left', '-1400px');
var slide = $('#sliderList li:last');
$('#sliderList').children('li:last').remove();
$('#sliderList').prepend(slide);
$('#sliderList').animate({ left: "+=1400px" }, "slow", "swing");
clearInterval(myTimer);
myTimer = setInterval(slide, 5000);
}
else {
$('#sliderList').animate({ left: "+=1400" }, "slow", "swing");
clearInterval(myTimer);
myTimer = setInterval(slide, 5000);
}
});
});
There is one easy solution. Use a blocking-variable. Generate a variable:
var blockedSlider = false;
Then, set it to true when starting the animation.
On every click, you check, if the blockedSlider is true or false, and only fire the animation if false.
And after your animation is done, set the blockedSlider to false again. That's it.
I have made a spelling game for primary school children. I want to make the click events in my game touch events so it can be compatible on tablets. Is there a way I can put them alongside my click events so that one program is compatible to both, or will I have to make a tablet version?
Here I have the code for one of my click events as an example
$('.drag').on('click', function(e) {
e.preventDefault();
if (animation) return;
animation = true;
setTimeout(function() {
animation = false;
}, 700);
$(".minibutton").css('visibility', 'hidden');
$('.next').css('visibility', 'hidden');
var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);
if (target.length) {
target.addClass("occupied");
b.clone().addClass(
b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
background: "transparent",
position: "absolute",
top: currentPos.top,
left: currentPos.left
}).animate({
top: targetPos.top,
left: targetPos.left
}, "slow", function() {
$(this).css({
top: 0,
left: 0
}).appendTo(target);
var spellWord = $('.drop-box.spellword');
if (!spellWord.filter(':not(.occupied)').length) {
var wordIsCorrect = 0;
spellWord.each(function() {
if ($(this).data("letter") == $(this).find("div").data("letter")) {
wordIsCorrect++;
}
});
if (spellWord.length == wordIsCorrect) {
spellWord.addClass('wordglow2');
$(right).val('Right!');
$(right).show();
success.play();
$(wrong).hide();
score.right++;
score.attempts++;
if (score.right == 3) {
$('.answers').css('visibility', 'visible');
$('.answers').html("Well done! </br> You correctly spelt " + score.right + ". </br> Keep it up.").show();
$('table').fadeOut(3000);
$('.right').hide();
$('.box-style2').hide();
$('.box-style').hide();
$('.picstyle').hide();
$('.play').hide();
$('.minibutton2').hide();
$("#mysoundclip").attr('src', listOfWords[rndWord].audio);
audio.stop();
$("#mypic").attr('src', listOfWords[rndWord].pic);
pic.hide();
}
setTimeout(function() {
jQuery('.minibutton').trigger('click');
}, 1500);
setTimeout(function() {
jQuery(right).hide();
}, 1500);
} else {
//spellWord.addClass("wordglow4").css('color', 'transparent');
$(wrong).val('Wrong!');
$(wrong).show();
failure.play();
$(right).hide();
score.wrong++;
score.attempts++;
if (score.wrong == 3) {
$(".minibutton").css('visibility', 'visible');
$('.next').css('visibility', 'visible');
}
$('.drop-box.spellword').animate({
'opacity': 1
}, 1500, function() {
$(this).removeClass('wordglow4').removeClass('occupied').html('')
});
setTimeout(function() {
jQuery(wrong).hide();
}, 1500);
}
}
});
}
});
Can someone point me in the right direction as I have never done this before.
Here is a fiddle to help (Sound warning!!) http://jsfiddle.net/smilburn/7Y7A5/8/
You could add the tap event and include jQuery Mobile in your mobile version.
$('.drag').on('click tap', function(e) {...}