Translate Javascript into CSS

[tqeonline]

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

    <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");
        });
    </script>

- Matt

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

 

[ChrisHirst]

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)



Chris.

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

 

[c0deM0nK424]

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 ? ^_^

heh

 

[Olaf Doschke]

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.