i'm trying to make a div drop down when someone hovers over a link. Inside the div is a login form. The following code works only in that if i hover over the link the div does appear. However when i move the mouse from the link down over the div, the div immediately retracts. Please see:
jQuery(document).ready(function() {
jQuery('.slidedown').hide();
jQuery('a.top-link-cart').hover( function(){ // enter animation
jQuery('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
jQuery('.slidedown').mouseout( function() {
setTimeout( function(){
jQuery('.slidedown').stop(true,true).animate( {
height: '0px'}, 600, function(){});}, 200 ); // setTimeout ends here
}); // mouseout ends here
});
});
All i'm trying to achieve is have the div a) stay open if the user mouses from the link to the div b)close if the user moves mouse away from link but not into div and c) close if user moves mouse out of div. I thought the .mouseout function would keep the div open so that i can at least move my mouse over it but it isn't working. Any ideas? I'd be very grateful this has been a headache to me for a week now. Thanks.
You should not use .hover but .mouseover() instead for your first method.
You could wrap your link and the div that does the animation in another div and then apply the hover to the parent div instead of the link. This way you will still validate. For example:
<div class="whatever">
<a class="top-link-cart">Show login form</a>
<div class="slidedown">form html goes here</div>
</div>
and the javascript would be:
jQuery(document).ready(function(){
jQuery('.slidedown').hide();
jQuery('.whatever').hover(function(){//to show
jQuery('.slidedown').show('effect', duration in millisecs);
}, function(){//to hide
jQuery('.slidedown').hide('effect', duration in millisecs);
});
});
this uses the jQueryUI for the animation effects, but you could use the .slideDown() and .slideUp() methods as well if all you need is the div to slide up or down
You need to nest your div.slidedown inside the a.top-link-cart:
<a class="top-link-cart">Show login form
<div class="slidedown">
The login form HTML
</div>
</a>
Ignoring standards (block elements like <div> tags shouldn't really be nested inside inline elements like <a> tags), this will work because when the div.slidedown expands, so does the parent <a>.
That way, the mouseout event won't be triggered until the user's mouse leaves the <a>.
Related
I got a draggable div container with some dynamically generated content inside.
I call it with this code:
$( function() {
$( "#dialog-message" ).dialog({
modal: true,
height: 400,
buttons: {
Fertig: function() {
$( this ).dialog( "close" );
}
}
});
CSS:
div#dialog-message {
background-color:#e8ebf3;
overflow:auto;
Inside the div I have other divs with href-links inside.
The links that are shown without scrolling do work fine, but when I scroll down in this container the hrefs does not work and the container scrolls automaticaly to the top when clicking.
The problem is that I use the href with an ID input from my database to toggle visibility of other div-containers like so:
<div href="651">This does not scroll</div>
Any ideas, how to combine the answers with this?
The href’s do work in Firefox, when I scroll down and click a link for the first time. But when I click it a second time without refreshing the page, it will scroll to the top.
In Chrome it doesn’t work a single time.
<div id="dialog" href="651">First time clicking works, second time not.</div>
Problem solved:
The problem was that the page was not fully load when I tried to href to an div-Container witch did not exists at this point.
Thanks for all the answers!
You do need to make sure the href is not just #, Use an href like #void or so. Just having an href with # will make the page scroll to the top. An example:
This will scroll to the top
This will not
I would suggest This does not scroll.
I have a series of buttons nested within divs, and am trying to reveal a second div when each button is clicked, like the grid buttons halfway down this page.
I'm attempting to use toggleClass to toggle the div between visible and hidden, which works fine. I can't seem to get the div to slide down once the button is clicked though. It works properly the second time the button is clicked, but only then.
Any suggestions?
$(function(){
$("#toprow #button1").click(function(){
$("#hiddentext1").toggleClass("showhiddentext1");
$("#hiddentext1").slideDown(500);
});
});
https://jsfiddle.net/bwoo5789/zhmowu39/
If you want your text to toggle up / down on button press you can just use the slideDown and slideUp methods. Toggling visibility isn't necessary as slideDown will do that for you.
Fiddle
$(function(){
$("#toprow #button1").click(function(){
if($("#hiddentext1").is(':hidden')){
$("#hiddentext1").slideDown(500);
}else{
$("#hiddentext1").slideUp(500);
}
});
});
Adding overflow: hidden to your div removes the jumpy effect when the slideDown completes.
I want to implement a simple slide up and slide down mechanism for revealing content on the press of a button. Using the out of the box jquery functions slideUp() and slideDown() squishes the content. I want the slide mechanism to be similar to the one used in twitter (in the timeline when you click on a tweet, more info and options slide down). There the content does not get squished. Instead the bottom border seamlessly moves over the content thus sliding up without squishing. Any pointers on how to implement this?
Edit:
The content to be slided into and out of visibility is inside a div
<div id='container'>
<div id='slider'>
<div> other content </div>
</div>
<div id='button'>
Click to slide
</div>
</div>
I listen to the click event of the 'button' div
$('.button').click(function(){
if($('.slider').is(":visible"))
{
$('.slider').slideUp();
}
else { $('.slider').slideDown(); }
});
This is a basic slider. The contents inside the 'slider' div get squished and distorted when animating.
try this demo
$(function(){
$('#button').click(function(){
if($('#slider').is(":visible"))
{
$('#slider').slideUp();
}
else { $('#slider').slideDown(); }
});
});
I've read other questions and answers about this issue but they didn't work for me, maybe I am missing something or my example is slightly different, I don't know. Anyway, I have a div with some text and a link inside and I would like to create a new div when the user hovers over this first div. The problem is that, when I am over the first div, the second one fades in and out continuously, even if I don't leave the first div with the mouse.
Here is the HTML code:
<div id="content">
<h1>Portfolio</h1>
<div id="web">
<p>Web apps</p>
<a href="#">
First link
</a>
</div>
<div id="commentweb">
<p>The text that I want to show</p>
</div>
</div>
and this is the jQuery:
$(document).ready(function() {
$("#web").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
$("#commentweb").hide();
$("#web").hover(
function () {
$(this).children("a").children("img").attr("src","2.png");
$(this).css("background-color","#ecf5fb");
$(this).css( 'cursor', 'pointer' );
$(this).css('border','1px solid #378ac4');
$(this).children("p").css("opacity","1.0");
$('#commentweb').stop(true, true).fadeIn();
},
function () {
$(this).children("a").children("img").attr("src","1.png");
$(this).children("p").css("opacity","0.5");
$(this).css("background-color","#e8e3e3");
$(this).css('border','1px solid grey');
$('#commentweb').stop(true, true).fadeOut();
}
);
});
What should I do to have the fade in animation start when I am over #web and the fade out animation when I leave that div, without flickering (i.e. constant fadeIn and fadeOut)?
I have added a fiddle to show you the problem: http://jsfiddle.net/mMB3F/
It basically happens when I hover on the text.
This problem occurs because your comment div is inside the div that you are assigning the hover event. Note that the flickring occurs when you enter the mouse pointer in the highlighted area (red) showed in the image below (related to the comment div).
Take a look in this solution: http://jsfiddle.net/davidbuzatto/mMB3F/1/
The comment div has now a absolute positioning. When the mouse enters, the comment div will be showed next to the pointer. Off course, now you will need to change the code to fit your needs. Another way of doing this is to set an div container that encloses the #web div and to put another div next to it, seting them to float. Inside the new div you insert the div with the comment.
Update
My other answer was a little too grandiose, You just have to float your other div
#commentweb {float:left}
http://jsfiddle.net/mMB3F/5/
It needs to be asynchronous, the stop() is what causes it to blink, but you dont need a stop if you just wait for the fade to complete before you assign the event handlers.
http://jsfiddle.net/u7Q9P/1/
use jquery .mouseenter() and .mouseleave() to avoid that.
that way, you dont have to reposition anything in your css.
see my answer here for more detail
I have a div that I want when user click on a button slideUp in bottom of page and cover 30% of my page and if user click on that button my div slideDown.How I can do this?
thanks
EDIT 1)
$(document).ready(function () {
$('#btnWorks').on("click", function () {
$('#tblWorks').slideToggle();
});
});
but it open from top to bottom.but I want open it from bottom to top
Check out some of jQuery's documentation:
http://api.jquery.com/slideUp/
http://api.jquery.com/slideDown/
It depends on where you have this element positioned or placed. If it's positioned absolute it may look like it slides up but it is really sliding down. When you call slideToggle() it will slideDown() if the element is hidden, and slideUp() if the element is already visible.
jsFiddle of slideToggle, 2 examples: http://jsfiddle.net/HjJBZ/
You should put the element in a container div and slide the container div down instead which may work better.
Try using jQuery's slideToggle.
http://jsfiddle.net/CLbzf/
$('#trigger').click( function() {
$('#slider').slideToggle();
});
slideUp hides the elements, slideDown shows the elements. If you've anchored the elements via absolute positioning, you should still use slideDown to show the element, even though it might animate upwards.