Solved

Use CSS to reorder DIVS?

Posted on 2007-04-09
3
874 Views
Last Modified: 2013-11-19
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.
0
Comment
Question by:jdhibberd
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 30

Expert Comment

by:VirusMinus
ID: 18879486
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
%>
}
'------------------
0
 
LVL 50

Accepted Solution

by:
Steve Bink earned 500 total points
ID: 18879639
Another idea, based in javascript.  This means you should not have to reload the page to reorder the divs, but this is not a purely CSS solution.

Create a javascript array of the heights of each of the 4 divs.  When a reorder is completed you should have an array of the new order.  For each div in the neworder, set its top property to be (top of first div + height of every div before it).  For example, when the page starts, maybe it is array(1,2,3,4).  After reorder will look like:

var baseheight=100;  // the absolute top of the very first div
var heights=(220,180,60,40);
var neworder = (2,1,4,3);  // set by the user through your interface
for (w=0;w<neworder.length;w++) {
  thisdiv = neworder[w] - 1; // index starts at 0
  newheight = 0;
  for(z=0;z<w;z++) {
    newheight += heights[neworder[z]];  //get the height for the div pointed to by neworder[z]
  }
  // now newheight hold the combined height of previous divs
  // add the baseheight to get the new top value
  newtop = baseheight + newheight;
  // set the properties on div[w] now
  document.getElementById('div' + w).style.top=newtop;
}

This is rough, and will need love to work properly, but should give you the general idea.  The arrays for original heights can be constructed after the page has been loaded, or maybe even database driven.
0
 

Author Comment

by:jdhibberd
ID: 18893379
It took a bit of massaging, but the javascript is working like a charm.  Thanks for your help.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS - how to make button/link change to black on hover? 2 35
Disabling a Faux Submit Button 4 41
css messed up 8 30
CSS background-color 5 21
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

710 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question