How to Use ScrollSpy
(Difference between revisions)
m |
m |
||
| (2 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div class="row"> | <div class="row"> | ||
<div class="span12"> | <div class="span12"> | ||
| Line 12: | Line 7: | ||
</h1> | </h1> | ||
</div> | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="row"> | ||
| + | <div class="span7"> | ||
| + | <a class="btn btn-danger" href="#">New in PageLines 2.2</a> | ||
| + | <ul class="thumbnails unstyled"> | ||
| + | <li class="span7"> | ||
| + | <div class="thumbnail"> | ||
| + | <a href="#"> | ||
| + | <img class="pl-imageframe" src="http://placehold.it/300x250" alt="Place Holder"> | ||
| + | </a> | ||
| + | <div class="caption" style="text-align:center;"> | ||
| + | <p>Placeholder image for Scrollspy Content Image</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | <div class="span5"> | ||
| + | <div style="padding:10px; | ||
| + | background-color: transparent; | ||
| + | border-radius: 5px; | ||
| + | -moz-border-radius: 5px; | ||
| + | -moz-box-shadow: 0 0 5px #AAAAAA; | ||
| + | -webkit-box-shadow: 0 0 6px #AAAAAA; | ||
| + | box-shadow: 0 0 6px #AAAAAA;"> | ||
| + | <ul class="nav nav-list unstyled"> | ||
| + | <li class="nav-header">Other New Features</li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/How_to_Use_the_Grid">How to Use the Grid</a></li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/How_to_Use_Intro_Unit">Intro Unit</a></li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/How_to_Use_Masthead">Masthead</a></li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/PageLines_Shortcodes">PageLines Shortcode</a></li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/Introducing_PageLESS">PageLESS CSS</a></li> | ||
| + | <li class="active"><a href="#">ScrollSpy</a></li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/How_to_use_NavBar">NavBar</a></li> | ||
| + | <li class="divider"></li> | ||
| + | <li><a href="#">Help</a></li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="row"> | ||
| + | <div class="span12"> | ||
In PageLines Framework 2.2, we have added a new <a href="http://www.pagelines.com/wiki/Glossary#Section">Section</a> called ScrollSpy. The ScrollSpy section adds an additional navigation bar that automatically updates nav targets based on scroll position. It is also useful for jumping from one section of your page to another instantly. | In PageLines Framework 2.2, we have added a new <a href="http://www.pagelines.com/wiki/Glossary#Section">Section</a> called ScrollSpy. The ScrollSpy section adds an additional navigation bar that automatically updates nav targets based on scroll position. It is also useful for jumping from one section of your page to another instantly. | ||
<p>In order to get ScrollSpy working on your page, it needs to be enabled in the Drag and Drop menu, and in the <a href="http://www.pagelines.com/wiki/Glossary#Template_Setup">Template Setup</a> area.</p> | <p>In order to get ScrollSpy working on your page, it needs to be enabled in the Drag and Drop menu, and in the <a href="http://www.pagelines.com/wiki/Glossary#Template_Setup">Template Setup</a> area.</p> | ||
| Line 25: | Line 63: | ||
<h1>How it Works</h1> | <h1>How it Works</h1> | ||
</div> | </div> | ||
| − | ScrollSpy works within your Page's editor, as long as ScrollSpy is enabled on the template your page is using. For a more in depth look and tutorial on how to get ScrollSpy working on your page, please visit the new <a href="http://www.example.com/">PageLines Framework 2.2 Demo Site</a>. | + | ScrollSpy works within your Page's editor, as long as ScrollSpy is enabled on the template your page is using. For a more in depth look and tutorial on how to get ScrollSpy working on your page, please visit the new <a href="http://www.example.com/">PageLines Framework 2.2 Demo Site</a>.<br> |
<div class="row"> | <div class="row"> | ||
<div class="span4"> | <div class="span4"> | ||
| Line 38: | Line 76: | ||
</div> | </div> | ||
<div class="span4"> | <div class="span4"> | ||
| − | + | <div class="thumbnails>"> | |
| − | + | <a href="#" class="thumbnail"> | |
| − | <img src="http://placehold.it/200x200" alt="Place Holder"> | + | <img class="pl-imageframe" src="http://placehold.it/200x200" alt="Place Holder"> |
</a> | </a> | ||
| − | <div class="caption"> | + | <div class="caption" style="text-align:center;"> |
Placeholder image for ScrollSpy Content sreenshots | Placeholder image for ScrollSpy Content sreenshots | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
| − | + | <div class="span4"> | |
| − | + | <div class="thumbnails>"> | |
| − | + | <a href="#" class="thumbnail"> | |
| − | <img src="http://placehold.it/200x200" alt="Place Holder"> | + | <img class="pl-imageframe" src="http://placehold.it/200x200" alt="Place Holder"> |
</a> | </a> | ||
| − | <div class="caption"> | + | <div class="caption" style="text-align:center;"> |
Placeholder image for ScrollSpy Content sreenshots | Placeholder image for ScrollSpy Content sreenshots | ||
</div> | </div> | ||
Latest revision as of 02:54, 17 May 2012
ScrollSpy Lots of Info? Neatly Scrolled.
New in PageLines 2.2
-
Placeholder image for Scrollspy Content Image
In PageLines Framework 2.2, we have added a new Section called ScrollSpy. The ScrollSpy section adds an additional navigation bar that automatically updates nav targets based on scroll position. It is also useful for jumping from one section of your page to another instantly.
The ScrollSpy navigation bar will travel with your user as they scroll through your page, so it is best to position this section at the top of the Page Template. It is also important to remember that even though ScrollSpy is a navigation tool, it does not use Wordpress's Menu System, and needs to be configured manually.
In order to get ScrollSpy working on your page, it needs to be enabled in the Drag and Drop menu, and in the Template Setup area.
More info on template setup here
How it Works
Placeholder image for ScrollSpy Content sreenshots
Placeholder image for ScrollSpy Content sreenshots
Placeholder image for ScrollSpy Content sreenshots
Other Uses
Curabitur et nunc lectus, ac ultrices orci. Sed lacus massa, scelerisque ut blandit sed, hendrerit eget risus. Suspendisse velit nulla, vehicula vitae malesuada nec, euismod et metus. Aenean vel justo elit, nec dictum mauris. Nam cursus faucibus elit, non dapibus urna feugiat vitae. Cras porta elementum risus gravida mollis. Nam sed ipsum tellus.
-
Placeholder image for ScrollSpy Content sreenshots
-
Placeholder image for ScrollSpy Content sreenshots