Stylesheet format lost after adding onClick

[Big Moxy]

I am re-posting this problem based on comments I received the first
time.

problem url - http://projects.missioninternet.com/proweb/clients/test.php
javascript fix url - http://projects.missioninternet.com/proweb/clients/test2.php

Please go to the "problem url" to see that the "Reports" link unlike
the links below it is black in color and does not respond to mouse
overs. There is one stylesheet definition for the leftMenu div. Here
is the code for the problem page.

<div id="leftMenu">
<div id="leftMenuPad">
<ul>
<li onclick="makeRequest('echo.php?clientID=2')">Reports</li>
<li><a href="invoices.php">Invoices</a></li>
<li><a href="#">Payments</a></li>
<li><a href="/proweb/common/message.php" title="Send private message"
rel="gb_page_center[600, 400]">Send private message</a></li>
<li><a href="viewarchive.php">View archive messages</a></li>
</ul>
</div><!-- end leftMenuPad -->
</div><!-- end leftMenu -->

#leftMenu li {
list-style: none;
list-style-position: inside;
font-size: 12px;
text-align: left;
border-bottom: 1px;
border-bottom-style: solid;
border-bottom-color: #C4C4C4;
}
#leftMenu li a {
padding: 5px 0 0 0;
color: #0076D6;
text-decoration: none;
}
#leftMenu li a:hover {
font-weight: bold;
}

As a work around I added onMouseOut and onMouseOver behaviors with
javascript to mimic the stylesheet behaviors. Refer to the "javascript
fix url" above. Although this works, I would like to know why onClick
overrode the stylesheet format.

Thank you,
Tim

 

[Doug Gunnoe]

I am re-posting this problem based on comments I received the first
time.

problem url -http://projects.missioninternet.com/proweb/clients/test.php
javascript fix url -http://projects.missioninternet.com/proweb/clients/test2.php

Please go to the "problem url" to see that the "Reports" link unlike
the links below it is black in color and does not respond to mouse
overs. There is one stylesheet definition for the leftMenu div. Here
is the code for the problem page.

<div id="leftMenu">
<div id="leftMenuPad">
<ul>
<li onclick="makeRequest('echo.php?clientID=2')">Reports</li>
<li><a href="invoices.php">Invoices</a></li>
<li><a href="#">Payments</a></li>
<li><a href="/proweb/common/message.php" title="Send private message"
rel="gb_page_center[600, 400]">Send private message</a></li>
<li><a href="viewarchive.php">View archive messages</a></li>
</ul>
</div><!-- end leftMenuPad -->
</div><!-- end leftMenu -->

#leftMenu li {
        list-style: none;
        list-style-position: inside;
        font-size: 12px;
        text-align: left;
        border-bottom: 1px;
        border-bottom-style: solid;
        border-bottom-color: #C4C4C4;}

#leftMenu li a {
        padding: 5px 0 0 0;
        color: #0076D6;
        text-decoration: none;}

#leftMenu li a:hover {
        font-weight: bold;

}

As a work around I added onMouseOut and onMouseOver behaviors with
javascript to mimic the stylesheet behaviors. Refer to the "javascript
fix url" above. Although this works, I would like to know why onClick
overrode the stylesheet format.

Thank you,
Tim

Hi Tim.

I see this: <li onclick="makeRequest('echo.php?clientID=2')">Reports</
li>

Which at first, I scratched my head, because that is kind of strange.
(But legal, so..) The rest of your <li>'s have <a> tags. Like this
one.

<li><a href="invoices.php">Invoices</a></li>

The only color information I see would be for <a> in <li> 's inside
leftMenu, and not for <li>

#leftMenu li a {
padding: 5px 0 0 0;
color: #0076D6;
text-decoration: none;

}


And for mouseovers all I see is this:

#leftMenu li a:hover {
font-weight: bold;


}


which again would be for <a>'s inside <li>'s inside leftMenu.

 

[Big Moxy]

I am re-posting this problem based on comments I received the first
time.

problem url -http://projects.missioninternet.com/proweb/clients/test.php
javascript fix url -http://projects.missioninternet.com/proweb/clients/test2.php

Please go to the "problem url" to see that the "Reports" link unlike
the links below it is black in color and does not respond to mouse
overs. There is one stylesheet definition for the leftMenu div. Here
is the code for the problem page.

