For those who like the idea of manipulating stylesheet styles, I added some
hacks that let you animate styles (even using Interface.js) and use
.css(property) to retrieve the property for that style. So
$.style('td').animate({width : 100, color: 'green'}, 'slow') changes all TD
elements (using Interface), but potentially much more smoothly than
$('td').animate({width : 100, color: 'green'}, 'slow') would, since it only
affects one element.
$.style(selector).css('height') returns the height from the stylesheet if it
was defined with $.style , otherwise it finds the first element that matches
the selector and returns its height. If no elements match, it will throw an
error. I'm still working on that!
Another issue: "toggle" animations look very choppy. I'm not sure why.
As before, you can specify the media, as in
$.style(selector, {media: 'print'}).css('height')
The code:
$.style = function (selector, options){
options = $.extend ({type: 'text/css', media: 'all'}, options);
var sheet = $.style.sheets[options.media];
if (!sheet){
var style =
$(document.createElement('style')).attr(options).appendTo('head')[0];
if (style.styleSheet){
// IE
$.style.sheets[options.media] = sheet = style.styleSheet;
}else if (style.sheet){
// Firefox
$.style.sheets[options.media] = sheet = style.sheet;
sheet.rules = []; // lets us use the same rules array
}
}
if (sheet.rules [selector]) return $(sheet.rules [selector]);
if (sheet.cssRules){
// Firefox
sheet.insertRule(selector+' {}',sheet.cssRules.length);
sheet.rules[selector] = sheet.cssRules[sheet.cssRules.length-1];
}else{
// IE
sheet.addRule(selector, null);
sheet.rules[selector] = $.extend({},
sheet.rules[sheet.rules.length-1]); // the original rule is read-only;
create a writeable copy
}
return $(sheet.rules[selector]);
};
// hacks
$._curCSS = $.curCSS;
$.curCSS = function(elem, prop, force) {
if (elem.selectorText){
// its a cssRule
// Try to get the property directly, or find a real element
// with that property and use it
prop = prop.replace(/\-(\w)/g,function(m,c){return c.toUpperCase();});
return elem.style[prop] || elem.style.getPropertyValue &&
elem.style.getPropertyValue(prop) || $(elem.selectorText).css(prop);
}else{
return $._curCSS(elem, prop, force)
}
};
$._css = $.css;
$.css = function (e,p){
if (e.selectorText) return $.curCSS(e,p);
else return $._css(e,p);
}
Danny Wachsstock wrote:
>
> This may be helpful to someone: I made a jQuery extension that lets you
> change the stylesheet styles, rather than the inline styles (which is what
> jQuery generally does). So you can do:
>
> $.style('p').css('color','green');
>
> creates a stylesheet with a rule that sets the color of P elements,
> including any that are created in the future. That's different from
> $('p').css('color','green'); which changes the color of any existing P
> elements only.
>
> It also takes an options object that can specify the media of the
> stylesheet, so:
>
> $.style('div', {media: 'print'}).css('background', 'none');
>
> sets the background only for printing.
>
> Some notes:
> --The selector can only be something that your browser understands; no
> XPath or CSS3 or other fancy jQuery stuff.
> --The returned object is not a real jQuery object but an array of CSS
> rules; most of the jQuery functions will give errors. The only useful
> function that works is .css(), and that only to set the style;
> $.style('p').css('color') gives an error. There ought to be a way to get
> the style, but I haven't found it yet.
> --For large numbers of elements, it ought to be faster to change the
> stylesheet than to change the style of each element, but I haven't tested
> that yet.
>
> The code:
> <!-- Old code -->
> Enjoy!
>
> Danny Wachsstock
>
--
View this message in context:
http://www.nabble.com/Creating-stylesheets-in-jQuery-tf3298905.html#a9196442
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
