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.
Related
I have a series of divs, that serve as a demo page. Initially I have only the first div showing, with the other 2 hidden using jQuery hide() on page load.
There is a button on each div which triggers a jQuery event of hiding the current div and showing the next div in the sequence.
I would like on the very last div (div 3), once displayed to also show the previous 2 divs, but to have div 3 still display. Meaning, the user can scroll up to see the other two divs, but without scrolling they will still be viewing div 3.
$(document).ready(function () {
$(".page-2").hide();
$(".page-3").hide();
$(".overlay").show();
$(".overlay-button").click(function () {
$(".overlay").hide();
$(".page-1").fadeOut(1000);
$(".page-2").show("slow");
});
$(".arrow-down").click(function () {
$(".page-2").fadeOut(1000);
$(".page-3").show();
$(".page-2").show();
$(".page-1").show();
});
});
This code brings the view back up to the first div (".page-1").
The problem is that when you have all of them open the height of the page changes and the scrollbar gets left behind, to fix this you can force the scrollbar to scroll to the bottom of the page with the following snippet:
$('html, body').scrollTop($(document).height());
I'm currently making an addon for a site, but I stumbled upon a problem:
my addon needs to simulate clicking a div, but the div only appears if you're hovering over another div. I tried
$("#id-1").trigger("mouseover");
$("#id-2").click();
but it doesn't really work because the box instantly dissapears again.
is there any way I can do this?
thanks in advance!
edit: $("#id-2") isn't just made invisible, its no longer there in the elements, they're using some code to delete it and put it back in place when you hover over $("#id-1")
If you have access to the CSS file you can use a hover class to do this, assuming they are siblings (could be modified to work with parent-child relationship) and and that they use display:block and display:hidden to hide/show the hidden element
/* CSS */
elemOne:hover ~ div, .hover ~ div { display:block; } // Applies on hover or if
// hover class
/* jQuery */
$('elemOne').addClass('hover'); // Initialize the hover state
$('elemTwo').trigger('click'); // Click the now-showing element
$('elemOne').removeClass('hover'); // Remove the hover state
Demo
I am creating a hover over button, once hovered it will scroll up to unreal more content over my slideshow, but when I hover over the button it pulls up but wont come back down.
Click here to see live, hover over Contact Our Team Button on slider
jQuery(".buttontwo").hover(
function(e){
jQuery('.buttontwo').animate({top:'0px', bottom:'auto'}, 200)
},
function(e){
jQuery('.buttontwo').animate({bottom:'75px', top:'auto'}, 200)
}
);
Any ideas guys?
Thanks
Try adding a fixed value to the top property in the second function().
However you should be aware that as soon as you hover the button and the animation starts the second function will be triggered since you're not hovering the button anymore.
You might have to find a different way to animate that, perhaps adding aonMouseEnter / onMouseLeave event to the button's container.
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.
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>.