We Keep Coding

How to fire event after 3 sec of hovering

I have a div and I want to fire an event only after user continuous hovers his mouse for 3 sec. My code doesn't work well because it fires right after hover and doesn't "wait".
Code:
$(".inner_pic").mouseenter(function () {
setTimeout(function () {
alert('testing');
}, 3000);
}).mouseleave(function () {
alert('finish');
});

You need to store timeout id somewhere and clear it on mouseout. It's convenient to use data property to save this id:
$(".inner_pic").mouseenter(function () {
$(this).data('timeout', setTimeout(function () {
alert('testing');
}, 3000));
}).mouseleave(function () {
clearTimeout($(this).data('timeout'));
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">PICTURE</div>

You can achieve this by delay option:
Working demo
$('#elem').popover({
trigger: "hover",
delay: {show : 3000, hide : 0} });

Checkout the below code
var myVar;
$( "div#container" )
.mouseover(function() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
})
.mouseout(function() {
clearTimeout(myVar);
});
div {
background: red;
margin: 20px;
height: 100px;
width: 100px;
display:block;
cursor: pointer;
}
div:hover {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

var st;
$(".inner_pic").mouseenter(function(e) {
var that = this;
st = setTimeout(function() {
alert('testing');
}, 3000);
}).mouseleave(function() {
clearTimeout( st );
alert('finish');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">
<h3>Picture Here - Hover me</h3>
</div>

Assuming you have a div with id of myelement, you can do this:
var divMouseOver;
$('#myelement').mouseover(function() {
divMouseOver = setTimeout(function() {
alert("3 seconds!"); //change this to your action
}, 3000);
});
$('#myelement').mouseout(function() {
if (divMouseOver) {
clearTimeout(divMouseOver);
}
});
BTW, tere's a helpful clarifying question re: using mouseenter and mouseover right here: Jquery mouseenter() vs mouseover(). Consider this when choosing which to use.

Block area and not allow mouse effect it

I want that the maze will not let the user start from a random position after the sad smiley shows up, any advice?
Here is the fiddle link: http://jsfiddle.net/uqcLn/59/
$(".way").bind('mouseenter', function () {
$('#highlight_lose').fadeIn(1000);
$('.wall').css("background", '#fff');
$(".arrow").html("Try again");
$('.arrow').bind().addClass('gradient');
$('.arrow').bind().html('Try again!').css('color', '#000');
function move() {
console.log("t");
$(".arrow").animate({
"margin-left": "-=10px"
}, 300, function () {
$(".arrow").animate({
"margin-left": "+=10px"
}, 300, function () {
$(".arrow").removeAttr('style');
move();
});
});
}
$(".arrow").removeAttr('style');
$(".arrow").clearQueue().stop().finish();
move();
})

CBRoe's answer is right. I was playing with your jsfiddle and I updated it. Check if this helps
http://jsfiddle.net/neogauravsvnit/uqcLn/60/
I just modified the js part a bit
$(".wall").hover(function () {
//$(this).css("background", '#000');
if($("#wall_first").hasClass("wall-black") || $(this).attr("id") == "wall_first"){
$(this).addClass("wall-black");
}
$('#highlight_lose').fadeOut(1000);
$(".arrow").removeAttr('style');
$(".arrow").clearQueue().stop().finish();
$ (".arrow"). html ("START HERE!");
})
$(".way").bind('mouseenter', function () {
$('#highlight_lose').fadeIn(1000);
//$('.wall').css("background", '#fff');
$(".wall").removeClass("wall-black");
$(".arrow").html("Try again");
$('.arrow').bind().addClass('gradient');
$('.arrow').bind().html('Try again!').css('color', '#000');
function move() {
console.log("t");
$(".arrow").animate({
"margin-left": "-=10px"
}, 300, function () {
$(".arrow").animate({
"margin-left": "+=10px"
}, 300, function () {
$(".arrow").removeAttr('style');
move();
});
});
}
$(".arrow").removeAttr('style');
$(".arrow").clearQueue().stop().finish();
move();
})
I added an id element in the first class type wall.. And I defined the class wall-black so that you can effectively check if the first box has been hovered over..

scroll to a div on page

I'm trying to scroll the page upon a .click event. Here is what I have so far:
jQuery:
function scrollToStart() {
$("#scrollToStart").click(function() {
$("#startHere").animate({ scrollTop: 0 }, "slow");
return false;
});
}
HTML:
<a href="#startHere" id="scrollToStart">
<img class="img-center" src="images/get-started.png"/>
</a>
When I click, it doesn't do anything. What did I do wrong?

this should work
$("#scrollToStart").click(function (){
$('html, body').animate({
crollTop: $("#startHere").offset().top
}, 2000);
});
a working fiddle
http://jsfiddle.net/tvTUu/

Use
$('html,body').animate({
scrollTop: $("#divToBeScrolledTo").offset().top;
});
with scrollTop: 0 you always scroll to the top of the page.
More information you can find here (With live-Demo):
http://css-tricks.com/snippets/jquery/smooth-scrolling/

$(function(){// when dom loaded
$("#scrollToStart").click(function (){
$(document.body).animate({
scrollTop: 0
});
});
});
I works for me.

If I understood the question properly, you need to scroll your page to the top position on the click event, with an animation effect. I did something similar not long ago, here is the JavaScript code.
innerAnimationStep = 25;
innerScrollStep = 1;
function scrollTopAnimated(scrollStep, animationStep)
{
try
{
innerScrollStep = scrollStep;
innerAnimationStep = animationStep;
scrollTopAnimationStep();
}
catch(e)
{
console.log(e.message);
}
}
function scrollTopAnimationStep()
{
try
{
var jDocument = $(document);
if(jDocument.scrollTop() > 0)
{
jDocument.scrollTop( jDocument.scrollTop() - innerScrollStep );
setTimeout(scrollTopAnimationStep, innerAnimationStep);
}
}
catch(e)
{
console.log(e.message);
}
}
Just call scrollTopAnimated to get the page scroll with animated effect. I hope it can help.

$("#scrollToStart").bind('click',function() {
$('body , html').animate(
{
scrollTop : $("#startHere").offset().top
} , 2000 ) ;
});
http://justprogrammer.com/2013/06/21/scroll-to-specifically-element-in-browser/
http://justprogrammer.com/2013/06/25/jquery-basic-concepts/

$( document ).ready(function(){
$("#scrollToStart").click(function() {
$("#startHere").animate({ scrollTop: 0 }, "slow");
return false;
});});

jQuery .mouseover() (.mouseout) div is flickering

i have a problem with this code (i made a jsfiddle http://jsfiddle.net/r2y8J/).
$(document).ready(function() {
/*$(".bulletProj").mouseenter(function () {
console.log("You're Over!");
$(".caption").animate(
{top: "0px"},
300, function() {
console.log("i slided");
});
});
$(".bulletProj").mouseleave(function() {
$(".caption").animate(
{top: "-200px"},
300, function() {
console.log("i left");
});
});*/
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
$(".caption").toggle();
});
});
Part of the code is commented since I tried more ways.
What I want to do is to have a div with some text and a bg image, and when the mouse is over it another div should slideDown with a button. The problem is that I tried .mouseover .mouseout, .mouseeneter and .mouseleave but it keep flickering. I found that when i'm over the text it stops but if I am in a blank space of the div it continues flickering.
Anyone has an idea?
Thanks very much.

try this:
$(document).ready(function() {
$(".bulletProj,.caption").mouseenter(function() {
$(".caption").toggle();
}).mouseleave(function () {
$(".caption").hide();
});
});
working fiddle here: http://jsfiddle.net/r2y8J/4/
I hope it helps.

You can easily use
.caption{pointer-events:none}
http://jsfiddle.net/r2y8J/5/

Try this.
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").toggle();
}).mouseleave(function () {
console.log("mous leaves");
stopImmediatePropagation();
$(".caption").toggle();
});

I have faced a similar problem, in my case i have used css: opacity like below to stop flickering
css:
.caption {
width: 300px;
height: 200px;
background-color: #69adf1;
position: absolute;
opacity:0;
}
JQuery:
$(".caption").mouseenter(function(){
$(this).css('opacity','1');
})
$(".bulletProj").mouseenter(function() {
console.log("mous is over");
$(".caption").css('opacity','1');
}).mouseleave(function () {
console.log("mous leaves");
$(".caption").css('opacity','0');
});
Working Fiddle

var caption = $(".caption");
$(".bulletWrapper").hover(function(){
console.log("mous is over");
caption.toggle();
}, function(){
console.log("mous leaves");
caption.toggle();
});
or
$(".bulletWrapper").bind("mouseenter mouseleave", function(){
$(".caption").toggle();
});

Onclick is not working

Why will this code not work as an onclick ?
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
}, function() {
$(this).animate({
height: '100px'
}, 800);
});

If you're trying to first expand the element and then contract it, it should probably be something like this:
$('.mainz11').click(function() {
// determine target heights
if ($(this).hasClass("expanded")) {
var targetHeight = 100;
} else {
var targetHeight = 280;
}
// animate
$(this).animate({
height: targetHeight
}, {
duration: 800,
complete: function() { $(this).toggleClass("expanded"); }
});
});
This could use some cleaning up, but it does the trick, and you can track expanded items easily this way.
See here: http://jsfiddle.net/mpQek/3/

The click function takes only a single function but you are passing 2 functions to it. You can try it this way:
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
});

If you want to chain animations, put the next animation as the function to run on complete of the first animation:
http://api.jquery.com/animate/
$('.mainz11').click (function() {
$(this).animate({ height: '280px', 800,
function() { $('.mainz11').animate({ height: '100px'}, 800)
);
});