How to automatically scroll when div expands at bottom of page? - javascript

Lately I have come into a dead end. I'm trying to expand the footer (#footernotes) and that works, it's basically a div behind the body (done with z-index) and when you click on a button it moves down. The scroll bar goes with it too, meaning that the page is now longer.
But what I'm trying to do is to make the viewport move with the expanded div. What happens now is that when I press the button (.secret) the div (#footernotes) comes in but it is still out of the viewport UNLESS you manually scroll to view the longer page.
So to some it up, how do you make the viewport automatically scroll down after you expanded the page? In other words, how do you make the viewport stay at the bottom of the page.
Here is my code:
<script>
$(document).ready(function(){
$('.secret').click(function(){
$("#footernotes").animate({top: "100px"}, 1000);
return false;
});
});
</script>
<div id="footer">
</div>
<div id="footernotes">
</div>
</div> <!-- end #footer -->
And the CSS for #footernotes
#footernotes {
background-color: red;
width: 100%;
position: relative;
top: -80px;
height: 150px;
z-index: -400;
}
EDIT: While typing up the question I figure out the answer, you have to use the scrollTop. I have added the line code in the example below:
<script>
$(document).ready(function(){
$('.secret').click(function(){
$("#footernotes").animate({top: "100px"}, 1000);
$('body,html').animate({scrollTop: "210px"},1000);
return false;
});
});
</script>
You can still answer this if you think there is a better way, I just thought I'll leave this question posted in case other people have the same question.

document.getElementById('divID').scrollIntoView();
try and see if that would do the job.

It can be done using Jquery method .focus(). just need to add
$(divname / .class / #id).focus();
and it would be done.

Related

Hiding background elements is a good idea?

I have a mobile website. It's ajax based and when clicking a row from a table in the main screen, a div is populated with ajax data and then fades in, occupying the whole window, in fixed position. Then the user can navigate the div like if it's a separate window but can back out to the main table (fading out the fixed div). So, when the user navigate the fixed div, in reality there is also the main page body in the background. Would disabling/hiding the background main page make the website more lightweight for a mobile or not? The structure is similar to:
<html>
<head>
<script>
function navigateIn(url){
$.get(url,function(data){ //get data from url
$('#navigate').html(data); //put data into div
$('#navigate').fadeIn(200,function(){ //fade in div
//Now, after div is faded in, hide the background:
$('#main').css('overflow','hidden'); //Is this helpful?
$('#main').css('visibility','hidden'); //Is this helpful?
$('#main').css('display','none'); //Is this helpful? This void the scrolltop of the body, so it's not my greatest choice
});
});
}
function navigateOut(){
//Display the main page before back out!
$('#main').css('overflow','');
$('#main').css('visibility','');
$('#main').css('display','');
$('#navigate').fadeOut(200);
}
</script>
<style>
#navigate {
position: fixed;
height: 100%;
width: 100%;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}
</style>
</head>
<body>
<div id="main">
<button onclick="navigateIn('http://www.test.com');">Navigate In!</button>
</div>
<div id="navigate"></div>
</body>
</html>
Here's a jsfiddle which is showing what I'm talking about: jsfiddle
But the effect is a bit different because it's not full screen view.
I don't actually know how to test by myself if it's helpful or not (or even worse) to hide the content. So I ask to you.
PS: I know it's not a beautiful effect when fading in, but in reality I made a slideIn from right extension, so it's much better...

Prevent div from extending scrollbar

