Hi all
I want this div to dissapear when it show up.
It is working now this way, but since sometimes the div is added after a load() I would need to merge it somehow with a live() I guess....
//Fade out the result alert.
$('.Alert').delay(6000).fadeOut(500);
Any ideas of how to do this?
Thanks in advance
It depends on how you add your div to the page after the load().
After you add the element to your page, add the handler or function you want them to have.
Example :
$('<div class="Alert"></div>').appendTo('body').delay(6000).fadeOut(500);
Live example
Related
I have 2 divs one is a big div(like a notepad) and there is a little div(like a bookmark) that is under the big div on the side of it
but now i want to use the hover event on the little div but because it has z index it doesn't fire.
like this:
http://jsfiddle.net/xf7Ca/8/
i want to do like this:
$(document).read(function(){
$("#bookmark").hover(function(){
//do something
});
});
how can i have access to the bookmark div?
You forgot to load jQuery in your jsFiddle and here is your mistake :
$(document).ready(function(){...});
not
$(document).read(function(){...});
You could have found it by yourself using the console
jsFiddle demo
$(function(){
$("#top-img").hover(function(){
$(this).stop().animate({height:"400px"},{queue:false,duration:700});
},
function() {
$(this).stop().animate({height:"300px"},{queue:false,duration:700});
});
});
This is the code I am using, its simple for the most part. When I hover over the div #top-img it takes it from a height (set in CSS) of 300px and animates it to a height of 400px.
I would like a slight delay so that
people have to hover over it for a second before it runs and
you have to move off of it for a second before it goes back to
300px.
Check out the HoverIntent jQuery plugin. I;ve used it in the past and its extremely easy to use and implement
This kind of works, but the problem is when hovering and off hovering a lot of times it does not end and just keep going up and down. So I need to some how add what I need out of both. .
$(document).ready(function(){
$("#top-img").hover(function(){
$(this).delay(400).animate({height:400},1000);
},function(){
$(this).delay(300).animate({height:300},500);
});
});
I have a page with a for layout where one half of the page is dynamic width an the other is fixed. This is achieved by floating the fixed width side to the right. It all displays fine but because the fixed width markup comes before the dynamic width markup the tab ordering gets thrown off.
See here: http://jsfiddle.net/BaMqG/
How can i overcome this without resorting to putting tabindex properties on the inputs?
You can use jQuery to dynamically set the tabindexes with a loop and counter variable. Check it out. http://jsfiddle.net/BaMqG/22/
$(document).ready(function() {
var i = 1;
$('.wrapper').each(function(){
$(this).children('.dynamic').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
$(this).children('.fixed').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
});
});
The initial value for i can be set to whatever tabindex number you want to start from.
I have managed to get the same looking form with no tab index to work by using tables.
See here: http://jsfiddle.net/ymSGM/
I would still be interested if it can be done any other way.
I am trying to get this mousever to work, but I seems to be acting very buggy in all browser versions. I have something like this
<div id="foo" onMouseOut="makeHidden('foo');">Link Text</div>
I don't want the div to be hidden when the mouse goes over the link, and I assumed it wouldn't because the link is in the div. How can I get the div to stay visible until the mouse leaves it's boundary.
You might want to look in to using jQuery http://jquery.com/
Then you could write something like this:
$("#foo").mouseenter( function(){makeHidden('foo');} );
$("#foo").mouseleave( function(){makeVisible('foo');} );
Or just cut out the middle man
$("#foo").mouseenter( function(){$(this).css("visibility", "hidden");} );
$("#foo").mouseleave( function(){$(this).css("visibility", "visible");} );
By using a fancy bubbling trick. See: http://jsfiddle.net/minitech/kZcCr/
You want to stop the propagation of the mouseout event if it's being applied to an element's children, and you also want to cancel the mouseout of the parent if we're moving into one of its children. That can be done using relatedTarget, or toElement on IE.
actuallly i m not geeting ur point might be this code will help u
<script type="text/javascript">
function abc (mylink){
document.getElementById('mylink').style.display = 'none';
}
function abcd(mylink){
document.getElementById('mylink').style.display = 'block';
}
i tried doing it with css, the closest i got was: http://jsfiddle.net/XyDec/
It kind of works, but don't hide the content inside it and i would like some smooth animation
, so i guess it's scripts time.
i can't write them or don't know where to look for them, could anybody help me ?
you may take a look at the jquery javascript framework (user friendly and powerfull)
here is an example of smooth slide down of div using jquery:
http://api.jquery.com/slideDown/
this is made with one line : $("div").slideDown("slow");
hope it help
Have you tried jQuery? You can treat the div as an object and assign an action to an event, through jQuery methods.
For instance:
function hide(){
$('#the-div').hide('slow')
}
Then you just call the function on the hover event.
If you want to go a step further, you can assign a timer for it to show again. Or even use a callback.
function hide(){
var x = $('#the-div')
$('#the-div').hide('slow', function(x){
//do something with the variable x
})
}
I think that should work.
Hope that helps.
Cheers.