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/
