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?
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?
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
#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
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
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
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
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
posted by weston at 8:12 PM on August 16, 2004
This thread is closed to new comments.
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