Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I'm not sure what the waypoints plugin was doing, but I've refactored your code and it is working for me. Note that I took out the call to .waypoints, and changed your $('body').click() handler to be a more specific handler on the navigation link elements. This handler will scroll to each element and then will perform the removal and addition of the class correctly when the scrolling is done:</p> <pre><code>$(document).ready(function() { function highlightNav(navElement){ $("#navigation a").removeClass('active'); navElement.addClass('active'); } $('#navigation a').click(function(event){ var nav = $(this); var id = nav.attr('href'); $.scrollTo(id, 1000, { offset: { top: -75 }, axis: 'y', onAfter: function(){ highlightNav(nav); } }); return false; }); $(window).scroll(function(){ if($(this).scrollTop() == 0){ highlightNav($("#navigation a[href*='home']")); } }); $.fn.waypoint.defaults.offset = 75; $('.section h1.page_name').waypoint(function() { var id = this.id; var op = $('#navigation a[href = "#' + id + '"]'); if (op.length) { highlightNav(op); } }); // Fancybox $("a.zoom").fancybox({ 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); $("a.outside_shade").fancybox({ 'titlePosition' : 'outside', 'overlayColor' : '#000', 'overlayOpacity' : 0.9 }); $("a.inside_white").fancybox({ 'titlePosition' : 'inside' }); $("a.inside_shade").fancybox({ 'titlePosition' : 'over' }); // validation $("form").validate(); // nivo slider $('#slider').nivoSlider(); }); </code></pre> <p>In the html I added a default active class to the first link:</p> <pre><code>&lt;div id="navigation"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#home" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#who"&gt;Who Are We?&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#service"&gt;Our Services&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#features"&gt;Features&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#contact"&gt;Keep in Touch&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Also I noticed on the page you have your css defined <em>before</em> the reset.css is called in. That's usually bad practice you might want to make sure reset.css is always the very first css file pulled in. It doesn't appear to have affected the page much but sometimes you'll get weird results doing that.</p> <p>I made a jsfiddle of the results here: <a href="http://jsfiddle.net/RNsFw/2/" rel="nofollow">http://jsfiddle.net/RNsFw/2/</a></p> <p>the waypoints plugin isn't needed anymore I think. I didn't change the fancybox or validation stuff because i'm not sure what those are doing and it wasn't really part of your issue.</p> <p>I tested it in firefox and Chrome. Let me know if you have questions :)</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