Link to home
Start Free TrialLog in
Avatar of mdonley
mdonley

asked on

Is it possible to specify an element's onClick behaviour in CSS?

I have a page where I am dynamically creating a bunch of items via javascript.  Those items are clickable, and the onclick handler is currently specified in Javascript as below:

                  t.onclick=function(){
                        //do something;
                        return false;
                  }

However, on postback, all of these items lose their onclick behaviors.  As I review the output, I notice that the onClick attributes never get written to the output html, so I assuming the handlers just remain in memory on that page.  When the page is posted back, all of those handlers are gone.

My next step was to try using "setAttribute" to specify the onClick functions, but that did not seem to work at all, as nothing was clickable even on the first loading of the page.

I already have a CSS class specified for all of these, so I was just wondering if I could enforce the onClick behavior in CSS, so that I don't have to find another way to set the onClick attribute for these elements.

Any help you could offer would be very much appreciated.  I am posting this with big points because I need an answer fast.
Avatar of b0lsc0tt
b0lsc0tt
Flag of United States of America image

mdonley,

I doubt it.  CSS does have the pseudo-class hover and a few others that work with elements like anchors (e.g. a:hover).  This would allow you to set color and similar things for CSS.  However Javascript can't permenantely change those (the changes disappear when you go to a new page) and the CSS can only effect things related to style, format, etc.  If your script is setting varialbes, events, etc then CSS will be no help.

Let me know if you have any questions or need more information.

b0lsc0tt
SOLUTION
Avatar of GoofyDawg
GoofyDawg
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of mdonley
mdonley

ASKER

To elaborate, what I have is a series of "<LI>" elements that act as dropdowns, and when clicked on, an attached layer either displays or disappears.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of mdonley

ASKER

The site is IE-only as part of a company intranet, so I lucked out there.  I actually think I may abandon this approach.  This was being done as part of an effort to provide expanded dropdowns for a form.  The standard IE support for the "<select>" element means that if you specify a size, the dropdown options list is limited to that size as well, causing longer text values to be truncated.  Other browsers (like firefox) show the element on the form at the selected size, but the dropdown options list is expanded to show full text of all options.

I was trying to code in great circles to try to accomplish the look and feel of a dropdown using layers, DHTML, and javascript.

I took a step back and decided to abbreviate some of my long text values and go back to using the  standard "<select>" element boxes.

I will share the points around, giving a slightly larger share to AlbertVanHalen, because had I continued along this path, his would have been the suggestion I would have been able to work.
Avatar of mdonley

ASKER

Thanks again!
Got busy with my "real" work, so I couldn't return to this, but you might check out EXT.js which is an extension of the Yahoo UI library. You don't need YUI as EXT can stand alone, but it has a cross-browser select box that will expand the drop-down to the width of your longest text. Works like a charm!

GoofyDawg