homepage Welcome to WebmasterWorld Guest from 54.205.105.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3763700 posted 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

WebmasterWorld Administrator brotherhood_of_lan us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 3763700 posted 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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3763700 posted 12:43 am on Oct 11, 2008 (gmt 0)

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

<!--#include virtual="/my-menu.cgi" -->

. . . 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:

<!--#include virtual="/ssi/menu-parser.shtml" -->

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

WebmasterWorld Administrator coopster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3763700 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3763700 posted 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:

<!--#include virtual="include.cgi"-->

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

Makaveli2007

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3763700 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3763700 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3763700 posted 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 search open messages active posts  
 

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

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved