Member Avatar for CommDave

I've used this method to highlight the location page that the user is on. Below is a working example of how this functions. This works in div tags or in a tables and cross browsers. Below I've created a main Navigation and two sub navigation. Terminal Intensity, Surreal 1, & Surreal 2 are in the main navigation and in this demonstration Terminal Intention will be the one effected by the Javascript. Terminal Intensity #4, Terminal Intensity #5, Terminal Intensity #6 are in the first subnavigation and Terminal Intensity #4 will be effected by the javascript. Default Page, Development and Close ups is the second subnavigation and Default Page will be the one effected by the Javascript.

I'm sure there are many methods out there that do the same thing. This is yet another one and I wanted to share it.


Put this CSS in your page.

<style type="text/css">
<!--

.LNTi { background-color: #200401; color: #E0B9B4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-decoration: none; padding-top: 1px; padding-right: 5px; padding-bottom: 1px; padding-left: 5px; height: 14px; width: 170px; }
a.LNTi:hover { background-color: #491B16; color: #E0B9B4; }

.TiLNhi { background-color: #491B16; color: #FFFFFF; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-decoration: none; padding-top: 1px; padding-right: 5px; padding-bottom: 1px; padding-left: 16px; height: 14px; width: 170px; }

.TiSN2hi { background-color: #481B16; color: #FFFFFF; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-decoration: none; padding-top: 1px; padding-right: 5px; padding-bottom: 1px; padding-left: 16px; height: 14px; width: 170px; }

.TiSN { background-color: #6F322B; color: #E0B9B4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-decoration: none; padding-top: 1px; padding-right: 5px; padding-bottom: 1px; padding-left: 5px; height: 14px; width: 118px; }
a.TiSN:hover { background-color: #CA8980; color: #FFFFFF; }

.SNTi { background-color: #6F322B; color: #E0B9B4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-decoration: none; padding-top: 1px; padding-right: 5px; padding-bottom: 1px; padding-left: 5px; height: 14px; width: 170px; }
a.SNTi:hover { background-color: #CA8980; color: #6F322B;}

.LNSurreal1 { background-color: #270600; color: #E5BAB4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-decoration: none; padding-top: 1px; padding-right: 5px; padding-bottom: 1px; padding-left: 5px; height: 14px; width: 170px; }
a.LNSurreal1:hover { background-color: #501C16; color: #E5BAB4; }

.LNSurreal2 { background-color: #200401; color: #E0B9B4; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-decoration: none; padding-top: 1px; padding-right: 5px; padding-bottom: 1px; padding-left: 5px; height: 14px; width: 170px; }
a.LNSurreal2:hover { background-color: #491B16; color: #E0B9B4; }

-->
</style>

This javascript changes the CSS style based on the id that is in the a href. Take a look and you can see the match ups in the js and the corresponding ids in the a href(s). Also take a look at the js that notes the changing of the css style (classname=).

<script type="text/javascript">
<!--
function bodyload()
{
window.document.all("id_LMN_ti").className="TiLNhi";
window.document.all("id_p_ti4").className="TiLNhi";
window.document.all("id_p_ti4_default").className="TiSN2hi";
}
//-->
</script>

Put the onload in your body tag or this won't work!

<body onLoad="bodyload()">

Put these in separate table cells or in div tags.

(*note - main nav)

<a id="id_LMN_ti" href="terminal_intensity.html" class="LNTi" title="Terminal Intensity">Terminal Intensity</a>
<a id="id_LMN_surreal1" href="surreal_1.html" class="LNSurreal1" title="Surrealism 1">Surrealism 1</a>
<a id="id_LMN_surreal2" href="surreal_2.html" class="LNSurreal2" title="Surrealism 2">Surrealism 2</a>

(*note - sub nav 1)

<a id="id_p_ti4" href="terminal_intensity_4.html" class="SNTi" title="Terminal Intensity #4">Terminal Intensity #4</a>
<a id="id_p_ti5" href="terminal_intensity_5.html" class="SNTi" title="Terminal Intensity #5">Terminal Intensity #5</a>
<a id="id_p_ti6" href="terminal_intensity_6.html" class="SNTi" title="Terminal Intensity #6">Terminal Intensity #6</a>

(*note - sub nav 2)

<a id="id_p_ti4_default" href="terminal_intensity_4.html" class="TiSN" title="Terminal Intensity #4, Default Page">Default Page</a>
<a id="id_p_ti4_htitle" href="terminal_intensity_4_dev1.html" class="TiSN" title="Terminal Intensity #4, Development">Development</a>
<a id="id_p_ti4_cutitle" href="terminal_intensity_4_cu1.html" class="TiSN" title="Terminal Intensity #4, Close up">Close ups</a>
  • 2 Contributors
  • 5 Replies
  • 515 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for Taywin

It's nice to see someone trying to share his/her idea. However, please be careful when you do this.

First, your code works only on IE because other browsers do not have 'document.all' in JavaScript. Second, the way you implement CSS is a bit redundant. You could pull out the font-family into the same class. Last, you do not need to use JavaScript to add CSS for you, but you should assign 'class' to the element when you create HTML. If you want to dynamically change CSS class for a HTML element, then JavaScript would be a good approach to do so.

Edited by Taywin because: n/a
Member Avatar for CommDave

Taywin, thanks for your time to comment and you are right, I'm just trying to share as was mentioned in the last monthly email blast. I appreciate it. It does work fine in Firefox, Safari and like you mentioned, IE. I've checked these. I may get some negative response to that for some reason but I use firefox as my primary browser and I've never had a problem with this. I totally agree about the redundancy in the css. My bad for sure but I was just making up for the many cross browsers that don't always pick that up. But, it may be over kill like you said. I'm not positive but was just covering my tracks as best as I could. You lost me on you last point and if you would be kind enough to show and example that will not only help me but anyone else reading this! Thanks again for your time. It is appreciated!

Member Avatar for Taywin

Don't feel discourage. You will get better.

Speaking of my last point, what I mean is that your JavaScript is used to assign CSS class to elements at onload(). However, the CSS class can actually be done in the HTML.

// i.e.
// in your onload
window.document.all("id_p_ti4_default").className="TiSN2hi";

//Instead of calling JavaScript to assign class name to "id_p_ti4_default" at onload, you can just do...
<a id="id_p_ti4_default" href="terminal_intensity_4.html" class="TiSN2hi" title="Terminal Intensity #4, Default Page">Default Page</a>

// the previous value you assigned as "TiSN" will be replaced by JavaScript anyway, so you could simply assign it in the element directly. Unless you are doing the toggle, mouseover, mouseout, or any kind of dynamic display, then you should do it that way. :)
Member Avatar for CommDave

You didn't even try to implement it did you? This is what makes these forums a tragedy. It does work. I know there may be other options but for a basic user looking for this kind of result you just shot this down. How sad for you and a unfortunate response to something that might help someone looking for this kind of answer.

Member Avatar for Taywin

Huh? All the sudden you just said as if you know it all. What is it? If you reassign CSS class to a HTML element onload, whatever CSS class you assigned before will be overridden by the new one unless you do the 'adding' instead of 'assigning'. What does not really work is that your code is not working cross-browser. Nowadays, you should think about implementing codes that work cross-browser because IE is no longer the only browser on the Internet anymore.

By the way, why would I shoot it down? Also when did I shoot it down? I just try to show you for what situation would be appropriate to apply JavaScript. For practice is OK, but how good is a practice if it is not practical to be used in real life...

Edited by Taywin because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.