Scrolling Down vs. Multiple Pages Long Page Scrolling Down vs. Multiple Pages

ViewPort Viewport = the active port through which viewing your page – i.e. the browser window Can be resized while person viewing your site Use dimensions of the viewport to size elements

A New Units Related to viewport vh: viewport height vw: viewport width Value is a number representing % of viewport Example: Div’s height is 20% of the viewport height

Navigation on the side

HTML

Build the Framework 1st Don’t worry about content Make every div (or other page divider element) a different color so you can easily see them

Body Structure Navigation with Links to Bookmarks based on div ID’s 1 big div around all other page content Each div will be a separate panel that takes up full height of screen

CSS

body

Only take up left 20% of page width Navigation Only take up left 20% of page width Keeps it in place at top left of screen even when other content scrolls

#wrap – outer div around other content So doesn’t ever overlap the navigation Takes up 80% (right) of screen width

All 3 have this class – will take up full height of viewport (100%) Panel Div’s All 3 have this class – will take up full height of viewport (100%) Set to different colors so can easily see their edges while working on them

Navigation on Top: Only Changes shown It would be much better if these links were styled to make them go ACROSS the top instead of down in a list…but we’ll leave that for you to figure out

navigation Stretch across full viewport Height is top 10% of viewport Still want to keep it in place while scrolling happens

No longer needs width restricted #wrap – outer div No longer needs width restricted

.panel Stretch across full height of viewport Keep content out of way of top 10% of viewport so nav doesn’t hide it

Once you have everything in place, you can style it to actually look good!

The Fancy Stuff Animated Scrolling

A Tiny Piece of Script made of jQuery, a JavaScript library, to make the page animate the scrolling when links in your nav are clicked Place it in the head section

A version of this you can copy and paste is on the next page

<script src="https://ajax. googleapis. com/ajax/libs/jquery/2. 1 $(document).ready(function () { $("a").click(function (event) { event.preventDefault(); var targetID = $(this).attr('href'); $('html,body').animate({ scrollTop: $(targetID).offset().top }, 1000, 'swing'); }); </script>