Stylesheet format lost after adding onClick

[Big Moxy]

test page - http://projects.missioninternet.com/proweb/clients/test.php.

When I added the onclick event so that I could employ ajax on this
page the stylesheet formatting for this <li> disappeared. If you look
at the test page you can see what it should look like. The stylesheet
also defines a:hover behavior (change the font-weight to bold).

<li onclick="makeRequest('echo.php?clientID=<?php echo $clientID; ?

')">Reports</li>

Q1: What happened?
Q2: How can I resolve this?

Thank you!
Tim

 

[Big Moxy]

test page -http://projects.missioninternet.com/proweb/clients/test.php.

When I added the onclick event so that I could employ ajax on this
page the stylesheet formatting for this <li> disappeared. If you look
at the test page you can see what it should look like. The stylesheet
also defines a:hover behavior (change the font-weight to bold).

<li onclick="makeRequest('echo.php?clientID=<?php echo $clientID; ?


Q1: What happened?
Q2: How can I resolve this?

Thank you!
Tim

While I don't understand what happened I have made some progress. I
adapted onclick code from an expandable menu and applied it to
onmouseover to get the a:hover effect. However I am still in need of a
solution to restore the default formatting when the mouse moves aways
(onmouseout, I presume).

Here is my code:

<script type="text/javascript">
function setFontProperty(theid){
font_status = new Array();
if (document.getElementById) {
var fontProperty = document.getElementById(theid);

if(font_status[theid] != 'fontHighlight') {
fontProperty.className = 'fontHighlight';
font_status[theid] = 'fontHighlight';
}else{
fontProperty.className = 'fontDefault';
font_status[theid] = '';
}
}
}
</script>
<style type="text/css">
.fontDefault {
text-decoration:none;
color:#0076D6;
font-weight:normal;
}
.fontHighlight {
cursor:inherit;
text-decoration:none;
color:#0076D6;
font-weight: bold;
}
</style>

<li id='reports' class="fontDefault"
onMouseOver="setFontProperty('reports');"
onMouseOut="setFontProperty('reports');"
onclick="makeRequest('echo.php?clientID=<?php echo $clientID; ?

 

[David Mark]

test page -http://projects.missioninternet.com/proweb/clients/test.php.

When I added the onclick event so that I could employ ajax on this
page the stylesheet formatting for this <li> disappeared. If you look
at the test page you can see what it should look like. The stylesheet
also defines a:hover behavior (change the font-weight to bold).

Why not post a test page that shows the problem?

<li onclick="makeRequest('echo.php?clientID=<?php echo $clientID; ?

Don't post server side code.

Q1: What happened?

Who knows?

Q2: How can I resolve this?

Post a link to the non-working version and/or the client side markup.

 

[Big Moxy]

Why not post a test page that shows the problem?




Don't post server side code.




Who knows?


Post a link to the non-working version and/or the client side markup.

The link I provided doesn't work on IE 7 and FF 2.0.0.11. I always
assume that it is better to see the problem first hand than look at a
picture of the problem.

Nonetheless here is a link that contains the problem as I see it -
http://projects.missioninternet.com/proweb/clients/problem.html.

I posted an update indicating I added onmouseover to mimic the
stylesheet definition however I don't know how to restore the default
format when the mouse moves away.

Thanks,
Tim

 

[David Mark]

The link I provided doesn't work on IE 7 and FF 2.0.0.11. I always
assume that it is better to see the problem first hand than look at a
picture of the problem.

I thought when you said it was what it should look like, that meant it
was a working example (rather than a broken one.) I don't know what
you mean by a "picture of the problem."

Nonetheless here is a link that contains the problem as I see it -http://projects.missioninternet.com/proweb/clients/problem.html.

Okay. Now I see what you mean by a picture. That doesn't help. I
tried both of your links. One works and the other is a picture of one
that doesn't work (I think.) Post a non-working page (i.e. a page
with the rollover bold effect broken by the insertion of the onclick
attribute.)

I posted an update indicating I added onmouseover to mimic the
stylesheet definition however I don't know how to restore the default
format when the mouse moves away.

Set the className property to an empty string onmouseout.

And BTW, the curved corners are all messed up in IE7 and Firefox (at
the bottom.) If they look good in your browser(s), you need to adjust
your font size, window size or something.

 

[Thomas 'PointedEars' Lahn]

Nonetheless here is a link that contains the problem as I see it -
http://projects.missioninternet.com/proweb/clients/problem.html.

I posted an update indicating I added onmouseover to mimic the
stylesheet definition however I don't know how to restore the default
format when the mouse moves away.

Your problem is programming overkill. Use a simple a[href]
element that you format with a `:hover' CSS selector instead.


PointedEars