Page 1 of 3
visually swap divs with css
Posted: Mon Aug 21, 2006 8:06 am
by Weirdan
Given the following markup:
Code: Select all
<html>
<div style='width:300px;border:solid silver 1px'>
<div style='border:solid green 1px;'>
first div
</div>
<div style='border:solid red 1px;'>
second div
</div>
</div>
</html>
which renders as:
Code: Select all
+----------------------------+
| first div |
+----------------------------+
+----------------------------+
| second div |
+----------------------------+
how would I visually reorder it via css to show up like this:
Code: Select all
+----------------------------+
| second div |
+----------------------------+
+----------------------------+
| first div |
+----------------------------+
I can't use 'position:relative;top:-<div height>px;' & 'position:relative;top:<div height>px;' because I don't know the heights of divs in advance (their content is dinamically generated)
feyd | appears to have been accidentally stickied; undone.
Posted: Mon Aug 21, 2006 9:29 am
by matthijs
I don't think that's possible without some javascript to calculate the heights of the divs on the fly.
Maybe if you knew the height of one, it would be possible. But not if you don't know any heights.
Posted: Mon Aug 21, 2006 9:49 am
by Weirdan
I can try to throw there some js... that would by hard though. JS in IE for handhelds is somewhat... weird.
Posted: Mon Aug 21, 2006 10:30 am
by Weirdan
Finally, I decided to just use different template for handheld devices. With quirky css, very limited js and overall weirdness of IE on my iPAQ it isn't worth the hassle to try to solve it on the client-side.
Posted: Mon Aug 21, 2006 10:33 am
by feyd
I always prefer a server solution myself.

Posted: Mon Aug 21, 2006 10:39 am
by Weirdan
I just thought the CSS was introduced to solve such an issues.
Posted: Mon Aug 21, 2006 10:46 am
by feyd
I don't feel they were introduced to solve tag placement issues. Separating visual logic away, yes. While they sound similar I don't agree that they are. I only see a very small amount of overlap.
Posted: Mon Aug 21, 2006 12:07 pm
by Weirdan
I don't feel they were introduced to solve tag placement issues.
It wasn't tag placement issue. It was purely visual issue with placing boxes generated by these tags.
Posted: Mon Aug 21, 2006 1:30 pm
by Shendemiar
feyd wrote:I always prefer a server solution myself.

Amen to that!
Posted: Mon Aug 21, 2006 2:36 pm
by Benjamin
Just tell your clients to turn their monitor upside down.
Actually, You'll really need javascript to do this. CSS is only designed to seperate content from layout, not make dynamic interfaces. Or as feyd said you can do it server side, but that would require a refresh

Posted: Mon Aug 21, 2006 2:41 pm
by bg
I disagree that something like this should be left up to the server. The server should spit out straight content. Let css and javascript dom handle everything visual-wise. It's about time we let the clientside handle it's load of the responsibility.
As far as an answer to your problem, a messy way to do things would be to use absolute positioning. Positioning things this way ignores the the order in which elements are introduced into the DOM. This solution would require lots of positioning and sizing logic, therefor I wouldn't recommend it.
Another solution would be to reorder the DOM tree using javascript, using relative positioning to let things fall into place. The dom tree is ordered according to when the elements are introduced in the HTML file. If you have two divs at the top of the dom tree, swap their position.
Just some ideas.
Posted: Mon Aug 21, 2006 3:19 pm
by Oren
I believe this can be done with CSS (without anything else). I just haven't figured out how. When I find a solution, I'll post it here.
Edit:
http://www.webcredible.co.uk has done it and it is working with JavaScript disabled too, that's why I believe this can be done with pure CSS.
Posted: Mon Aug 21, 2006 3:32 pm
by bg
Oren wrote:I believe this can be done with CSS (without anything else). I just haven't figured out how. When I find a solution, I'll post it here.
Edit:
http://www.webcredible.co.uk has done it and it is working with JavaScript disabled too, that's why I believe this can be done with pure CSS.
The only way to do it in pure CSS is to use absolute positioning. The original poster also seemed to want to do this in a more dynamic way, as in, being able to swap the two divs after they have been originally rendered on the screen.
Posted: Mon Aug 21, 2006 3:33 pm
by Weirdan
astions wrote:Just tell your clients to turn their monitor upside down.
That would be relatively easy (PDA are much easier to rotate

). If only I would get text in those boxes rotated....
CSS is only designed to seperate content from layout, not make dynamic interfaces.
Heck, that
is layout! Where is the dynamic you're referring to here?
Posted: Mon Aug 21, 2006 3:34 pm
by matthijs
So were do they show how to do that? I'm interested. No javascript, no fixed height boxes?