Hey there,
I had a look on the StyleWriter class written by Aaron Newton (Clientcide.com
), here's the code they use:
/*
Script: StyleWriter.js
Provides a simple method for injecting a css style element into the
DOM if it's not already present.
License:
http://www.clientcide.com/wiki/cnet-libraries#license
*/
var StyleWriter = new Class({
createStyle: function(css, id) {
window.addEvent('domready', function(){
try {
if (document.id(id) && id) return;
var style = new Element('style', {id: id||''}).inject($$('head')
[0]);
if (Browser.Engine.trident)
style.styleSheet.cssText = css;
else style.set('text', css);
}catch(e){dbug.log('error: %s',e);}
}.bind(this));
}
});
Also have a look at the documentation page here:
http://www.clientcide.com/wiki/cnet-libraries/07-ui/04-stylewriter
Cheers and great work!
Daniel
On 2009-10-19, at 19/October, 3:34 PM, Dimitar Christoff wrote:
and mine's now like so:
...
this.defineCSS(".overflowHidden", "{overflow:hidden}");
},
defineCSS: function(rule, data) {
// not very semantic, I know!
if (document.styleSheets) {
if (Browser.Engine.trident) {
document.styleSheets[0].addRule(rule, data);
} else {
document.styleSheets[0].insertRule(rule + " " + data,
0);
}
}
},
toggleModal: function() {
// modal view for the whole screen
if (this.modal) {
this.container.removeClass("overflowHidden");
if (Browser.Engine.trident)
$(document.html).removeClass("overflowHidden");
this.modal.dispose();
delete this.modal;
return false;
}
this.container.addClass("overflowHidden");
if (Browser.Engine.trident)
$(document.html).addClass("overflowHidden");
this.modal = new Element("div", {
styles: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
background: this.options.modal.background,
zIndex: this.options.modal.zIndex
},
opacity: this.options.modal.opacity,
events: this.options.modal.events
}).inject(this.container);
return this.modal; // can chain into it.
}
http://fragged.org/dev/largerBox.php
works perfectly. how reliable is this type of CSS control as a
practice?
I know that if no javascript -> no CSS, but the graceful degradation
of
the script here means just opening the image into a new window anyway.
it means I can just embed my css ruleset as json into the javascript -
no need to fart around installing css etc files, only one thing to
manage. makes it easier on the end users...
--
Dimitar Christoff <[email protected]> - http://fragged.org/
