I left out one line of code in my previous reply. Add this line before the
two function definitions:
var head = document.getElementsByTagName('head')[0];
Oops! :-)
-Mike
> From: Michael Geary
>
> You are definitely on the right track, Gordon.
>
> Here's the code you need:
>
> // Add a stylesheet with the given CSS styles (a text string)
> // and return a reference to it
> function addStyleSheet( css ) {
> var sheet = document.createElement( 'style' );
> sheet.type = 'text/css';
> head.appendChild( sheet );
> if( sheet.styleSheet )
> sheet.styleSheet.cssText = css;
> else
> sheet.appendChild( document.createTextNode(css) );
> return sheet;
> }
>
> // Replace a stylesheet with new CSS styles (a text string)
> // and return a reference to it
> function changeStyleSheet( sheet, css ) {
> if( sheet.styleSheet )
> sheet.styleSheet.cssText = css;
> else
> sheet.replaceChild(
> document.createTextNode(css), sheet.firstChild );
> return sheet;
> }
>
> // Example - add an empty stylesheet and then
> // replace it with new styles
> var sheet = addStyleSheet( '' );
> changeStyleSheet( sheet,
> '#test-id { /*...*/ } .test-class { /*...*/ }' );
>
> Note that you don't try to access any existing stylesheet in
> your document.
> You could do that, but I think it's better to create a new
> sheet dynamically
> just for this purpose.
>
> Given this code, can you think of a way to set all four
> position and size
> values for *all* of your elements in a single
> changeStyleSheet() call, so
> that you won't have to set any style attributes directly on the DOM
> elements? That would make your animation even faster than you
> are hoping
> for.
>
> If the answer doesn't jump out at you, give me a shout back
> and I'll post a
> more detailed example.
>
> -Mike
>
> > From: Gordon
> >
> > When working with jquery and javascript in general I have
> > found that manipulating DOM attributes, especially those
> > associated with the appearence of an element, can be rather
> > slow. In one script I am working on I have to animate a
> > group of elements at once, but each element has to get a
> > different top and left position. This means that each element
> > must get its own top and left styles.
> >
> > Another thing the loop has to do is change the width and
> > height of the elements being processed, but in this case all
> > elements get the same dimensions.
> >
> > The loop currently manipulates 4 attributes per element
> > (style.width, style.height, style.top, style.left) and can
> > get rather slow when working with a large number of elements.
> >
> > this.each (function (thisElemNum)
> > {
> > var elem = $(this);
> > // Calculate the new position and dimensions for the element
> > var newProps = {
> > left : someLeftVal,
> > top : someTopVal,
> > width : 100,
> > height : 100
> > };
> > elem.animate (newProps, speed)
> > });
> >
> > (The width and height can change from one invokation of the
> > loop to the next, but for each invokation they remain
> constant for all
> > iterations)
> >
> > One idea that occured to me is that instead of animating the
> > width and height on a per-element basis, I could use CSS to
> > define the width and height and then animate those attributes
> > by changing the width and height degined in the stylesheet.
> > This would mean only animating 2 attributes per element, plus
> > a further 2 in the stylesheet as opposed to 4 attributes per
> > element, which should hopefully lead to a considerable
> > speedup. I would give all the elements a class, define a
> > width and height for that class in the stylesheet and then
> > change that with animate() in order to change the width and
> > height of all elements similtaniously.
> >
> > The only problem is I have no idea how to go about doing it.
> > Is doing what I want to be able to do even possible? If so,
> > how do I get at the stylesheet node and manipulate it like I
> > would a DOM element?
> >
>
