Databases
StackOverflow2013
Postsdbo
POHow to use JS for "active page" status class
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use JS for "active page" status class
    text
    copied!<p>My website uses a css navigation similar to this tutorial, <a href="http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/" rel="nofollow">http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/</a> </p> <p>It's a single page website.</p> <p>I need to make it so when you click a link and it scrolls down to it's relevant content, that the my class named "active" will be applied to the markup.</p> <p>This is what I have attempted so far:</p> <pre><code>aObj = document.getElementById('navigation').getElementsByTagName('a'); for(i=0;i&lt;aObj.length;i++) { if(document.location.href.indexOf(aObj[i].href)&gt;=0) { aObj[i].className='active'; } } } window.onload = function() { if (window.location.hash.length &gt; 1) { page = window.location.hash.split("#")[1]; load(page); } } </code></pre> <p>I don't know JS and this is out of my comfort zone. Thanks</p> <p><strong>EDIT</strong></p> <p>A friend pointed me to this website <a href="http://imakewebthings.github.com/jquery-waypoints/" rel="nofollow">http://imakewebthings.github.com/jquery-waypoints/</a>.</p> <p>A brief overview of how my page is setup:</p> <pre><code>&lt;div id="home"&gt; &lt;h1&gt;Homepage&lt;/h1&gt; &lt;/div&gt; &lt;div id="portfolio"&gt; &lt;h1&gt;Portfolio&lt;/h1&gt; &lt;/div&gt; &lt;div id="contact"&gt; &lt;h1&gt;Contact Us&lt;/h1&gt; &lt;/div&gt; &lt;div id="navigation"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#home"&gt;home&lt;/a&gt;&lt;li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>It still will not add the class to the markup, any suggestions?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload