LSLGuy
04-04-2009, 12:21 AM
We do just enough CSS to be dangerous. And we've got a weird problem between CSS & JS that got bubbled up to me. And I'm more of a CSS noob than a pro, particularly when it comes to the very dark gray art (to me) of positioning.
We have html like this:
<div id='outer'>
content1
<div id='innerA'>content A</div>
<div id='innerB'>content B</div>
content2
</div>Which renders lke
content1
contentA
contentB
content2
So far so good. That's what we want.
But ... one customer wants it to render like
content1
content2
contentA
contentB
We'd like to drive this change solely through CSS just for that one customer. If absolutely necssary we could break the nesting of the divs, provided we could retain the original appearance via changed CSS for everybody else.
Just a couple small complicators ...
Run time JavaScript on the page generates all these divs and resizes them on the fly. E.g. the JS creates <div id='outer' style='width:###px; height:###px'> where the ### is dynamically calculated based on external factors. The script then pokes the div (and its children) into the DOM.
And the four content pieces are dynamic too. So there are no fixed sizes of anything which can be embedded in the css as offsets.
I'm trying to avoid smartening the JS if possible since there are an infinity of positioning options customers might want. (e.g. make contentA render above everything, and Content B off to the right. Or vice versa. or ...)
If CSS can handle it, that leaves all the heavy lifting to that infrastructure rather than our code.
What I really want is a way to say place this adjacent to the left/right/top/bottom edge of that, for arbitrary values of this and that.
Anybody wanna take a crack at it? Or is this just not do-able?
Thanks in advance to all who reply.
We have html like this:
<div id='outer'>
content1
<div id='innerA'>content A</div>
<div id='innerB'>content B</div>
content2
</div>Which renders lke
content1
contentA
contentB
content2
So far so good. That's what we want.
But ... one customer wants it to render like
content1
content2
contentA
contentB
We'd like to drive this change solely through CSS just for that one customer. If absolutely necssary we could break the nesting of the divs, provided we could retain the original appearance via changed CSS for everybody else.
Just a couple small complicators ...
Run time JavaScript on the page generates all these divs and resizes them on the fly. E.g. the JS creates <div id='outer' style='width:###px; height:###px'> where the ### is dynamically calculated based on external factors. The script then pokes the div (and its children) into the DOM.
And the four content pieces are dynamic too. So there are no fixed sizes of anything which can be embedded in the css as offsets.
I'm trying to avoid smartening the JS if possible since there are an infinity of positioning options customers might want. (e.g. make contentA render above everything, and Content B off to the right. Or vice versa. or ...)
If CSS can handle it, that leaves all the heavy lifting to that infrastructure rather than our code.
What I really want is a way to say place this adjacent to the left/right/top/bottom edge of that, for arbitrary values of this and that.
Anybody wanna take a crack at it? Or is this just not do-able?
Thanks in advance to all who reply.