On 20 October 2011 13:30, Luke <lukas.bomb...@googlemail.com> wrote:
> 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.
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
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