Take the following example:
https://jsfiddle.net/atg5m6ym/5079/
Here, you have to scroll down a bit to see the message "Hello!". I also animated a div to move down beyond the screen:
$("div").animate({top: '3000px'}, 6000);
You can see how the scrollbar changes and we now have a much larger page to scroll through.
Now, I want users to be able to scroll down to the "Hello!" text, if the text is beyond the user's screen. However, I don't want the div to extend the vertical scrollbar once it reaches the bottom of the screen. Rather, I want the div to continue moving down beyond the screen, with the scroll bar remaining unchanged. This way, the scrollbar could not follow it.
Doing "overflow-y: hidden" would prevent users from scrolling downwards on their own choice and reading the "Hello!" Is there anything I can do to accomplish both of these using JS (preferably jQuery) or CSS?
EDIT: I still want the div to exist, so I don't want to fade it out. If I had a div that returns afterward or travels in an elliptical orbit, I would like it to still reappear when it reenters the screen, but not to affect the scrollbar.
This will make div travel to whatever the Y position of the paragraph is, and after that gets faded out:
$(document).ready(function() {
var p_pos = $("p").offset().top;
$("div").animate({top: p_pos}, 6000).fadeOut();
});
Alright, try the following:
<div id="everything">
<div id="orb"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
<p>
Hello!
</p>
</div>
And in your css:
#everything {
display: inline-block;
position: relative;
width: 100%;
height: 800px;
max-height: 800px;
overflow-y: hidden;
background-color: #ccc;
}
Make sure to animate $("#orb") instead of just $("div") (and rename it in your css.
There you go. Just add to the body and set the div position to
body {
overflow: hidden
}
div {
bottom: 0;
}
https://jsfiddle.net/atg5m6ym/5082/

JQuery slideUp and slideDown the whole <section>

Good night, morning, afternoon...
I'm developing a website that the whole content slides up and down... I have thought in many possibilities but still couldn't find an answer. Note that the index/intro/main page is the second section. My inspiration is :
http://www.pulpdesign.it/
Thanks , in advance.
<section class="tips-content">
</section>
<section id="intro">
<h1 id="intro-logo">bla</h1>
<span id="title">blabla</span>
<nav id="navigation">
<span class="curriculum"></span><span id="curriculum">currículo</span>
<span id="contact">agendamento</span><span class="contact"></span>
<span id="services">serviços</span><span class="services"></span>
<span id="tips">dicas</span><span class="tips"></span>
</nav>
</section>
<section id="curriculum-content">
<div style="height:100%; background:red;">
</div>
</section>
<script>
$(document).ready(function(){
$("#go_curriculum").click(function(){
$(".tips-content").slideDown("slow");
});
$("#go_tips").click(function(){
$("#curriculum-content").slideUp("slow");
});
});
</script>
</body>
I'm the developer who wrote that site :)
First, thanks for taking that as inspiration!
Then, to answer to your question, you'll need, as CP510 said, a general wrapper with
overflow:hidden; height: 100%; width: 100%
I used the body tag, that actually isn't the best choice, it's better to use a
and inside that container you'll have all of your section with
position: absolute;
width: 100%;
height: 100%;
because the you'll have to animate the
scrollLeft/scrollTop
properties of the container with jQuery, and using body as main container I had to deal with some safari's bugs.
Another trick is to think about your sections as the sides of an opened cube. So your main section won't be at
top: 0; left: 0
but at
top: the-height-of-the-section-above-the-home;
left: the-width-of-the-section-to-the-left-of-the-home;
and so on with the other sections.
I hope I made it quite clear, my English isn't so good. If you have any other questions just ask!
This is a tricky one. But I have done it. The basic idea is to use a raw $().animate() function to move all this fun stuff around. Since slide up/down are just helper functions for this.
The next requirement is that the sections are absolutely positioned in a wrapper. It's a bit wonky but heres the psuedo layout
<DIV THAT TAKES THE WHOLE SCREEN WITH HIDDEN OVERFLOW>
<DIV THAT INCLUDES ALL THE SECTIONS POSITIONED ABSOLUTE>
<CONTENT DIVS POSITIONED CORRECTLY>
</DIV>
<DIV>
Now what you do is move the absolutely positioned content container (the second div) to show the section using jquery.
$('#content-container').animate({top: POSITION_TOP+'px',left: POSITION_LEFT+'px'},'slow',cleanup_callback);
Now the POSITION_TOP and POSITION_LEFT placeholders could be a variable that gets set based on the navigation button thats hit. The cleanup_callback is an optional function if you want something to happen when the document arrives on that location.
Thats the jQuery way. There is a CSS way by using classes and transitions. It works by changing the holding containers class to basically declare where the target page is, then because CSS transitions are on, the movement is animated. Each of these "navigation classes" basically just dictate the top and left position properties.
Have a look on this EXAMPLE just to understand the basic idea on how this logic works.
This example has 3x2 full page divs( 6 pages total) and we are not using any JavaScript at all it's all CSS and HTML.
Please note that in order to remove the scrollbars from the page you will need to uncomment the below in the body style
body {
white-space: nowrap;
/*overflow:hidden; UNCOMMENT THIS*/
}
jQuery for a smooth animation
var $root = $('html, body');
$('a').click(function () {
$root.animate({
scrollLeft: $($.attr(this, 'href')).offset().left,
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});
You can also have a look on this Website as it is very similar to what you want to achieve

Un-hide div when window is scrolled down using jQuery and CSS

I'm trying to display a small 'back to top' div when I scroll down on my site.
Here is the code for my div (the style is inline whilst in development until I go through and move it all to a base.css file later on).
<div id="backToTop" style="position:fixed; right:10px; top: 200px; width: 50px; height:50px; color:#ffffff; background-color:#000000; visibility:hidden">Back to Top</div>
Fairly straightforward as you can see. I'm then trying to use jQuery to detect when the window has been scrolled down slightly to then show the div:
$(window).scroll(function(){
if($document).scrollTop() > 0){
$('#backToTop').show();
}else{
$('#backToTop').hide();
}
});
My problem is that the script doesn't appear to be triggered. When I scroll down the page, the div does not appear.
I have additional jQUery on my page for form validation so I have tried including this alongside that function within:
$().ready(function(){ /* Code goes here */ }
I've also tried including it outside of this but I've had no joy. I'm using Twitter bootstrap for the remainder of my page.
If anyone could point me in the direction of why this perfectly valid code isn't working, that would be great.
Cheers,
J
You have a typo in your code:
if($document).scrollTop() > 0){
There's a missing (:
if( $(document).scrollTop() > 0 ) {
^
Here's a working example: http://jsfiddle.net/U7scm/
Edit
I also noticed that you're setting visibility: hidden. jQuery's .show() and .hide() functions will toggle the display property, so use display: none instead of visibility: hidden

Mousewheel navigation through page blocks

For instance I have a page of 5 blocks:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
Each block is 100% width and height of a window, the red one(1) is visible.
.div1, .div2, .div3, .div4, .div5 {
width: 100%;
height: 100%;
}
I want to navigate throgh those blocks using mouse wheel. When i scroll down the second block animates from bottom, a little more down the third one animates. And I don't want scroll bar to be visible.
I know I should use jquery mousewheel plugin and choose an action depends on delta. But don't see the whole situation.
I hope my question is clear. Would appreciate any help and websites who already implemented such kind of naviation to dig in it.
You should be using jquery scroll event as shown here
$('#target').scroll(function() {
//code goes here
})
also you can hide scrollbar as shown here
or you can try infinite scroll plugins.
First of all, each of your blocks should have "position: fixed". The first block would have top: 0px; bottom 0px; left 0px; right 0px; While for the block below that, left and right are still 0, but top and bottom are now offset by the height of your window (you can get the height of your window with $(window).innerHeight(); And so on and so forth with the other blocks.
Then whenever the user is scrolling (using the scroll events already given in other answers) you simply modify the top and bottom (equally) of all your blocks by however much you want each time the event fires.
Cheers

Categories

Resources