How to open a div with slideUp in jquery - javascript

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.

Related

Trying to Combine toggleClass with slideDown to Reveal a Div

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.

Scroll to Top does not work after hiding elements (jQuery)

Currently I have a function for my menu that scrolls to different divs on the page, as a form of navigation. Currently I'm using the following method.
Scroll to Portfolio
$("html, body").animate({ scrollTop: $('#portfolio').offset().top }, 600);
Since I'm building the entire page dynamically, when someone clicks on a link, I am using .hide() to hide main page elements, and generating additional content.
function hideElements() {
$("#something").hide();
}
While on the content page, if they want to go back to portfolio, they click on the portfolio link again. I'm using the following method to "scroll" them to the re-shown element.
$("#nav").click(){
unhideMainElements();
$("html, body").animate({ scrollTop: $('#portfolio').offset().top }, 1200);
$("#container").fadeIn(300);
}
The problem is, the fade will work, but it won't scroll to the element. I'd figure it has to do with .hide() the element and .show() the element, but I don't know why. I appreciate any insight. Thanks!
You might try the visibility proprety instead of display :
$('#something').css({'visibility':'hidden'}); //or visible
The element should keep his native dimensions without been showed.
Instead of hide() and show(), why don't you try .animate({'opacity':0}) to hide and then .animate({'opacity':1}) to show.
Resolved
The two functions of animation and fadeIn were put into the .show() callback in unhideMainElements();. That way, the animation will only fire when all the .show() completes.
I guess it was a timing thing.
Thanks for your help.

Hover over a hidden element to show it

Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:
Then when you hover over the area where there should be an arrow, it shows itself:
I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?
Set it to zero opacity instead:
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
http://jsfiddle.net/mblase75/bzaax/
You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.
Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.
CSS:
#it {
opacity: 0;
width: 500px;
height:500px;
}
#it:hover {
opacity: 1;
}
Here is an example of showing one element when another is hovered over:
HTML:
<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>
jQuery:
$("#me").hover(function(){
$("#else").show();
},function(){
$("#else").hide();
});
Use the .fadeTo jQuery method to change the opacity of the element on hover state.
The jQuery site contains an example but something like this should suffice
$("element").hover(//On Hover Callback
function() {$(this).fadeOut(100);} ,
//Off Hover Callback
function() {$(this).fadeIn(500);})
From the jQuery Hover page.
You could set it to opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.
One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.
Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.
And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.
You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.

Homemade Jquery lightbox, but z-index won't change back afterwards

So I'm trying to make a simple lightbox on a concert listings page. You click a listing (.performer), and then an info box (.lightboxinfo) gets overlaid while a semi-opaque white div lightens the rest of the screen (#whitepage). Then, you click anywhere on the screen, and the box and white div disappear.
Everything works fine except the final z-index changes. The box and white div become fully transparent, but the z-index clearly haven't been changed since I can't click on any links.
Anyone know what I'm doing wrong? Thanks so much!
The javascript is below:
$('.performer a').click(
function(){
$('.lightboxinfo').css('z-index','110').animate({opacity:'1'}, {queue:false,duration:500});
$('#whitepage').css('z-index','100').animate({opacity:'0.4'}, {queue:false,duration:500});
});
$(document).click(
function(){
$('#whitepage').css('z-index','-100').animate({opacity:'0'},{queue:false,duration:100});
$('.lightboxinfo').css('z-index','-110').animate({opacity:'0'},{queue:false,duration:100});
});
});
Why mess around with the z-index when you can set 'display:none' after your opacity becomes 0?
// when appearing
$('#whitepage').css('opacity','0').show().animate({opacity:'0.4'}, 500);
// when disappearing
$('#whitepage').animate({opacity:'0'}, 100, function () {
$('#whitepage').hide();
});
Also, each time you click on the performer link, you're adding another event handler to the document. You may want to do that only once, outside of the click and only if the whitepage is visible.
$('.performer a').click(function () {
});
$(document).click(function () {
$('#whitepage:visible').animate(...
});
This is a bit difficult to answer as you haven't given the HTML and CSS, but there are a few things you should probably look at.
I assume your lightbox divs are positioned absolutely. Any (container) elements that you want to appear over them must be positioned relatively or absolutely or z-index will have no effect and relatively / absolutely positioned elements will always be on top of them.
You're animating the opacity manually, rather than using jQuery's built in fadeOut animation. Apart from giving compatibility with browsers that don't support opacity, fadeOut also sets the hidden element to display: none. This allows you to click on stuff that would otherwise be underneath the lightbox, whereas just reducing the opacity to 0 still leaves the element there and able to accept and block clicks. (So using fadeOut also means you'd no longer have to toggle the z-index.)
This is not directly related to the problem you mentioned, but both of the events you've set up will fire when you click on a .performer a link. (I think this is why you've prevented the animations from being queued: both will run together and the one that sets the opacity to 1 wins as it finishes last.) This does, however, stop the lightbox getting the z-index you want. To prevent this happening, you either need to set the close lightbox click event to #whitepage or stop the event propagating.
$('.performer a').click(function(event)
{
$('.lightboxinfo, #whitepage').fadeIn(500);
event.stopPropagation();
});

jquery dropdown div not quite working

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>.

Categories