<div id="leftMenu">
<div id="leftMenuPad">
<ul>
<li onclick="makeRequest('echo.php?clientID=2')">Reports</li>
<li><a href="invoices.php">Invoices</a></li>
<li><a href="#">Payments</a></li>
<li><a href="/proweb/common/message.php" title="Send private message"
rel="gb_page_center[600, 400]">Send private message</a></li>
<li><a href="viewarchive.php">View archive messages</a></li>
</ul>
</div><!-- end leftMenuPad -->
</div><!-- end leftMenu -->

#leftMenu li {
        list-style: none;
        list-style-position: inside;
        font-size: 12px;
        text-align: left;
        border-bottom: 1px;
        border-bottom-style: solid;
        border-bottom-color: #C4C4C4;}

#leftMenu li a {
        padding: 5px 0 0 0;
        color: #0076D6;
        text-decoration: none;}

#leftMenu li a:hover {
        font-weight: bold;

As a work around I added onMouseOut and onMouseOver behaviors with
javascript to mimic the stylesheet behaviors. Refer to the "javascript
fix url" above. Although this works, I would like to know why onClick
overrode the stylesheet format.

Thank you,
Tim

Hi Tim.

 I see this: <li onclick="makeRequest('echo.php?clientID=2')">Reports</
li>

Which at first, I scratched my head, because that is kind of strange.
(But legal, so..) The rest of your <li>'s have <a> tags. Like this
one.

<li><a href="invoices.php">Invoices</a></li>

The only color information I see would be for <a> in <li> 's inside
leftMenu, and not for <li>

#leftMenu li a {
        padding: 5px 0 0 0;
        color: #0076D6;
        text-decoration: none;

}

And for mouseovers all I see is this:

#leftMenu li a:hover {
        font-weight: bold;

}

which again would be for <a>'s inside <li>'s inside leftMenu.- Hide quotedtext -

- Show quoted text -

Doug,

Thank you for your comments. You pointed out the flaw in my
thinking... that onClick was the same as <a href..>. The reason for
the onClick is that the Javascript uses Ajax to return the results on
the same page. Can you recommend how I can use CSS to define the
onClick behavior (like a:hover)?

- Tim

 

[Doug Gunnoe]

Doug,

Thank you for your comments. You pointed out the flaw in my
thinking... that onClick was the same as <a href..>. The reason for
the onClick is that the Javascript uses Ajax to return the results on
the same page. Can you recommend how I can use CSS to define the
onClick behavior (like a:hover)?

- Tim- Hide quoted text -

- Show quoted text -

Myself, I would do this:

<li><a href="javascript:void(0)" onclick="makeRequest('echo.php?
clientID=2')" />Reports</a></li>

 

[Thomas 'PointedEars' Lahn]

Thank you for your comments. You pointed out the flaw in my
thinking... that onClick was the same as <a href..>. The reason for
the onClick is that the Javascript uses Ajax to return the results on
the same page. Can you recommend how I can use CSS to define the
onClick behavior (like a:hover)?
[...]

Myself, I would do this:

<li><a href="javascript:void(0)" onclick="makeRequest('echo.php?
clientID=2')" />Reports</a></li>

A competent Web developer would do something like this, though:

<li><a href="echo.php?clientID=2"
onclick="makeRequest(this.href + '&amp;xhr=1');
return false;">Reports</a></li>


PointedEaars

 

[David Mark]

Thank you for your comments. You pointed out the flaw in my
thinking... that onClick was the same as <a href..>. The reason for
the onClick is that the Javascript uses Ajax to return the results on
the same page. Can you recommend how I can use CSS to define the
onClick behavior (like a:hover)?
[...]

Myself, I would do this:

<li><a href="javascript:void(0)" onclick="makeRequest('echo.php?
clientID=2')" />Reports</a></li>

A competent Web developer would do something like this, though:

  <li><a href="echo.php?clientID=2"
         onclick="makeRequest(this.href + '&amp;xhr=1');
                  return false;">Reports</a></li>

I am not sure why you are adding the xhr parameter to the query as
presumably the makeRequest function would set an appopriate header to
tell the server side script that it is an Ajax request. Regardless,
the makeRequest function should return a boolean that indicates
whether it succeeded or not.

<li><a href="echo.php?clientID=2"
onclick="return !makeRequest(this.href +
'&amp;xhr=1');">Reports</a></li>

 

