Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Translate Javascript into CSS

Translate Javascript into CSS

Translate Javascript into CSS

Is it possible to take the effect of this Javascript and have it directly in the CSS instead?

CODE --> Javascript

<script type="text/javascript">
        $("[src*=plus]").live("click", function () {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
            $(this).attr("src", "/Content/Images/minus.png");

- Matt

"If I must boast, I will boast of the things that show my weakness"

RE: Translate Javascript into CSS


Translate Javascript into CSS
Basically, you can't,

CSS does not have a "OnClick" equivalent and the src attribute is not a CSS modifiable property, as CSS does not / cannot alter the Document Object Model (DOM).

CSS affects the presentation not the content (apart from a couple of minor instances)


Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Translate Javascript into CSS

Hi Matt, I'm afraid what you are requesting is not possible as of present.

CSS is a style markup language, it gets a series of 'rules' given to your web browser which dictate HOW you want your actual webpage content to appear and look on the screen.

CSS is not a client-side scripting language, Javascript and jQuery are. Interestingly, I am now wondering whether the terminology of 'client scripting' is to broad a term - because I had a 'debate' with peers on whether CSS was actualy more than just a 'stylesheet markup language' , i.e its also a 'client side scripting language'.

I came to the conclusion CSS is simply a STYLESHEET MARK-UP LANGUAGE that gets interpretted by the browser at run-time/click go ( or if you write html/css localy then on 'browser refresh' heh ) and applies the 'styling' to the html markup elements which in turn is renedered as a webpage in the DOM by the browser. That is the job of the browser.

CSS can not itself, make changes to the Document Object Model (DOM). That is not what its designed for. That is only done using Javascript and its derivative libraries/frameworks on the client-side, though I'm sure its possible to modify html attributes using php but I will not get into that as its beyond the scope of what we're discussing.

Maybe one day they will make JCSS ? with basic dom manipulation funtionality coupled with all the niceness of css ? ^_^


RE: Translate Javascript into CSS

You're asking a too specific thing here. I think this is part of defining a treeview behaviour changing a treeviewnodes icon from [+] (expandable subtree available) to [-] (collapse subtree).

If that's right, there are ways to create an interactive/clickable treeview in pure CSS, which needs a little trickery, as CSS can only define looks of elements under certain conditions, eg whether you hover over an element or not, whether a checkbox is checked or not, etc.

This JSFiddle I found googling CSS treeview works via invisible checkboxes attached to each tree node: http://jsfiddle.net/Friar_Broccoli/6LKc6/
So to get a Treeview without jQuery/Javascript you'd need to redo it fully, you can't just convert this part by part and feature by feature.

Bye, Olaf.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close