Javascript Quandry
August 16, 2004 8:37 AM   Subscribe

Javascript quandry. I'm tasked with the unenviable task of implementing another designers web design for one of my clients. In order to make the maintenance of the site easier to handle, I'm putting most of the navigational elements in a single document that will be server-side included. The fiddley bit is that the design calls for the navigational element for the particular page to be highlighted for that particular page. So if I'm on the CONTACT page, the menu element for CONTACT is highlighted. This would be easy enough to handle if the code for each page were a part of each page, but because I'm using a common file, it makes it trickier. (more inside)

So then I thought of making a clunky javascript if/else tree... if document.name equals contact.shtml document.write (graphic element turned on) else document.write (graphic element turned off but have the mouseover function). I'm having trouble getting the syntax of this to work in the first place, but before I spend time trying to make a clunky solution work, can anyone help me think of something more elegant?
posted by crunchland to Computers & Internet (7 answers total)
 
document.write is probably overkill. What you might want to do is give the highlighted elements an id identical to the page name, and then use javascript to change the CSS stylings on that element.

If you are not putting the html or body elements in the include, you could also give either one of them a CSS id,
and then, along with id'd elements to be highlighted, do something like this:

#page3 #highlight3 {
background-color: #ffffcc;
font-weight: bold;
}

The html element wouldn't be too hard to factor out of each page. Or if you're serving off apache, you can actually set variables for SSIs to accomplish similar things.
posted by weston at 9:02 AM on August 16, 2004


You could give the <body> tag on each page an id, say <body id="contact">. Then in the navigation, markup the CONTACT menu element with, say, <li class="contactmenu">. Finally, in the CSS have rules like

#contact li contactmenu{font-weight:900;}

Or something. (The syntax of that CSS is probably wrong, but I think the idea is right.)

Or, what weston said.
posted by gleuschk at 9:03 AM on August 16, 2004


Does it have to be JavaScript? We usually put our sites' navigation in XML files and parse that with whatever server-side language is available. This makes it eay to handle selected states, whether they're CSS or image-based.
posted by yerfatma at 10:03 AM on August 16, 2004


something like this:

var urlStuff = window.location.pathname.toLowerCase();

if (urlStuff = "/contact.html")
{
document.getElementById('contact').className='highlighted';
}
posted by Hackworth at 10:04 AM on August 16, 2004


riffing on Hackworth's idea:

var theURL = window.location.pathname.toLowerCase();
var a = document.getElementsByTagName("a");

for (i=0;i<a.length;i++) {
    if(a[i].toLowerCase()==theURL) {
        doStuff(a[i]); /*whatever it is that you want to do to this element*/
    }
}

should get you something usable without having to hard-code the URL reference in each page. You can grab a nodeset of the navigation block and use it in place of the document reference in order to avoid funny things happening to incidental URI references in other places on the page.
posted by Fezboy! at 12:00 PM on August 16, 2004


of course, then I wrote it out and it didn't work. Here's a better version:

var theURL = window.location;
var a = document.getElementsByTagName("a");

for (i=0;i<a.length;i++) {
    if(a[i].toString()==theURL.toString()) {
        doStuff(a[i]); /*whatever it is that you want to do to this element*/
    }
}
posted by Fezboy! at 12:16 PM on August 16, 2004


Note: I asked an aspiring CSS samurai to confirm that you could id the element today, and he said that he understood that html element can't be id'd in some browsers.
posted by weston at 8:12 PM on August 16, 2004


« Older What is a "Remander Mark"?   |   How can I schedule posts in Moveable Type 2.63 to... Newer »
This thread is closed to new comments.