Tuesday, November 6, 2007

This plugin allows quick creation/manipulation of CSS Rules, in a "jQuery-way".
It includes features like chaining, iteration using each, selectors with context.
Many functions are available, like slice, pushStack, not, add, remove, append, css, and some more.
As far as it has been tested, the plugin should perform well in most browsers, some specials methods still need some more testing. Feedback is much appreciated.

62
comments:

Anonymous
said...

This is really neat code, and I have a great idea of how to use it to implement 'client-side hierarchical CSS,' like the SASS plugin for Ruby on Rails. However, I do note that the code does not work on the iPhone.

Hi I'm glad that you like my plugin, and you find it useful.I haven't tried it on any iphone. I suppose DOM CSS rules have some quirks in Safari 3 IPhone. I did test it on Safari 3 Windows, and it worked perfectly.Cheers.

Once again, excellent work Ariel. At first, I was thinking, "when would I use this?" But after realizing that it is actually changing the RULE itself, it can come in quite handy, especially if AJAX-generated content needs to be re-styled, so to speak.

Thanks for taking the time to make a diff.I assumed you had the last release.

So, I don't now much change in your diff, you're only trimming 'txt' which I don't think is crucial.

As I told you, If I split the selectors on IE, it will generate more rules than on the rest of the browsers.Then if you use methods like .eq() or .filter(), it will yield different results, leading to unexpectable problems/errors.

1. In IE, it seems to be necessary to specify the CSS rule using capitals for the HTML elements, e.g.

DIV.resMed#main DIV#detMedia

even when in the style sheet it is in lower-case. Is this right? Firefox seems to be case-insensitive.

The other problem was that I sometimes got an error which looked like it was because of a cross-domain AJAX request, when accessing styles in an external stylesheet (i.e. using the 'link' element), even though the style sheet was on my domain. Strangely, it only happened some of the time and was quite difficult to replicate (although if you want I will try). This problem cleared up when I put the rule I wanted to change in a 'style' element instead.

Thanks again anyway - a useful plugin and an underestimated technique,Charles

I am having trouble with the conversion of rules to lower case. Since IE is case sensitive, getting and then re-applying the css is problematic when the classes applied to elements has any upper case in it.

Is there a critical reason why .cssText() and outerText() have to return everything converted to lower? e.g. if I remove the toLowerCase() will it blow up?

In FF3.5 (seems to be the same with chrome), storageNode stylesheet is inserted after the script tag used to load jquery.rule. So added rules can be without effect, because overwriten by already existing stylesheets. Perhaps the storageNode should be added only when the dom is ready

hello ariel i am anirudhawhen i write a article in blogspot then blogspot give me small size in middle of page but i want to write look like your blog how it can possible in blogspot so send me answer to anirudhakumar.gupta@gmail.com

Hi. I like your plugin, but I've run into a problem when trying to unit test an application that uses it. I'm running it through Rhino with the Env.js DOM, and the storageNode on line 39 has neither "sheet" nor "styleSheet" attributes, causing an error. I'm not sure whether this is a problem with jQuery.Rule or Env.js, but I thought I'd let you know.

Obviously, it's not critical that styles work properly in a DOM that never gets rendered, so to avoid the errors I've just conditionally disabled parts of the plugin when running tests on Rhino.

Hi,I have a submenu of a parent item which is always expanded on all pages of my site. The submenu links to anchors within the page that the parent item links to. I have localscroll working nicely when you are on the page that contains the anchors but when I try link to one of the anchors from a different page it does not animate or retain the top offset specified. Is there a way to do this?

The only setting I have currently is:$.localScroll({offset:-147});

I apologize if this is already mentioned somewhere, I spent some time looking but it’s been a long day so might have missed it :) .

This is a Great plugin and I´ve been using it for a time. However I couldn´t find an update or a recent version, since my project upgraded jquery core. Finally I stumbled on a google search and fixed the old version to work. That version is from may 2010. Please give this tool a better place to live & survive, to be found (update jQ plugin page) and make more people happy -as I am for this little goodie! Thanks Arial.

There is a very nice up-to-date library for fetching and setting CSS rules named JSS (https://github.com/Box9/jss). It is not jQuery but pure Javascript. It has a really nice API and is quite small. And if you are looking for animations using CSS rules then I just relased a tiny jQuery extension named jQuery Fanimate (https://github.com/medihack/jquery-fanimate). Works with jQuery 1.4.3+.

Could you run your code through jslint please (http://jslint.com/)? There are some best practices that your code urgently needs to adopt. The worst is the dual use of $rule as both a constructor and an instantiated object. The use of '==' instead of '===' and 'property in object' are additional problematic aspects. Thank you for the great tool.

Could you run your code through jslint please (http://jslint.com/)? There are some best practices that your code urgently needs to adopt. The worst is the dual use of $rule as both a constructor and an instantiated object. The use of '==' instead of '===' and 'property in object' are additional problematic aspects. Thank you for the great tool.

can there be ANY documentation for this plugin? I really appreciate the hard work that has been done, but until there's decent documentation, the plugin is making people's lives harder, not easier.P.S. the 27-line (31 if you count blank lines) is NOT a documentation, and I'm sad that I cannot write the docs myself because I'm not that familiar with the code.