My resetActive is not working - javascript

Why does my resetActive call does not work, the background yellow pulls but the resetActive does not. Here is my code:
$(document, "#ReloadPage").on('mouseover', function() {
resetActive()
$("#ReloadPage").css("background-color","yellow");
});
Why does my resetActive call does not work?


CSS:
#ReloadPage:hover {
background-color: yellow
}
JavaScript:
$('#ReloadPage').on('mouseover', function () {
resetActive();
});

Related

how to animate page background when text is input to a field

I am trying create this effect on a website I am creating:
http://www.fischerspooner.com/
Does anyone know how to achieve this animation?
Thanks
Stephanie

Just inspect the source of the website. This is how it's done.
$(function () {
$('input').focus().keyup(function () {
$('body').addClass('strobo');
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function () {
$('body').removeClass('strobo');
}, 200);
});
});
CSS
.strob {
background-color: blue;
}

jquery delay is happening after fadeout

I'm fading in and out 3 divs. the fadein and out works great, except the delay is happening after the div is faded out. the code:
runslide();
function runslide() {
$('.expect').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.marketing').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.consider').fadeIn(1500).delay(7500).fadeOut(1000, function () {
runslide();
});
})
});
}
here is the file I am working on: http://goo.gl/8xt1XZ , it is the slider after the text.

change the code like this
runslide();
function runslide() {
$('.expect').fadeIn(1500).fadeOut(2000, function() {
$('.marketing').fadeIn(1500).fadeOut(2000, function() {
$('.consider').fadeIn(1500).fadeOut(1000, function(){
runslide();
});
})
});
}
DEMO

The delay seems to be working fine. You do have a missing semicolon but I don't think that's the problem. I'm not sure what the problem is on your site. I tried it with jQuery version 1 and 2 and both seems to be working fine.
http://jsfiddle.net/csrow/5t4rL/2/
$('.expect').hide();
$('.marketing').hide();
$('.consider').hide();
runslide();
function runslide() {
$('.expect').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.marketing').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.consider').fadeIn(1500).delay(7500).fadeOut(1000, function () {
runslide();
});
});
});
}

How can I add a transition to the toggle?

I use this to toggle the sidebar:
$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle();
});
});
you can see it work here:
http://jsfiddle.net/Jacob_Sell/Ye7wp/
I think the toggle looks to jumpy at the moment, how can I add a transition to make it look smoother?

$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle(300);
});
});
Updated DEMO

http://jsfiddle.net/Praveen16oct90/Ye7wp/4/
**$(document).ready(function () {
$('.sbt').click(function () {
$('.sidebar').toggle(2000);
});
});**

How to hide class first and show only on hover in jQuery?

I have following toggling script:
$('.edit_bg').on({
mouseenter: function () {
$(this).addClass('edit_bg');
},
mouseleave: function () {
$(this).removeClass('edit_bg');
}
});
But this works after i first hover that div.
How should I remove all .edit_bg classes from divs on start and be able to show them on hover?

After the on function just do removeClass.
$('.edit_bg').on({
mouseenter: function () {
$(this).addClass('edit_bg');
},
mouseleave: function () {
$(this).removeClass('edit_bg');
}
}).removeClass('edit_bg');

I understand what you are trying to achieve using Javascript/jQuery, but you can achieve it simply using css:
.edit_bg
{
background-color: blue;
}
.edit_bg:hover
{
background-color: red;
}
Look, ma! No javascript! http://jsfiddle.net/adrianonantua/rv9ht/

Cancel setTimeout if mouse is over div

