On 28 October 2011 16:37, Richard Quadling <[email protected]> wrote: > On 20 October 2011 13:30, Luke <[email protected]> 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
The rules exist and I have a width of 50px set already. It is something that works for me. -- 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 [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
