On Mar 23, 2:33 pm, mkmanning <michaell...@gmail.com> wrote:
> Presumably, which points out a recurring problem: because we don't
> know the OP's intended use, vis-à-vis actual markup and CSS, etc.
> everything we suggest is somewhat academic.
Other suggestions proposed iterating over collections of elements, I
was pointing out an alternative.
> There's a tradeoff with
> modifying style rules vs. using class names. If you find yourself
> having to alter too many styles, it can become cumbersome and more
Naturally, the intention is not to iterate over anything and simply
modify a single rule.
> prone to errors
It is no more error prone than any other method.
> (and your presentation layer is now beginning to
> pollute your behavior layer).
Not necessarily. The values to be altered can themselves be
encapsulated in css rules accessed by class - instead of iterating
over some collection of elements with the same class, you swap the
rules of one class for those of another.
> Class names allow you to roll up several
> styles into one 'package' as well as take advantage of CSS hierarchy
> (which you could use e.g. to affect the results of the js modification
> to the style).
Which is not precluded by altering style rules, it is just a different
approach.
> For the OP's situation, i.e. changing a background image, it might be
> even more efficient to use a sprite-- a single image (so you'd only
> have a single http request), and re-position the image on each
> rotation. That could be done in the JavaScript as you suggest, but I'd
> still prefer to abstract it to classes rather than have to keep
> position information in the js:
Moving an image within an element with overflow hidden can be achieved
either way. The style data does not have to be hard coded in the
script, it only needs to be passed parameters that tell it which rules
to replace with which other rules, that can be all the rules of class
A with all the rules of class B (or similar).
> .img1,.img2, .img3,.img4,.img5 {
> background-image:#fff url(some_image_url) 0 0 no-repeat;}
>
> .img2{
> background-position:0 100px;}
>
> .img3{
> background-image:50px 0;}
>
> etc...
.theDisplayedRule {}
now just write the rules in .imgN to .theDisplayedRule and any element
with class theDisplayedRule will get the changes.
> Since it's presentational,
That is not precluded by swapping rules, it depends on how it is
implemented.
[...]
> I think the fact that everybody has a
> different approach makes it very interesting though; I hope the OP can
> see at least that there are many ways to come at the same problem.
Yes.
--
Rob