I have two div classes, say A and B. When the mouse is over div A, div B should appear, then if the mouse is over A or B, div B should stay opened. If the mouse is out of both, A and B divs, B should disappear. (As you probably guess this is a simple tooltip script)
This is the jquery code I wrote:
$(document).ready(function() {
function show() {
$("BBB").css({'display':'block'});
}
$("AAA").each(function() {
$(this).mouseover(function() {
show();
});
$(this).mouseleave(function() {
time = setTimeout("hide()", 200);
});
$("BBB").mouseleave(function() {
setTimeout("hide()", 200);
});
$("BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
function hide() {
$("BBB").css({'display':'none'});
}
The problem is that when I move from B to A, B disappears! I want to it to disappear only if the mouse is neither over A, nor B. How can I fix this problem?

First, put B inside of A:
<div class="a">
AAA
<div class="b">
BBB
</div>
</div>
Then, abandon your javascript and make life easier with plain old css:
.b
{
display: none;
}
.a:hover .b
{
display: block;
}
Edit - Here's a live example using the CSS technique: http://jsfiddle.net/gilly3/sBwTa/1/
Edit - If you must use the JavaScript, just add clearTimeout(time) to show(). But, let's also simplify your code:
$(function()
{
var time = 0;
function show()
{
clearTimeout(time);
$("BBB").show(); // Existing jQuery that does $().css("display","block")
}
function hide()
{
time = setTimeout(function()
{
$("BBB").hide();
}, 200);
}
$("AAA,BBB").mouseenter(show).mouseleave(hide);
});

There are a few small problems with your code. The one which is biting your right now is that you aren't clearing BBB's timeout when you enter AAA. You can fix this by adding a clearTimeout to AAA's mouseover handler.
Secondly, it's safest to clear this kind of timeout before you set it each time, so that you don't have your timeout tracking overwritten if something unexpected happens. (It's always safe to clear a timeout, even if it's invalid or has already occurred.)
Lastly, though this is most likely only a problem in your example code, you're leaking time into the global object. ;-)
Try this instead:
$(document).ready(function() {
var time;
function show() {
$("BBB").css({'display':'block'});
}
$("AAA").each(function() {
$(this).mouseover(function() {
clearTimeout(time);
show();
});
$(this).mouseleave(function() {
clearTimeout(time);
time = setTimeout("hide()", 200);
});
$("BBB").mouseleave(function() {
clearTimeout(time);
time = setTimeout("hide()", 200);
});
$("BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
function hide() {
$("BBB").css({'display':'none'});
}

Here's a script that works with meaningful function names that should make it easy to see what's going on. You have to cancel the hiding from mouseenter on both divs.
$(document).ready(function() {
var timerId, delay = 300;
var a = $("#A"),
b = $("#B");
function stopHide() {
clearTimeout(timerId);
}
function showTip() {
b.show();
}
function startHide() {
timerId = setTimeout(function() {
b.hide();
}, delay);
}
a.mouseenter(showTip).mouseenter(stopHide).mouseleave(startHide);
b.mouseenter(stopHide).mouseleave(startHide);
});
div {
border: 2px dashed firebrick;
float: left;
font-size: 50pt;
font-weight: bold;
padding: 5px;
margin: 5px;
}
#B {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='A'> A </div>
<div id='B'> B</div>
Previously at http://jsfiddle.net/92jbK/1/

You code is wrong :)
Try this:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#AAA, #BBB {
width:100px;
height:100px;
border:1px solid #000;
}
</style>
</head>
<body>
<div id="BBB">
BBB
</div>
<div id="AAA">
AAA
</div>
<script src="http://www.google.com/jsapi"></script>
<script>
//VISIBLE
function hide() {
$("#BBB").css({'display':'none'});
}
function show() {
$("#BBB").css({'display':'block'});
}
// Load jQuery
google.load("jquery", "1");
google.setOnLoadCallback(function() {
// NOT VISIBLE
// function hide() {
// $("#BBB").css({'display':'none'});
// }
// function show() {
// $("#BBB").css({'display':'block'});
// }
$(document).ready(function() {
var time;
$("#AAA").each(function() {
$(this).mouseover(function() {
show();
});
$(this).mouseleave(function() {
time = setTimeout("hide()", 200);
});
$("#BBB").mouseleave(function() {
setTimeout("hide()", 200);
});
$("#BBB").mouseenter(function() {
clearTimeout(time);
});
});
});
});
</script>
</body>
</html>

one alternative is to use jquery's tooltip http://flowplayer.org/tools/tooltip/index.html
then you can just do for example:
$('#A').live(function() {
$(this).tooltip({
relative: true,
position: 'top center',
delay: 200,
effect: !$.browser.msie ? 'fade' : 'toggle',
fadeInSpeed: 100,
fadeOutSpeed: 50,
predelay: 500
});
});
and you just make div b of class tooltip

Is time declared outside all of this?
It is not in the same scope in the two functions you have it in above, so is not the same variable so the clearTimeout() call has no effect.
Declare it outside both with var time;, so that they refer to the same variable.

Categories

Resources