Link to home
Start Free TrialLog in
Avatar of jdhibberd
jdhibberd

asked on

Use CSS to reorder DIVS?

I have a set of divs.  What I want is to be able to reorder them dynamically.  For instance, one client may want to display 1, 2, 3, 4 (vertical) and another might want to show the page with modulels in different order, like 3, 2, 4, 1.  Each client could have a different layout.  

They will also be able to select different font styles and sizes, so the divs won't have the same size for each client.  I'm cosing for IE (using ASP).  Is there some way to do this without a lot of code-behind or similar?  Ideally it would be purely CSS.
Avatar of VirusMinus
VirusMinus
Flag of Australia image

CSS is client side. not server side.

Is the user going to choose what order they would like the divs in? or is it random?

The way i can think of doing this is to use dynamic CSS, i.e the CSS is written out using server side code.

eg.

your CSS file can be a server side code file, like styles.asp and in there you can conditionally exclude or write out CSS

eg.

<link rel="stylesheet" type="text/css" title="alt" media="screen" href="style.asp?order=1" />

you could write out the link rel with a random number or a number option chosen by the user.

eg.

<link rel="stylesheet" type="text/css" title="alt" media="screen" href="style.asp?order=<%=anyRandomNumber%>" />

in the file you can then use server side loops, conditional statements, switch case etc. and output your CSS. but for this to work, you must set the MIME content type of the file to "text/css", this can be done in asp as
<% Response.ContentType = "text/css" %>

ideally put the MIME content type statement as the first line. then in your style.asp you could do something like this;

so your styles.asp CSS file could look something like this;

'styles.asp
'-----------
<% Response.ContentType = "text/css" %>
body {
<%
if request("color") = "" then
%>
color: red;
<%
else
%>
color: <%=request("color")%>;
<%
end if

'check querystring value
if request.querystring("order") = 1 then

'put one order of divs here

elseif request.querystring("order") = 2 then

'put different order of divs here

else

'put another order here

end if
%>
}
'------------------
ASKER CERTIFIED SOLUTION
Avatar of Steve Bink
Steve Bink
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jdhibberd
jdhibberd

ASKER

It took a bit of massaging, but the javascript is working like a charm.  Thanks for your help.