Hi guys,
am I correct when I say, that highlighting the current section (or area or specific DIV) in a OnePage project requires some JS? And if so, did you ever accomplished this in conjunction with our standard #fwNav1 (CSS Menu Action)?
Looking like so:
I assume it’s something like add class of “foo” on click - perhaps?
Thanks for any pointers.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
OK,
meanwhile, I found a jQuery solution which kinda works, somehow:
http://trevordavis.net/blog/jquery-one-page-navigation-plugin
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Thomas,
Do you only want to highlight the menu item (link)? Or do you want to highlight the particular section of the body content the link points to?
If it’s the latter then I do something similar in the “new article” section of your CREATiv account, if you want to see it work.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Hi Todd,
basically only the specific menu item. But the other one sounds tempting, too.
I’m currently developing a “new way (not really new)” of navigating through projects. Bye Bye - sucking BigAreaMenu or even two or three ones - welcome the future kinda stuff, you know. The Project that tells a story - literally. And the story makes the navigation. But there are still some concerns, and the better indication of “where the user is” could be one strong argument.
This is theProject, placed on dropbox so hopefully reachable (never tried):
https://dl.dropboxusercontent.com/u/8231701/cdn-screencasts/theProject/index.html
Veeery raw, not much active yet - but my future all-time testing file.
Cheers
Thomas
This is btw the same file where I test the stuff we talk about in the other thread (CodeKit).
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
In my case when the user selects a section to view I use js to smooth scroll to the anchor then use pure CSS (no js-applied styles) to highlight the content using :target and :focus pseudo-elements. Quite easy.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Hi Thomas,
I was wondering if there was a way to use the :target selector for this… I would have tried myself but I just don’t have any energy today.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Hi Ern,
hi Todd,
but I just don’t have any energy today.
so me these days.
Ahm - I have to admit, that I don’t have much idea, if not to say nil about all those pseudo link selectors in conjunction with the Freeway CSS Menu.
The :target would highlight the sectionDIV(?), but I’d like to start with just the link background in the menuBar - and here I don’t get my head around getting this.
I think I have to have another read somewhere in the depth of W3C and others.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
Walther did this a while ago, I’m trying to remember what that one was … it was done via javascript. I’ll read out all of my posts of the last two years, see if I can find it …
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
This is pretty easily done in JS. You listen for a click on a particular type of element, then remove the “active” class from everywhere it is currently applied and apply it to the element you have just clicked. This will not give you the “scroll-spy” behavior you may have seen, where as you scroll down your single-page “site”, the sticky header lights up to indicate the currently-visible section. That takes a bit more work, because you have to work out what is visible at the moment.
If you can use Prototype (which means you aren’t using jQuery) then you can simply do this to get the former working immediately: (and you have to have your .active class-based style set up to add the highlight)
// listen for clicks on any li inside the #fwNav1 list (includes sub-menu options)
document.on(‘click’, ‘#fwNav1 li’, function(evt, elm){
if(elm.match(‘#fwNav1 > li’)){
// it’s a top-level option
$$(‘.active’).invoke(‘removeClassName’, ‘active’);
elm.addClassName(‘active’);
}else if(evt.findElement(‘#fwNav1 > li’)){
// set the highlight on the parent top-level option
$$(‘.active’).invoke(‘removeClassName’, ‘active’);
evt.findElement(‘#fwNav1 > li’).addClassName(‘active’);
}
});
Now all of this should be possible anyway if you’re using the stock CSS Menus in Freeway 7 — there’s a checkbox in the Action interface to highlight the current link. Does that not work in a single-page site?
Walter
On Sep 1, 2015, at 3:07 AM, Richard van Heukelum email@hidden wrote:
Walther did this a while ago, I’m trying to remember what that one was … it was done via javascript. I’ll read out all of my posts of the last two years, see if I can find it …
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options
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:
https://freewaytalk.softpress.com/person/options