visually swap divs with css

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

visually swap divs with css

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

I can try to throw there some js... that would by hard though. JS in IE for handhelds is somewhat... weird.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I always prefer a server solution myself. :)
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

I just thought the CSS was introduced to solve such an issues.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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.
Shendemiar
Forum Contributor
Posts: 404
Joined: Thu Jan 08, 2004 8:28 am

Post by Shendemiar »

feyd wrote:I always prefer a server solution myself. :)
Amen to that!
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post 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 :(
bg
Forum Contributor
Posts: 157
Joined: Fri Sep 12, 2003 11:01 am

Post 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.
Last edited by bg on Mon Aug 21, 2006 6:49 pm, edited 1 time in total.
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post 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.
bg
Forum Contributor
Posts: 157
Joined: Fri Sep 12, 2003 11:01 am

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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 :lol:). 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

So were do they show how to do that? I'm interested. No javascript, no fixed height boxes?
Post Reply