Skip to content
This repository was archived by the owner on Jun 18, 2022. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
fcd964a
Typo fixes
NickDickinsonWilde Nov 12, 2014
4d043fe
standard whitespace as spaces rather than tabs
NickDickinsonWilde Nov 15, 2014
1e74d51
jslint/hint setup
NickDickinsonWilde Nov 15, 2014
70517c9
proper invocation order for safe $ usage.
NickDickinsonWilde Nov 15, 2014
61b531b
use strict!
NickDickinsonWilde Nov 15, 2014
44d4428
remove unnecessary check which usually fails incorrectly
NickDickinsonWilde Nov 15, 2014
9205a7c
use one comma seperated var statement (also adding some variables tha…
NickDickinsonWilde Nov 15, 2014
c9749d9
remove unused event argument, jshint formating fixes
NickDickinsonWilde Nov 15, 2014
083020e
reset original css for any that we may change.
NickDickinsonWilde Nov 15, 2014
d73bc5d
Some more jshint changes (move function out of containing function to…
NickDickinsonWilde Nov 15, 2014
da3c045
check if options are set before using
NickDickinsonWilde Nov 15, 2014
9731a76
use radix with parseInt to be safe!
NickDickinsonWilde Nov 15, 2014
9d86b34
reworked topMargin settings - radix values and improved error message
NickDickinsonWilde Nov 16, 2014
4c465a4
add a 'topPadding' argument as well as the top margin
NickDickinsonWilde Nov 16, 2014
b35b6b3
add a topPaddingElement argument - if set get the top padding amount …
NickDickinsonWilde Nov 16, 2014
2596bd6
improved stuck position css - make sure it is on top so that there ar…
NickDickinsonWilde Nov 16, 2014
f2c089b
rest of improvements - middle commits may or may not work since dif d…
NickDickinsonWilde Nov 16, 2014
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ <h2>Simple Integration</h2>
<div class="col-lg-4">
<img src="images/onepager.png">
<h2>The "One Pager"</h2>
<p>Although <b>stickUp</b> was made to work on any kind of website, it was originally designed for the <i>"one-pager"</i> style of websites. By using CSS the sticky navigation menu item will be highlighted as it's correlating content is crolled in and out of view.</p>
<p>Although <b>stickUp</b> was made to work on any kind of website, it was originally designed for the <i>"one-pager"</i> style of websites. By using CSS the sticky navigation menu item will be highlighted as it's correlating content is scrolled in and out of view.</p>
<p><a class="btn btn-default" href="#one-pager">View details &raquo;</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
Expand All @@ -100,7 +100,7 @@ <h2 class="featurette-heading">Updates</h2>
</div>
<div class="col-lg-offset-1 col-lg-10">
<h3>Beta version is available! <small><b><i>Nov 1st, 2013</i></b></small></h3>
<p>The first version of the <b><i>stickUp</i></b> jQuery plugin has oficially been launched. This is still in Beta and there may be a few bugs, but they are will get sorted out in the coming weeks. Pleaes contact us if you experience any troubles. Check back often for updates on new features.
<p>The first version of the <b><i>stickUp</i></b> jQuery plugin has officially been launched. This is still in Beta and there may be a few bugs, but they are will get sorted out in the coming weeks. Please contact us if you experience any troubles. Check back often for updates on new features.
</p>
</div>
<div class="col-lg-offset-1 col-lg-10">
Expand All @@ -110,7 +110,7 @@ <h3>"One Pager" anchor functionality. <small><b><i>Oct 31st, 2013</i></b></small
</div>
<div class="col-lg-offset-1 col-lg-10">
<h3>In need of Margin... <small><b><i>Oct 30th, 2013</i></b></small></h3>
<p>When I initially made the plugin the goal was to make the element stick to the very top, but after deciding to make an official example page for it I realizd that I loved the look of a floating plugin. So I added a little feature called <b><i>marginTop</i></b> to the mix. This allows the element to be caught by it's margin rather than when it hits the top of the page.
<p>When I initially made the plugin the goal was to make the element stick to the very top, but after deciding to make an official example page for it I realized that I loved the look of a floating plugin. So I added a little feature called <b><i>marginTop</i></b> to the mix. This allows the element to be caught by it's margin rather than when it hits the top of the page.
</p>
</div>
<div class="col-lg-offset-1 col-lg-10">
Expand All @@ -124,14 +124,14 @@ <h3>stickUp is Alive! <small><b><i>Oct 29th, 2013</i></b></small></h3>
<div id="installation" class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">Installation Instructions.<br> <span class="text-muted">Made simple.</span></h2>
<p class="lead">Download or Clone the stickUp javascript file from GitHub. Unpack it into an appropriate directory on your web sever. Make sure you also have jQuery available. If you need information about jQuery please <a href="http://learn.jquery.com/about-jquery/how-jquery-works/">click here</a>.</p>
<p class="lead">Download or Clone the stickUp JavaScript file from GitHub. Unpack it into an appropriate directory on your web sever. Make sure you also have jQuery available. If you need information about jQuery please <a href="http://learn.jquery.com/about-jquery/how-jquery-works/">click here</a>.</p>
<p class="col-lg-offset-1"><a class="btn btn-large btn-primary" href="http://github.com/LiranCohen/stickUp">Visit GitHub</a><br><br></p>
<p class="lead">Now include the stickUp javascript file to load within your website. Do so by inserting the following code at the end of your footer. Make sure you're pointing to the correct location of the javascript file.
<p class="lead">Now include the stickUp JavaScript file to load within your website. Do so by inserting the following code at the end of your footer. Make sure you're pointing to the correct location of the JavaScript file.
</p>
<xmp>
<script src="js/stickUp.min.js"></script>
</xmp>
<p class="lead">Next, simply insert this code at the end of your footer under the stickUp javascript file we added in the last step. Alternitively, you could put the code into existing javascript. Replace <i>'.navbar-wrapper'</i> with the class of the element you would like to become sticky.
<p class="lead">Next, simply insert this code at the end of your footer under the stickUp JavaScript file we added in the last step. Alternatively, you could put the code into existing JavaScript. Replace <i>'.navbar-wrapper'</i> with the class of the element you would like to become sticky.
</p>
<xmp>
<script type="text/javascript">
Expand Down Expand Up @@ -159,7 +159,7 @@ <h2 class="featurette-heading">Installation Instructions.<br> <span class="text-
<h2 class="featurette-heading">The "One-Pager" navigation. <span class="text-muted"><br>Try it for yourself.</span></h2>
<p class="lead">You have a "one-pager" layout and would like for your sticky navbar to let the user know what they are currently viewing on the page. Simply follow these instructions in order to enable this functionality.</p>
<p class="lead">
<b>First,</b> make a list of the different elements within your page that you would like to have as ahcnor points.<br>
<b>First,</b> make a list of the different elements within your page that you would like to have as anchor points.<br>
</p>
<p class="lead">
<small><i>If these elements do not have an <b>"id="</b> attribute within the element please give them an ID and write it down.</i></small>
Expand Down Expand Up @@ -193,10 +193,10 @@ <h2 class="featurette-heading">The "One-Pager" navigation. <span class="text-mut
</script>
</xmp>
<p class="lead">
**The numbers above link the particular anchor ID with the menu item which it corrosponds to in order.
**The numbers above link the particular anchor ID with the menu item which it corresponds to in order.
<br><br>
<b>itemClass:</b> is the class of each sticky navigation menu items.<br>
<b>itemHover:</b> is the class which modifies the menu item to have a different appearence while it's corrosponding anchor is in view.
<b>itemHover:</b> is the class which modifies the menu item to have a different appearance while it's corresponding anchor is in view.
</p>
</div>
</div> <!-- END ONE-PAGER -->
Expand Down Expand Up @@ -250,18 +250,18 @@ <h2 class="featurette-heading">A little extra. <br><span class="text-muted">Addi
<div class="col-md-7">
<h2 class="featurette-heading">Wordpress.<br><span class="text-muted">Adding functionality.</span></h2>
<p class="lead">
Setting up stickUp in Wordpress is a breaze. We are also working on development of a Wordpress Plugin version of stickUp, which will allow for an easy backend to work with and include many features.
Setting up stickUp in Wordpress is a breeze. We are also working on development of a Wordpress Plugin version of stickUp, which will allow for an easy backend to work with and include many features.
</p>
<p class="lead">
It's exactly the same as setting it up on any other website, but here are exact instructions for Wordpress users.
</p>
<p class="lead">
<b>First,</b> you must download the stickUp javascript file <b><i>'stickUp.min.js'</i></b> and place it in a directory called <b><i>'js'</i></b> in your theme's directory. Create this directory if it doesn't already exist. You can get the file from our GitHub.
<b>First,</b> you must download the stickUp JavaScript file <b><i>'stickUp.min.js'</i></b> and place it in a directory called <b><i>'js'</i></b> in your theme's directory. Create this directory if it doesn't already exist. You can get the file from our GitHub.
</p>
<p class="col-lg-offset-1"><a class="btn btn-large btn-success" href="http://github.com/LiranCohen/stickUp">Visit GitHub</a><br><br></p>
<p>
<p class="lead">
<b>Next,</b> include the stickUp javascript file into Wordpress. Open the file within your teme that includes the footer. This is most likely <i>'footer.php'</i> or something of that nature, depending on the theme you're using.<br><br>
<b>Next,</b> include the stickUp JavaScript file into Wordpress. Open the file within your theme that includes the footer. This is most likely <i>'footer.php'</i> or something of that nature, depending on the theme you're using.<br><br>
Near the very bottom of the file above the <b><i>'&#60;/body&#62;'</i></b> tag and below the <b><i>'&#60;?php wp_footer(); ?&#62;'</i></b> tag insert the following code.
</p>
<xmp>
Expand All @@ -270,8 +270,8 @@ <h2 class="featurette-heading">Wordpress.<br><span class="text-muted">Adding fun
?>/js/stickUp.min.js"></script>
</xmp>
<p class="lead">
<b>Finally,</b> add the javascript code that enables stickUp on your Wordpress Theme. In my example I'm using the default theme <i>'Twenty Thirteen'</i>. You'll have to inspect your website's CSS for the correct IDs or Classes you may need.<br><br>
Directly below the code that we inserted in the last step, paste the following code snippit.
<b>Finally,</b> add the JavaScript code that enables stickUp on your Wordpress Theme. In my example I'm using the default theme <i>'Twenty Thirteen'</i>. You'll have to inspect your website's CSS for the correct IDs or Classes you may need.<br><br>
Directly below the code that we inserted in the last step, paste the following code snippet.
</p>
<xmp>
<script type="text/javascript">
Expand Down Expand Up @@ -336,7 +336,7 @@ <h3>E-Mail</h3>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- ### IMPORTANT ### stickUp javascript file -->
<!-- ### IMPORTANT ### stickUp JavaScript file -->
<!-- ######################################### -->
<script src="js/stickUp.min.js"></script>
<!-- ######################################### -->
Expand Down
Loading