Oh, forgot to mention, I thought I'd post some code here as an example
of what I'd like to be able to do (though it's not possible yet)
$('.someclass').each (function (thisElemNum)
{
var elem = $(this);
var newProps = {
left : someLeftVal,
top : someTopVal
};
elem.animate (newProps, 'slow')
});
$('.someclass', document.styles).animate ({width : 100, height:
100},'slow');
That way, the top and left, which need to be set on a per-element
basis get modified the old way, but the width and height for all
elements that match the given class is animated with a stylesheet
rule.
On Jul 4, 9:51 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote:
> 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?
