Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Hi,
is there a way I can implement that the navigation items show a certain background color, when they are selected, so that the viewer can easily see, which page he is on? I don't see any way to do it in Pages CE4.
I set up my menu, so that the background color changes to blue, when hovering over an item. I would like it to stay that color, when it is actually selected, so that the viewer knows which page he is on at the moment.
Can this be done by CSS code or does it need more to that?
Thanks
Peter
PS: Sample Page
Offline
Rod has a solution on his TTG-Tips site.
http://ttg-tips-and-tricks.barbeephoto. … -websites/
Offline
Great, thanks, that did the trick;-)
Offline
One more thing:
When I go into subpages (portfolio section or return page of contact form), the selection is not applied anymore. Is there a way to include all the subpages of a menu item?
Thanx
Peter
Offline
if those items are in your navigation menu, it should be applied. Generally, you won't have your sub-pages in the main menu though.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Ok, I understand what you are saying.
I have the main nav menu "Portfolio" and all the galleries in there will be TTG-galleries. Once I select a gallery, it loads the page with the thumbs and at that point the main menu "Portfolio" is not selected anymore, none ist. I realize, that it is designed that way, but since I don't really have any submenues, it would be nice for the viewer to still see the main nav "Portfolio" highlighted.
Is it possible to add code, that all subpages are also included in the "select" process? Like
galleries/
galleries/01_corporate/
galleries/02_editorial/
galleries/03_stills/
etc.
Cheers
Peter
Offline
I don't know enough jQuery to do that.
Yet.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
http://www.minihowtos.net/jquery-split
Get the URL, explode it on '/'. Match against "galleries" (or whatever your base index directory is called). If present, then add the "selected" class.
I might get around to coding it at some point, but it's not happening presently, and you probably shouldn't hold your breath waiting for me to get around to it. But that's what you need to do, and using Rod's tutorial as base and information from the link above, it should be doable. Have fun!
Offline
Thanks Rod and Matthew,
I will give it a shot and try my best;-)
Cheers
Peter
Offline
Short feedback, if anyone is interested:
Since I am just lost with this stuff, I asked a friend of mine who knows php and some other stuff and he came up with 3 lines of code, which work for me:
Original script:
<script>
$(document).ready(function() {
$("#navigation a").each(function() {
if ($(this).prop("href") == window.location.href) {
$(this).addClass("selected");
}
});
});
</script>
Amended script:
<script>
$(document).ready(function() {
$("#navigation a").each(function() {
if ($(this).prop("href") == window.location.href) {
$(this).addClass("selected");
}
});
var url = window.location.href;//alert("hui" + url);
if (url.indexOf("galleries") >= 0) {//alert("gallereies da" + url);
$($("#nav span a")[1]).addClass("selected");
}
});
</script>
Offline
Ah-ha. That's much simpler than I would have done. Nice!
Offline
So I liked his using indexOf() rather than split(), but when I tried his code, I didn't quite like the result. Here's what I've come up with instead.
// HIGHLIGHT CURRENT MENU ITEM
function ttg_body_bottom( $style, $path ) {
if (G_STYLE != 'CE4-PAGES-HOME') {
echo '
<script>
$(document).ready(function() {
var nxt = true,
url = window.location.href
;
$("#nav a").each(function() {
if ($(this).prop("href") == url) {
$(this).addClass("selected");
nxt = false; // prevents running of "nxt" functions below
}
});
if (nxt) { // prevents highlighting of partial matches when an exact match has already been found
if (url.indexOf("galleries") >= 0) {
$("#nav li:nth-child(2) a").addClass("selected");
}
else
if (url.indexOf("blog") >= 0) {
$("#nav li:nth-child(3) a").addClass("selected");
}
}
});
</script>
';
}
} // ENDYou can see it running (for now) on http://campagnapictures.com.
I use the G_STYLE to prevent the code being applied to my Home page, which is a full-screen gallery. It would have no effect being there, but I'd rather not incur the overhead of running a useless script on a page where it simply does not apply.
I've set a "nxt" variable; after running the first function to match navigation href attributes against the current URL, the "nxt" function determines whether the next set of functions should be run. This is true by default, and is set false when the first function succeeds. When false, the next series of functions does not run.
Each of the subsequent functions checks the "nxt" variable; if the variable was set false by the first function, they do not execute. Otherwise, one function checks for "galleries" in the href attribute, while the other checks for "blog".
In both function, the li:nth-child(#) selector defines the position of the menu item to which the "selected" class should be applied. I'm using CSS for this, rather than your friend's use of a JS array (which seems entirely unnecessary to me). Update menu positions as necessary.
li:nth-child works when using multi-level navigation (or WordPress navigation); if using single-level navigation, then this should probably be span:nth-child instead.
So, the necessity for the "nxt" variable derives from my "Bio & Contact" page having been created by WordPress, and therefore also having indexOf("blog") being true. Without the "nxt" variable, selecting my "Bio & Contact" page also causes "Blog" to be highlighted. I use the "nxt" function to prevent this by terminating the wider net functions when an exact match has already been found.
Offline
Hmm, I treid that code, but could not get it to work. So I'll leave it as is for now. Spend too much time on these little details already anyway;-)
Offline
It's working for me on my test site.
Don't include that very first bit of code. Looks like it's an accidental repeat:
// HIGHLIGHT CURRENT MENU ITEM
function ttg_body_bottom( $style, $path ) {
if (G_STYLE != 'CE4-PAGES-HOME') {
echo 'Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
It's working for me on my test site.
Don't include that very first bit of code. Looks like it's an accidental repeat:
// HIGHLIGHT CURRENT MENU ITEM function ttg_body_bottom( $style, $path ) { if (G_STYLE != 'CE4-PAGES-HOME') { echo '
Yep. Fixed my code above.
One takeaway from this conversation, is that different deployments will need slightly different versions of this code, which is why it's not a feature built into the plugins.
Offline