Docs

How to Use ScrollSpy

[edit] Please Note

These docs are now deprecated, we have a new Support area located here

(Difference between revisions)
m
 
(12 intermediate revisions by one user not shown)
Line 1: Line 1:
−
<span class="btn btn-danger">New in PageLines 2.2</span>
 
 
<html>
 
<html>
−
<div class="row">
+
<div class="row">
−
  <div class="span12">
+
<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.
+
<div class="page-header">
−
<br><br>
+
<h1>ScrollSpy
−
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.
+
<small>Lots of Info?  Neatly Scrolled.</small>
−
<blockquote class="pull-right"><p>More info on template setup <a href="http://www.pagelines.com/wiki/How_to_Use_the_Template_Setup#Editing_Page_Templates">here</a></p></blockquote>
+
</h1>
−
<br>
+
</div>
−
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.
+
</div>
−
  </div>
+
</div>
−
</div>
+
<div class="row">
−
</html>
+
<div class="span7">
−
----
+
<a class="btn btn-danger" href="#">New in PageLines 2.2</a>
−
== How it Works ==
+
<ul class="thumbnails unstyled">
−
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 [http://www.example.com/ PageLines Framework 2.2 Demo Site].
+
<li class="span7">
−
<html>
+
<div class="thumbnail">
−
<div class="row">
+
<a href="#">
−
  <div class="span4">
+
        <img class="pl-imageframe" src="http://placehold.it/300x250" alt="Place Holder">
−
        <img src="http://placehold.it/200x200" alt="Place Holder">
+
        </a>
−
        <figcaption>Placeholder image for ScrollSpy Content sreenshots</figcaption>
+
        <div class="caption" style="text-align:center;">
−
  </div>
+
        <p>Placeholder image for Scrollspy Content Image</p>
−
  <div class="span4">
+
        </div>
−
        <img src="http://placehold.it/200x200" alt="Place Holder">
+
        </div>
−
        <figcaption>Placeholder image for ScrollSpy Content sreenshots</figcaption>
+
        </li>
−
  </div>
+
        </ul>   
−
  <div class="span4">
+
        </div>   
−
        <img src="http://placehold.it/200x200" alt="Place Holder">
+
<div class="span5">
−
         <figcaption>Placeholder image for ScrollSpy Content sreenshots</figcaption>
+
<div style="padding:10px;
−
  </div>
+
background-color: transparent;
−
</div>
+
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.
 +
<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>
 +
<div class="alert alert-info">
 +
<p>More info on template setup <a href="http://www.pagelines.com/wiki/How_to_Use_the_Template_Setup#Editing_Page_Templates">here</a></p>
 +
</div>
 +
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.
 +
  </div>
 +
</div>
 +
<div class="row">
 +
<div class="span12">
 +
<div class="page-header">
 +
<h1>How it Works</h1>
 +
</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>.<br>
 +
<div class="row">
 +
  <div class="span4">
 +
  <div class="thumbnails>">
 +
  <a href="#" class="thumbnail">
 +
        <img class="pl-imageframe" src="http://placehold.it/200x200" alt="Place Holder">
 +
        </a>
 +
        <div class="caption" style="text-align:center;">
 +
        Placeholder image for ScrollSpy Content sreenshots
 +
        </div>
 +
        </div>
 +
        </div>
 +
  <div class="span4">
 +
  <div class="thumbnails>">
 +
  <a href="#" class="thumbnail">
 +
        <img class="pl-imageframe" src="http://placehold.it/200x200" alt="Place Holder">
 +
        </a>
 +
        <div class="caption" style="text-align:center;">
 +
        Placeholder image for ScrollSpy Content sreenshots
 +
        </div>
 +
        </div>
 +
        </div>
 +
<div class="span4">
 +
  <div class="thumbnails>">
 +
  <a href="#" class="thumbnail">
 +
        <img class="pl-imageframe" src="http://placehold.it/200x200" alt="Place Holder">
 +
        </a>
 +
        <div class="caption" style="text-align:center;">
 +
        Placeholder image for ScrollSpy Content sreenshots
 +
        </div>
 +
        </div>
 +
        </div>
 +
        </div>
 +
         </div>
 +
</div>
 +
<div class="row">
 +
<div class="span8">
 +
<div class="page-header">
 +
<h1>Other Uses</h1>
 +
</div>
 +
Integer pharetra, tortor nec volutpat accumsan, ligula enim consectetur erat, porta imperdiet felis orci eget purus. Phasellus non auctor magna. Vestibulum at augue sit amet quam scelerisque rutrum. Aliquam erat volutpat. Cras lectus dolor, tincidunt laoreet molestie ac, vehicula sed ante.
 +
<p>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.</p>
 +
  </div>
 +
  <div class="span4">
 +
<ul class="thumbnails unstyled">
 +
<li class="span4">
 +
<div class="thumbnail">
 +
<a href="#">
 +
        <img class="pl-imageframe" src="http://placehold.it/200x200" alt="Place Holder">
 +
        </a>
 +
        <div class="caption" style="text-align:center;">
 +
        <p>Placeholder image for ScrollSpy Content sreenshots</p>
 +
        </div>
 +
        </div>
 +
        </li>
 +
        <li class="span4">
 +
<div class="thumbnail">
 +
<a href="#">
 +
        <img class="pl-imageframe" src="http://placehold.it/200x200" alt="Place Holder">
 +
        </a>
 +
        <div class="caption" style="text-align:center;">
 +
        <p>Placeholder image for ScrollSpy Content sreenshots</p>
 +
        </div>
 +
        </div>
 +
        </li>
 +
        </ul>       
 +
  </div>
 +
  </div>
 
</html>
 
</html>

Latest revision as of 02:54, 17 May 2012

ScrollSpy Lots of Info? Neatly Scrolled.

New in PageLines 2.2
  • Place Holder

    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.

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

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.

How it Works

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 PageLines Framework 2.2 Demo Site.
Place Holder
Placeholder image for ScrollSpy Content sreenshots
Place Holder
Placeholder image for ScrollSpy Content sreenshots
Place Holder
Placeholder image for ScrollSpy Content sreenshots

Other Uses

Integer pharetra, tortor nec volutpat accumsan, ligula enim consectetur erat, porta imperdiet felis orci eget purus. Phasellus non auctor magna. Vestibulum at augue sit amet quam scelerisque rutrum. Aliquam erat volutpat. Cras lectus dolor, tincidunt laoreet molestie ac, vehicula sed ante.

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.

  • Place Holder

    Placeholder image for ScrollSpy Content sreenshots

  • Place Holder

    Placeholder image for ScrollSpy Content sreenshots

Retrieved from "http://www.pagelines.com/wiki/index.php?title=How_to_Use_ScrollSpy&oldid=5303"