Stylesheets - css and the unordered list (li, etc)

Author

css and the unordered list (li, etc)

Eric Jones

2006-11-19, 7:35 pm

Hello newsgroup members,

I really like CSS, and have created some button like navigation UL/li, etc.

I have hover, change color, etc. I am using the "link" as a button,
and using ajax and javascript and PHP to do things.

the user clicks one of the links, and I want things to happen, I use the
onclick event (of the li <li id="button1" onclick=getData(ajax HttpReq))
but I have 3 other things i would like to happen with the same "click".
I want to display some text in a div (client side), load an image, and
have the "button" when it is clicked "gray" out until the user clicks
another button. The page says the same (more or less) and I just bring
a different image, and text to the page. I use tabs across the top of
the page for major navigation, and certain tabbed pages when display,
have a column of navigation links (the unordered list list items).

I tried using PHP to change the class of the link (class="on" or
class="off"), but the process to switch from one link to the other i
have not figured out. I have a PHP page that actually loads the html
for the ul, and use css to create the button like appearance.
the PHP stuff is this:
<div id="left-nav">
<ul>
<li<?php if ($button =="What We Do")
echo " class=\"on\""; ?> onclick="displayText(the HttpRequest
object)" mousedown="afunc()"; mouseup="adifffunc();">
<a href="#">What We Do</a></li>
<li<?php if ($thisPage=="What is an FFRDC?")
echo " id=\"currentpage\""; ?>>
<a href="#">What is an FFRDC?</a></li>
<li<?php if ($thisPage=="Mission & Vision")
echo " id=\"currentpage\""; ?>>
<a href="#">Mission & Vision</a></li>
<li<?php if ($thisPage=="Company History")
echo " id=\"currentpage\""; ?>>
<a href="#">Company History</a></li>
<li<?php if ($thisPage=="Corporate Web Site")
echo " id=\"currentpage\""; ?>>
<a href="#">Corporate Web Site</a></li>
<li<?php if ($thisPage=="e-Learning Center")
echo " id=\"currentpage\""; ?>>
<a href="#">e-Learning Center</a></li>
</ul>
</div>
i am trying to figure out how to dim the active button (change CSS style
for the li in question), and when the user clicks a different li, then
un-dim the last one, and dim the current one (like using a "current" id
for the typical tabbed web page, etc.

I tried running PHP script in the javascript, "displayText(xxx)", but
that did not seem to work. I entered a line like
<?php $button="Misson" ?> in the javascript - hoping that the button
would change. Now is seems i have to track which one is dimmed, and
un-dim it on the next button click.

Any ideas on the right way to handle this will be appreciated!
( i have downloaded dojo, but not tried it yet)

thanks

eric

Bergamot

2006-11-19, 7:35 pm

Eric Jones wrote:
>
> the user clicks one of the links, and I want things to happen,

I suggest asking in a JavaScript newsgroup, for example
comp.lang.javascript

--
Berg