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

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.

Related

Jquery expand and scroll at the same time

I was wondering if the following is possible. Currently I have some code which opens a DIV at the bottom of the page using jquery. It is something as simple as this:
$("#country_slide").slideToggle();
Then I have some example code which scrolls to the bottom of the page (just an example):
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
The trouble is this div that opens up will be off the bottom of the page when it expands, so I want it to not only open but also have the page scroll down to show the now opened div as it is opening.
I can only work out how to fully expand the div, then scroll to the availible area. I want both processes to run at the same time, not one after the other.
Is this possible with jquery, and if it is, can someone please explain how.
Check out this fiddle: JsFiddle
I am calling the events, to display (show, fadeIn, slideDown, etc..) and scroll to element, when the $(document) is ready.
I placed timers in milliseconds for the display function at 3 seconds, and the scroll to at 4 seconds. You can adjust these times as necessary to display your hidden element as you see fit.
CSS
#container{height:850px;background-color:red;width:300px;text-align:center; }
#bottomDiv{display:none;position:relative;top:400px;width:260px;height:200px; background-color:dodgerblue;margin:20px auto;border: 1px solid #000000;text-align:center;}
HTML
<div id="container" style="height:1500px;background-color:red;width:300px;">
<p>I'm opening a div and scrolling below</p>
<div id="bottomDiv" class="tempCss">Bottom Div</div>
</div>
SCRIPT
$(document).ready(function(){
$("#bottomDiv").slideDown(3000);
$('html, body').animate({ scrollTop: $("#bottomDiv").offset().top }, 4000,function(){
});
});

slide down height like accordion

Guys i am working on a div which shows a calender by onclick().
I used toggle method to show and this that calender.
But while scrolling down i want to make the height of the div to change like this accordion.
I want to move my div a little above so that the calender will be visible to the user.
Any ideas to animate the height which is used in that accordion?
Check this
[http://jsfiddle.net/vivekdx/VVP3v/2/]
I like to move the calender when i click "Show me the calender"
try this...
$('html, body').animate({ scrollTop: $('#calender').position().top }, 'slow');
here is the fiddle..
http://jsfiddle.net/VVP3v/5/
you are using slide toggle... so the effect might not look as it is in live.. :)

How to open a div with slideUp in jquery

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.

How to make to the top of the page button in javascript?

I would like to know how to make a jquery button with the function scrooling to the top of the page. This button is usually found on the bottom of the page.
Preferably, is there a module for Drupal 6.0?
Thanks in advance for any help.
$('#scroll-to-top').click(function() {
$('html, body').scrollTop(0);
});
If you want it to scroll up nicely, do this:
$('#scroll-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
Is there a reason you need to use javascript for this? You can do it purely through html by setting an anchor at the top of the page:
<a name="top"></a>
and then wherever you want to provide a link to the top you can use a regular a tag with an href:
Top!
hope this helps.
Easiest way is to add an id to the html/body like..
<html id="top">
..and then add a link to it..
Top
While a lot of people do put it at the bottom, lately I've seen a lot of people put it fixed on the page, and and showing it when you scroll down a little, like this.
Don't use Javascript. Add a <a name="top"></a> to the top of your page, and for the clickable link use Top.
You can achieve the same thing with jQuery and scrollTop, but you shouldn't.
You also probably don't need a "Top" button. Nobody uses them, and they don't add any useful functionality to your site. There is already a "top" button on the keyboard, "Home".

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