Highlight Current Section of a (One)Page

Freeway
10

Hi Walter,

thanks for this.

Although I’m not in the position to explain stuff, I try it:

The current JS (jQuery) solution I do have is to add a class=“whatever” to the fwNav1 like so:

$('#fwNav1').onePageNav({
    currentClass: 'fwCurrent',
    changeHash: false,
    scrollSpeed: 1250,
    scrollThreshold: 0.5
 });

and with those css it does the game indicating the current sectionDiv and adds the lil triangle on bottom:

.fwCurrent {
background: #ff0000; 
}

.fwCurrent:after {
  content: "";
  width: 0; 
  height: 0;
  position: absolute;
  top: 100%;
  left: 33.33%;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 10px solid #ff0000;
  background-color: transparent;  
}

So far so good.

I suppose:

The CSS method would require classifying each single link-entry such as

<a href="index.html" id="homenav">Home</a>

and CSS as

body#home a#homenav,
body#carousel a#carousel,
body#link3 a#link3,
body#link4 a#link4 {
color: #fff;
background: #ff0000;
}

and the :after.

Affordable in a onePage project with a handful of links, but if a project grows above the onePage I think the JS solution is the better choice perhaps.

The simple “highlight page” within the action doesn’t work (it does - but only on multiple-page architecture). But I might miss something - that’s always possible.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at: