Databases
StackOverflow2013
Postsdbo
POMore efficient way to write this Javascript (waypoints)?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMore efficient way to write this Javascript (waypoints)?
    text
    copied!<p>Pardon the JS noob question, but (while my code is working as expected) I'm sure there must be a better/more efficient way to write it. Suggestions are greatly appreciated.</p> <p>Here's what's happening: I have a Wordpress menu on a one-page vertical scrolling theme (custom). I'm using waypoints.js to highlight the corresponding nav button for the current visible section as the page scrolls up, down,or when a navigation item is clicked.</p> <p>I've set the home navigation item to a class of "active" on page load, and am highlighting each section manually by adding/removing the "active" class at each waypoint. For the sake of automating this a bit, I tried using $this rather than the div id, but haven't been able to get it right yet.</p> <p>Thanks in advance for any help. <strong>Here's the code in question:</strong></p> <p><a href="http://jsfiddle.net/vCP4K/" rel="nofollow">http://jsfiddle.net/vCP4K/</a></p> <p><strong>My current clumsy solution:</strong></p> <p><em>// Make home button active on page load</em></p> <pre><code>$('li.home-btn a').addClass('active'); </code></pre> <p><em>// Change classes as divs hit the waypoint on the way DOWN or on click</em></p> <pre><code>$('section#home').waypoint(function(down) { $('.nav li a').removeClass('active'); $('li.home-btn a').addClass('active'); }, {offset: -1}); $('section#services').waypoint(function(down) { $('.nav li a').removeClass('active'); $('li.services-btn a').addClass('active'); }, {offset: 1}); $('section#work').waypoint(function(down) { $('.nav li a').removeClass('active'); $('li.work-btn a').addClass('active'); }, {offset: 1}); $('section#about').waypoint(function(down) { $('.nav li a').removeClass('active'); $('li.about-btn a').addClass('active'); }, {offset: 1}); $('section#blog').waypoint(function(down) { $('.nav li a').removeClass('active'); $('li.blog-btn a').addClass('active'); }, {offset: 1}); $('section#contact').waypoint(function(down) { $('.nav li a').removeClass('active'); $('li.contact-btn a').addClass('active'); }, {offset: 1}); </code></pre> <p><em>// Change classes as divs hit the waypoint on the way UP or on click</em></p> <pre><code>$('section#home').waypoint(function(up) { $('.nav li a').removeClass('active'); $('li.home-btn a').addClass('active'); }, {offset: -1}); $('section#services').waypoint(function(up) { $('.nav li a').removeClass('active'); $('li.services-btn a').addClass('active'); }, {offset: -1}); $('section#work').waypoint(function(up) { $('.nav li a').removeClass('active'); $('li.work-btn a').addClass('active'); }, {offset: -1}); $('section#about').waypoint(function(up) { $('.nav li a').removeClass('active'); $('li.about-btn a').addClass('active'); }, {offset: -1}); $('section#blog').waypoint(function(up) { $('.nav li a').removeClass('active'); $('li.blog-btn a').addClass('active'); }, {offset: -1}); $('section#contact').waypoint(function(up) { $('.nav li a').removeClass('active'); $('li.contact-btn a').addClass('active'); }, {offset: -1}); }); </code></pre>
 

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