Adding CSS-Rules to a styletag in Prototype

[Luke]

Hi there,

I wanna add CSS-Definitions to a <style>-tag using Prototype. In all "good" browsers (ALL^IE) this works by simplay appending a CSS-String to the desired <style>-tag. IE doesn't like this though. I found [1] that in IE you can update the entire contents of the style-tag using an attribute named cssText but that doesn't append but replace the all definitions.

So I was wondering, does Prototype JS already have a method to append style-definitions to a styletags for all browsers?

Thanks,

Lukas

[1] http://acidmartin.wordpress.com/2009/05/06/creating-style-tag-with-javascript-and-adding-rules-to-it/

[joe t.]

i don't think Prototype has a method for directly editing a STYLE tag
(only for modifying styles on element[s].

But
http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
seems to offer a couple cross-browser approaches by examining feature
support to determine which way to append style rules to the interior
of a STYLE tag.

i haven't tested, but as they say, seems legit.
-joe t.

On Oct 17, 11:55 am, Luke <lukas.bomb...@googlemail.com> wrote:
> Hi there,
>
> I wanna add CSS-Definitions to a <style>-tag using Prototype. In all "good"
> browsers (ALL^IE) this works by simplay appending a CSS-String to the
> desired <style>-tag. IE doesn't like this though. I found [1] that in IE you

> can update the entire contents of the style-tag using an attribute named *
> cssText* but that doesn't append but replace the all definitions.

>
> So I was wondering, does Prototype JS already have a method to append
> style-definitions to a styletags for all browsers?
>
> Thanks,
> Lukas
>

> [1]http://acidmartin.wordpress.com/2009/05/06/creating-style-tag-with-ja...

[Walter Lee Davis]

I find that with a tiny bit of planning, you can do these sorts of global changes by setting up class-based styles beforehand, and then using invoke('addClassName','foo') to add the appearance to any number of elements in one whack.

Walter

[Luke]

Thanks, Joe T.

Walter: The problem is, that on my page the user can add/remove contents and also change the styles of those contents dynamically using JS. Now if you set a Style to certain elements, either via changing the style-tag or adding a class-name and *afterwards* add content, that content won't be styled. Of course, I save the applied style-settings in my backend and so I could apply the style-definitions when I generate the added content, but that maybe that might not be the case anymore in the future and also it's easier to set a style-definition in a style tag, rather than doing the backend-thing.

[Richard Quadling]

I've no idea if this will be useful, but just to explain some background.

I have a page which displays about 100 company names in columns
(rather than in rows). To achieve this, knowing the maximum width of
the elements was required and then setting the CSS width for that
style so all were styled correctly.

IE, FF and Chrome supported.

Also, I use a CSS and JS combinator, so I only have 1 JS and CSS file request.

Working on using a single image one also, so 4 loads per page (HTML,
CSS, JS and IMG). CSS, JS and IMG are cached, so page loading is a LOT
faster and server load WAY down.

But I digress ...

function sizeElements(o_Container)
{
console.group('sizeElements(', arguments, ')');

// Set the size on formInput labels and scrollBox labels
// Siblings only.
['.formInput > label', '.scrollBox > label'].each
(
function(s_CSS)
{
console.group('sizeElements.each(', arguments, ')');

// Size the labels to the widest.
var i_LargestLabel = o_Container.select(s_CSS +
':not(.nonSpacing):not(.shortNonSpacing)').invoke('getWidth').max();

// If there was a size, then update the container's CSS rule.
if ( i_LargestLabel != undefined)
{
var o_CSS = window.document.styleSheets[0];
var o_CSSRules = (o_CSS.cssRules) ? o_CSS.cssRules : o_CSS.rules;
var o_CSSRule =
o_CSSRules[$A(o_CSSRules).pluck('selectorText').invoke('toLowerCase').indexOf('#'
+ o_Container.id.toLowerCase() + ' ' + s_CSS.toLowerCase())];

o_CSSRule.style.width = i_LargestLabel + 'px';
}
console.groupEnd();
}
);

console.groupEnd();
}

Programmatically, I'm looking to set the width on the CSS rules of

.formInput > label
and
.scrollBox > label

--
Richard Quadling
Twitter : EE : Zend : PHPDoc : Fantasy Shopper
@RQuadling : e-e.com/M_248814.html : bit.ly/9O8vFY : bit.ly/lFnVea :
fan.sh/6/370

[Richard Quadling]

The rules exist and I have a width of 50px set already.

It is something that works for me.