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
Related
I have 4 divs (div1, div2, div3, div4) that I want to show individually after the content of each one has loaded.
For instance, after content of div1 has loaded, div1 is showed ... after content of div2 has loaded, div2 is showed ... and so on.
I know how to make the content of the entire page shows after all content is loaded, but I can't find a way to do this without writing the same code for each one of the divs, and I'd like to know an optimized way to do it.
Also I'd like to show a image in each one of the divs while the content is being loaded.
Thanks in advance
Seems like the thing you're searching for is jQuery queue
In your main document you could just hide the DIV like this:
<div id="classname" style="overflow:hidden; display:none;">
And then at the end of your code which loads your content (assuming your doing something like a sql data load) just call a function to show the DIV like this:
ShowHide('classname');
The function would look something like this:
function ShowHide(h) {
var tbl = document.getElementById(h);
tbl.style.display == 'block' ? tbl.style.display = 'none' : tbl.style.display = 'block';
}
For showing a loading image in the mean time maybe create another DIV that is hidden at the same time your main DIV is shown. I'm sure there i
$(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 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';
}
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
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.