I want to make a scroll effect to my web page:
The content of my page:
<div id="first">
Content 1
Switch
</div>
<div id="second">
Content 2
</div>
Obviously, when I click to Switch, the browser screen will switch from div#first to div#second immediately.
However, I want to create an effect that make div#first to switch smoothly and slide to div#second (not immediately). Moreover, I also want to create a scroll effect. When the users are in div#first and scroll down, the browser screen will automatically slide to div#second and vice verse.
How can I do that with javascript (or jQuery if necessary)?
Yes, you can do that using animate method
$("a").click(function(){
$('html, body').animate({
scrollTop: $("#second").offset().top
}, 900);
})
Here is the Jsfiddle
Hope it helps :)
Related
I have a function that scrolls to an element when a button is clicked. The problem is this does not work correctly on mobile. Only when at the top of the page and clicking the button, it scrolls to the correct position. But if I scroll to any other position, the function somehow gets affected and the page scrolls to a different position than the element. Why? On desktop it works fine.
My jquery:
$('.stelsamenknop').click(function(e){
$('html, body').animate({
scrollTop: $("#aantalenformaat").offset().top - 20
}, 1000);
});
How can I make sure it always scrolls to the element aantalenformaat no matter what position the user is scrolled to on the page?
The button html:
<a class="stelsamenknop" href="javascript:void(0);"><i class="pr-1 icon-cart"></i> Stel je product samen</a>
And the element further down the page:
<form id="aantalenformaat" method="post">
Targeting an element specifically or even a fixed offset isn't going to work for all screen sizes. Unless you're accepting of the "close enough" approach. Take into account the changes in element height adapting to the screen size plus any changes to the margins/padding that are present.
I am using .load() to refresh the contents of a div every 5 seconds.
When the div updates, the whole page will scroll back up to the top. Is there any way to prevent this from happening?
<body>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<div main-title>Title</div>
<paper-button class="custom white" raised>Log Out</paper-button>
</app-toolbar>
</app-header>
<div id="loadcards"></div>
</body>
$("#loadcards").load("getGraph.php");
$(document).ready(function(){
setInterval(function(){
$("#loadcards").load("getGraph.php");
},5000);
});
Your page scrolls back to the top when you reload because your browser very briefly does not have any content for your div. This causes the content of your page to become too small to require a scrollbar, but when the content is reapplied it might grow large enough to require a scrollbar yet again.
Option 1
You could set the Y offset to the top of your page everytime before the reload is called, then scroll back to that offset whenever the page finishes reloading (or at least as far down as possible if the page is smaller than before).
You can obtain the current offset from the top of the window with the following code:
var offsetY = $(window).scrollTop();
If you want to scroll back to where you were before, you can do so by calling the following:
$('html, body').animate({
scrollTop: $(this).offset().top
}, 300);
This will gradually scroll, but you can set 300 to 0 if you want it to scroll instantly.
Depending on the efficiency with which your page loads, you'll probably still see a jump in the page contents.
Option 2
You can alternatively put your entire DIV inside a container with a fixed height, and reload the contents inside. You should set at least a min-height on the container div.
<div style="min-height: SOME_VALUE">
<div id="loadcards"></div>
</div>
Set SOME_VALUE to whatever comes closest to your actual page size. This should prevent the page jump as well, but will cause your page to have a minimal height even when the actual contents are smaller.
Option 3
The most advanced solution would be to use a container DIV and set the height to whatever the LoadPage height is just before you reload. This way it will only reset AFTER you reload your page.
<div id="cardscontainer" style="min-height: SOME_VALUE">
<div id="loadcards"></div>
</div>
With the following changes to your JS:
setInterval(function(){
$("#loadcards").load("getGraph.php");
$('#cardscontainer').height($('#loadcards').height());
},5000);
EDIT: I swapped the 2 functions inside the SetInterval callback function because it would result in weird behaviour if the LoadCards DIV would be smaller than before.
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(){
});
});
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.
I was wondering if anyone knows if there was a javascript or something that scrolls a site left right up and down on a click.
For example I want to create a site with multiple divs. Look at photo below.
I want each div to fit to screen and div 1 being the main div, the starting point. Say that I had a link in the menu for biography and the content for biography was in div 4 and someone click biography, I want the site to move down to div 3 and then right to div 4 and the same thing goes for div 4 and all the divs. When someone clicks a link in the divs I want the site to scroll in a direction I specify, is this possible.
Left Right Up Down
The jquery animate function is the right way.
Here you can find a simple and clear tutorial on how to use it: http://gazpo.com/2012/03/horizontal-content-scroll/
The tutorial is for horizontal scroll only, but you can easily extend to scroll your page in both directions (vertical and horizontal at the same time).
Yes, they are:
.scrollLeft()
.scrollRight()
With jQuery, you can animate the body's scrollTop value to scroll up and down:
$("html,body").animate({
scrollTop: $("#bio").offset().top
}, 1000);
The above code will scroll to the element with the id of #bio.
In terms of scrolling sideways, I supposed you could use a little trick. Set the body's overflow-x to hidden to hide anything that overflows to the right of the browser viewport. Then you can adjust the margin-left of body to "scroll" to the right or left. But, of course, this removes the ability for users to scroll through all of your divs.
$("body").animate({
marginLeft: "-100%"
}, 1000);
you can use jquery animate function ,it will give you more control
$('#div').animate({
left: '+=50'
}, 5000, function() {
// Animation complete.
});
read more from -
http://api.jquery.com/animate/