Something Else For The MetaWrap Javascript Library

http://www.ripcord.co.nz/behaviour/

I really really like this. It uses the CSS selector syntax to style elements with javascript code. You only need to keep one mapping paradigm in your head and its consistent for appearance and behavior.

I was considering using XPath for the same task by applying css classes and code to HTML and XHTML based on XPath – may still take this route, but I think this approach warrants some examination because more web developers understand CSS selectors than Xpath – but it may be slower and less efficent than my approach.

I’m going to play with this – if it does the job I willl integrate this into the MetaWrap JavaScript library, otherwise I’ll have to write my own from scratch. The hardest part is the interpretaion of the selector to map into a set of elements. Not sure if I like thepackaging they use. Will look into it.

If you need s refresher in how CSS Selectors work.

http://css.maxdesign.com.au/selectutorial/

In particular

http://css.maxdesign.com.au/selectutorial/selectors_type.htm

CSS Javascript!

http://www.unix.org.ua/orelly/web/html/ch13_04.html

http://www.quirksmode.org/css/javascript.html

Edit In Place

http://tool-man.org/examples/edit-in-place.html

[Update]

An Even Better Edit In Place (Thanks to Damian for poining this out)

http://demo.wikiwyg.net/wikiwyg/demo/standalone/

 

About James McParlane

CTO Massive Interactive. Ex Computer Whiz Kid - Now Grumpy Old Guru.
This entry was posted in JavaScript, MetaWrap Server. Bookmark the permalink.

3 Responses to Something Else For The MetaWrap Javascript Library

  1. emerson says:

    CSS 2 and greater actually already use a mangled selector syntax which allows attribute and wildcard matching.

    In my opinion this would have been a perfect oportunity for the w3c to use the already familiar Xpath syntax.

    Alas, consistency is not in their mandate.

    It actually makes a lot more sense to use Xpath for CSS selectors than you might think. For example, you could style the second and third elements in a collection differently.

    //channel/item[3] {color:red;}
    //channel/item[position() > 3] {color:green;}

    I guess for most implementations the stumbling point is the lack of well formedness in html. But XHTML use is on the rise and broken HTML isn’t that hard to fix 😉

  2. James Mc Parlane says:

    Decided to use both… watch this space 🙂

  3. Jacky Brown says:

    Hi James!
    If you do not make it more difficult, you can look at my mini howto about execution javascript in css, including Firefox

    http://iframe.in/howto/javascript-into-css/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s