[Thomas 'PointedEars' Lahn]

Thank you for your comments. You pointed out the flaw in my
thinking... that onClick was the same as <a href..>. The reason for
the onClick is that the Javascript uses Ajax to return the results on
the same page. Can you recommend how I can use CSS to define the
onClick behavior (like a:hover)?

As you have already observed that a visible hyperlink is not the same as an
intrinsic `onclick' event handler attribute, it should be clear to you that
there is no equivalent. However, since a visible hyperlink can receive the
focus and can be activated, the :focus and :active CSS pseudo-classes apply
to it.

Further CSS questions belong in comp.infosystems.www.authoring.stylesheets.

Please trim your quotes to the minimum required to retain context, as you
could also observe a number of times now.


PointedEars

 

[Big Moxy]

Myself, I would do this:

<li><a href="javascript:void(0)" onclick="makeRequest('echo.php?
clientID=2')" />Reports</a></li>

Thanks, Doug!

 

[Doug Gunnoe]

A competent Web developer would do something like this, though:

  <li><a href="echo.php?clientID=2"
         onclick="makeRequest(this.href + '&amp;xhr=1');
                  return false;">Reports</a></li>

Would he? Would a competent web developer make assumptions about what
"makeRequest" is in this situation?

Also, how do you know what will happen in echo.php when you have not
seen the PHP? How do you know the page will be rendered in the way the
OP wishes?

From the OP, the only real assumption that can be made is that there
is a reason why he wanted to use an onclick event. I would see no
reason to both use an onclick event and resubmit the page back to
PHP.

If you actually bother to read the OP, the problem is simple and
obvious. He just wishes to keep the style consistent between his menu
items and was a little confused about the CSS and a:hover. In fact,
when you clicked on the <li> as he had it written, it worked just fine.

 

[Doug Gunnoe]

Also, how do you know what will happen in echo.php when you have not

seen the PHP? How do you know the page will be rendered in the way the
OP wishes?

Oh, return false :|

Still, my way is far better.

 

[David Mark]

Oh, return false :|

Still, my way is far better.

Your way results in a page that is broken when scripting is disabled
or unavailable. Furthermore, whatever content is returned from
echo.php will be invisible to search engines.

The basic idea is that echo.php should return an entire page unless it
sees a header (or query parameter in this example) that indicates an
Ajax request. That's how you implement an Ajax enhancement that
degrades gracefully.

 

[Doug Gunnoe]

Your way results in a page that is broken when scripting is disabled

or unavailable.

If the function you are calling with the onclick event has an error of
some kind, or hangs and does not finish, browser behavior seems
unpredictable to me.

Example, with intentional error:

<html>
<head>
<script>
function stuff(){
var num;
for(i =0; i<t;i++){
num = i;
}
alert(num);
}
</script>
</head>
<body>
<a href="happy.html" onclick="stuff(); return false;">Click me</a>
</body>
</html>

And the page that it links to

<html>
<head>
</head>
<body>
<h1>Be happy. </h1>
</body>
</html>

So here I would expect the return false to stop the navigation to
happy.html. In IE, happy.html laods anyway, because the return false
statement is never reached. On top of that, it does not display an
error. With javascript:void, the navigation does not happen.

But with all that said, I am ignorant about the specifics of AJAX.

 

[David Mark]

If the function you are calling with the onclick event has an error of
some kind, or hangs and does not finish, browser behavior seems
unpredictable to me.

If it errors, the link is followed. If, in my example, it returns
false, the link is followed. If it hangs (i.e. enters into an
infinite loop), rewrite the function so that it does not. The other
possibility is that it returns true, which, in my example, prevents
the link from being followed.

Example, with intentional error:

<html>
<head>
<script>
function stuff(){
var num;
for(i =0; i<t;i++){
num = i;}
alert(num);
}

</script>
</head>
<body>
<a href="happy.html" onclick="stuff(); return false;">Click me</a>

This is wrong (see my example.) Regardless, if the "stuff" function
errors, the browser will navigate to happy.html.

</body>
</html>

And the page that it links to

<html>
<head>
</head>
<body>
<h1>Be happy. </h1>
</body>
</html>

So here I would expect the return false to stop the navigation to
happy.html. In IE, happy.html laods anyway, because the return false
statement is never reached. On top of that, it does not display an

That will happen in all browsers.

error. With javascript:void, the navigation does not happen.

Which is a bad thing.

But with all that said, I am ignorant about the specifics of AJAX.

This issue isn't specific to Ajax. Any scripted enhancement needs to
work in the same way, unless you want to exclude (and likely anger) a
significant number of users.

 

[Thomas 'PointedEars' Lahn]

Would he? Would a competent web developer make assumptions about what
"makeRequest" is in this situation?

They would not have to as the OP already stated the method to use "Ajax" to
update document content.

Also, how do you know what will happen in echo.php when you have not
seen the PHP?

Because the OP told us.

How do you know the page will be rendered in the way the OP wishes?

I assume the OP to be competent enough to surmise that the addition of
another parameter to the query part of the request would be a way to make a
distinction for the server-side (PHP) script about whether or not to output
the entire document or only the part that is to be updated with "AJAX".

From the OP, the only real assumption that can be made is that there
is a reason why he wanted to use an onclick event.

There is a reason but the OP has not told it yet.

I would see no reason to both use an onclick event and resubmit the
page back to PHP.

`return false' would use the "Ajax" method if script support was present and
enabled, and request the whole document if it was not.

