SSI & highlighting the current category in the navigation Website Technology Issues forum at WebmasterWorld

Welcome to WebmasterWorld Guest from 107.22.127.92
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,

Pubcon Platinum Sponsor

Home / Forums Index / Hardware and OS Related Technologies / Website Technology Issues

Forum Library : Charter : Moderators: phranque
Website Technology Issues Forum

SSI & highlighting the current category in the navigation

Makaveli2007

msg:3763702

3:56 pm on Oct 11, 2008 (gmt 0)

I (think I) understand how to use SSI in order to insert a separate file with html code (for the navigation) on say all the 100 pages of my website. I also understand that I can use the (same) CSS file in order to make sure the part of the navigation where the mouse cursor is placed looks different (a:hover etc. in the CSS).

All of that seems rather simple. However, I have a big problem: Say my website is about shoes. I have three categories in the top navigation: Sports shoes, Cool Shoes, Women's shoes. If the user is on the page about "sports shoes", I want that part in the top navigation to be highlighted, if he's on the page about "cool shoes" that part in the top navigation should be highlighted, etc..

In order to get that done (if it was only 3 pages), I would normally create three different pages and the navigation code (the html) would look a bit like this:

"sports shoes"-page:

...
<li class="selected"><a>sports shoes</a></li>
<li><a>cool shoes</a></li>
<li><a>women's shoes</a></li>
...

for the "cool shoes"-page like this:

...
<li><a>sports shoes</a></li>
<li class="selected"><a>cool shoes</a></li>
<li><a>women's shoes</a></li>
...

and for the women's shoes page..well you can imagine. However, if I want to do that I have to create a separate file for each one...which Im trying to avoid by using SSI (not a problem with 3 navigation buttons, but if you have a top navigation with 10 and a sub-navigation with some more..Id prefer to avoid this).

Is there any possibility to get this done with mostly HTML and CSS knowledge (I'm trying to make some progress with the site and if I have to learn java script for another dozens of hours or more I'd probably forget about the highlighting effect for now). I'd be willing to look up a few things to get this done, but it's probably not worth having to learn another programming language for me right now.

Is there the possibility to use some code like this in the separate file (which contains the html code for the navigation):

...
<li class="selected1"><a>sports shoes</a></li>
<li class="selected2"><a>cool shoes</a></li>
<li class="selected3"><a>women's shoes</a></li>
...

and then use a little bit of dynamic code on each page (right before I use SSI to call(exp?) the navigation) so the browser understands which part of the navigation has to be highlighted?

If something like that is possible (I understand that the above is probably not possible, but hopefully you understand my train of thought?:)) without learning a lot of java script or something (I'm willing to spend a bit of time - say 5 hours max. ;)), but if it takes longer than that, I should probbaly postpone it for now (for now my main goal is launching the site).

THANKS A LOT! I really appreciate your help...If such a forum had existed back when I was programming computer games in elementary, I mgiht have never stopped it ;)

brotherhood of LAN

msg:3763166

6:34 pm on Oct 10, 2008 (gmt 0)

Javascript is an option for you.

You would look at the URL of the page and perhaps iterate through each of your navigation URLs, and highlight if it is the current URL.

[edited by: encyclo at 11:48 pm (utc) on Oct. 13, 2008]
[edit reason] moved from another location [/edit]

rocknbil

msg:3763347

12:43 am on Oct 11, 2008 (gmt 0)

My first thought is you **could** include a dynamic script that reads the referrer variable:

. . . and output the links based on the referrer. But that's probably just a comfort zone on my part. :-)

The right way to do it would probably be to use the limited but powerful functions available to SSI. I have not tested the below, but it should be a fun project.

First, you include another server side include:

Then in menu-parser.shtml, you do a bit of trickery.

SSI has access to the same environment variables as any server-side program. One of those is DOCUMENT_URI, the URI to the document. You could combine that with the if construct and expr function in SSI to do this:


<!--#if expr='"$DOCUMENT_URI" = "/file1.shtml"' --> 
<a href="file1.shtml" class="highlight-class">File 1</a> 
<!--#else --> 
<a href="file1.shtml">File 1</a> 
<!--#endif -->


<!--#if expr='"$DOCUMENT_URI" = "/file2.shtml"' --> 
<a href="file2.shtml" class="highlight-class">File 2</a> 
<!--#else --> 
<a href="file2.shtml">File 2</a> 
<!--#endif -->

If the first matches, it displays the version with the class, otherwise, it displays the regular link.

You can see this sample here [httpd.apache.org] (under Variable Substitution) at the Apache SSI docs, which actually start here [httpd.apache.org].

Haven't tested it but it should work, you may have to run a script or two to see if the document URI is a full path or relative.

coopster

msg:3764896

9:32 pm on Oct 13, 2008 (gmt 0)

It's possible, if I understand you correctly. I did a session on it at pubcon a couple years ago based on this starter script ...
[webmasterworld.com...]

Most folks use a hybrid of CSS and an id or class on the body element to change the style on the page which causes HTML and CSS bloat when the server can handle the update on the fly quite nicely without having to update code every time you add/remove pages from your site.

Basically what you end up doing is using the same navigation for everything, it remains "static", so-to-speak. You buffer the navigation by storing it in a string variable for manipulation by your server-side processing. The server compares any links found in the string with the current link being requested and applies your changes on-the-fly.

[edited by: encyclo at 11:48 pm (utc) on Oct. 13, 2008]
[edit reason] moved from another location [/edit]

MichaelBluejay

msg:3765958

9:21 am on Oct 15, 2008 (gmt 0)

I think brotherhoodOfLan's and Rocknbil's solutions are really good. But here's another possibility, in case you prefer it for some reason.

You can have your SSI call a program, rather than a static file. Then your program returns the html relevant for the page it's delivering to. For example, your SSI call could be:

Then your Perl program looks at what page is calling the script, and returns the HTML appropriate for that page.

Makaveli2007

msg:3767221

5:00 pm on Oct 16, 2008 (gmt 0)

Thanks for the advice! I've decided to forget about the highlighting effect for now. I removed it and realized that it looks almost as good without it. If I try to use it later, I'll come back to this post and try to apply that advice (quite honestly, I'm still a very very beginner at web design (I only know some html/css, so I guess all of this is still a bit too difficult for me right now)).

Anyway thanks for your efforts!

Makaveli2007

msg:3767222

5:00 pm on Oct 16, 2008 (gmt 0)

Anyway thanks for your efforts!

Makaveli2007

msg:3767223

5:01 pm on Oct 16, 2008 (gmt 0)

I cant believe this keeps on happening to me - SORRY! - Im not even aware that I clicked twice..

Global Options:

top

home

open messages

active posts

Home / Forums Index / Hardware and OS Related Technologies / Website Technology Issues

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved

Website Technology Issues Forum