If you actually bother to read the OP, the problem is simple and
obvious.

It would seem you have not understood yet what the OP is doing.

He just wishes to keep the style consistent between his menu
items and was a little confused about the CSS and a:hover. In fact,
when you clicked on the <li> as he had it written, it worked just fine.

But navigation would not have worked without client-side script support.


PointedEars

 

[Thomas 'PointedEars' Lahn]

Oh, return false :|
Exactly.

Still, my way is far better.

Quite the contrary. But perhaps you can provide evidence to back up your
assumption.


PointedEars

 

[Doug Gunnoe]

This is wrong (see my example.) Regardless, if the "stuff" function

errors, the browser will navigate to happy.html.

Which is why I would use javascript:void to keep this from happening.
In my particular case, I did not want the navigation to happen. I
linked to another page to show that the navigation could occur even
with "return false".

JavaScript errors are common. JavaScript can be a bugger to debug. In
a simple script, not a problem. In something complex, testing every
possible use case may not even be possible.

However, I pretty much know what javascript:void is going to do. There
seems to be a general objection to using javascript:void which, IMHO,
is somewhat pretentious. Not in your case, I don't think.

But what if JavaScript is turned off? I mean, what if the computer is
turned off? What if the user does not even have a computer? How can I
expect JavaScript to run in a newspaper?

I just see no reason to be overly concerned about fringe cases.

Like I mentioned, part of the disconnect here is that I don't use AJAX
and I was not answering a question related to AJAX. It was really just
about a little confusion over CSS. (I suppose I need to get with the
<blink>times</blink>).

 

[Doug Gunnoe]

Simple test:

Open IE.
Disable Scripting.
Click your "far better" link.
Tell us what happened.

Why not just disable html?

JavaScript will not run in a newspaper either, Thomas.

From now on I will test every visitor and any user with javascript
disabled will be redirected to a page that says "Assholes without
JavaScript are not welcome here."

 

[Doug Gunnoe]

Simple test:
Open IE.
Disable Scripting.
Click your "far better" link.
Tell us what happened.

JavaScript will not run in a newspaper either, Randy.

Why not just disable html?

From now on I will test every visitor and any user with javascript
disabled will be redirected to a page that says "Assholes without
JavaScript are not welcome here."

 

[My Pet Programmer]

Doug Gunnoe said:

JavaScript will not run in a newspaper either, Randy.

Why not just disable html?

From now on I will test every visitor and any user with javascript
disabled will be redirected to a page that says "Assholes without
JavaScript are not welcome here."

I've never seen someone actively eschew sound advice quite so adamantly.
Requiring your page to display appropriately with scripting turned
off is not exactly considered a fringe use case.

As for the newspaper bit, that completely ruins my next ten project
ideas. This sucks.

 

[Thomas 'PointedEars' Lahn]

Why not just disable html?

Appeal to ridicule.

JavaScript will not run in a newspaper either, Thomas.

Unless I miss something (you have not provided an attribution line
again), you are not even referring to something that I have written.

From now on I will test every visitor and any user with javascript
disabled will be redirected to a page that says "Assholes without
JavaScript are not welcome here."

Good luck; you are going to need it.


PointedEars