473,325 Members | 2,792 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

Reordering DIV sections

I have 12 div sections on a page and I want the user to be able to
specify the order in which they appear on the page. I'm thinking of
something like this but want to ask what people think of this approach
and maybe suggest another way or an article on how to do this. Thanks.

// grab the innerhtml by:
var theSpan1 = getElementById("span1")
var theSpan1HTML = theSpan1.innerHTML

// then grab the innerHTML of the span you want to "swap" it to:
var theSpan2 = getElementById("span2")
var theSpan2HTML = theSpan2.innerHTML

// and switch the innerHTML's of the span by:
theSpan1.innerHTML = theSpan2HTML
theSpan2.innerHTML = theSpan1HTML
<form>
<span id="span1">
<div id="div1">
<select size="1" name="ddlOrder1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Span1/Div1
</div>
</span>

<br />

<span id="span2">
<div id="div2">
<select size="1" name="ddlOrder2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Span2/Div2</div>
</span>

<br />

<span id="span3">
<div id="div3">
<select size="1" name="ddlOrder3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Span3/Div3</div>
</span>

<input type="submit" value="Save Profile" class="smalltext"
name="btnSaveProfile" onclick="changeOrder()">
</form>

Jan 31 '06 #1
2 2417
ev*******@gmail.com wrote:
I have 12 div sections on a page and I want the user to be able to
specify the order in which they appear on the page. I'm thinking of
something like this but want to ask what people think of this approach
and maybe suggest another way or an article on how to do this. Thanks.

// grab the innerhtml by:
var theSpan1 = getElementById("span1")
getElementById is a method of the document object:

var theSpan1 = document.getElementById("span1");
It is not strictly necessary to end all statements JavaScript with a
semi-colon, but it is recommended as good coding practice.

var theSpan1HTML = theSpan1.innerHTML
Your HTML shows a div nested inside a span which is invalid HTML. What
various browsers might do with that is not necessarily consistent.
There seems little point is simply wrapping a div in a span anyway -
just remove the span elements (or the divs).

You have form controls inside the span. Their innerHTML may also differ
between browsers since innerHTML does not have a public standard for
implementation. When you 'move' the elements using innerHTML, you will
get different results on different browsers.

It would be far better to use DOM methods to move elements around, e.g.

<div id="div01">div 01</div>
<div id="div02">div 02</div>
<input type="button" value="Swap divs"
onclick="swapEm('div01','div02');">

<script type="text/javascript">
function swapEm(idA, idB)
{
var a = document.getElementById(idA);
var b = document.getElementById(idB);
a.parentNode.insertBefore(b, a)
}
</script>
Feature testing is required before using getElementById and
insertBefore, both are widely (though not universally) supported.


// then grab the innerHTML of the span you want to "swap" it to:
var theSpan2 = getElementById("span2")
var theSpan2HTML = theSpan2.innerHTML

// and switch the innerHTML's of the span by:
theSpan1.innerHTML = theSpan2HTML
theSpan2.innerHTML = theSpan1HTML
<form>
Forms must have a action attribute, even if it's empty.

<span id="span1">
<div id="div1">
A block element (a div here) can't appear inside an inline element (a span).

<select size="1" name="ddlOrder1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Span1/Div1
</div>
</span>

<br />


Is this really XHTML? If not, use normal HTML tags.
[...]

--
Rob
Jan 31 '06 #2
RobG said the following on 1/30/2006 10:04 PM:
ev*******@gmail.com wrote:
I have 12 div sections on a page and I want the user to be able to
specify the order in which they appear on the page. I'm thinking of
something like this but want to ask what people think of this approach
and maybe suggest another way or an article on how to do this. Thanks.

// grab the innerhtml by:
var theSpan1 = getElementById("span1")


getElementById is a method of the document object:

var theSpan1 = document.getElementById("span1");
It is not strictly necessary to end all statements JavaScript with a
semi-colon, but it is recommended as good coding practice.


Depending on the statement, of course :-)
In this case it doesn't hurt to add it though.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 31 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: tgh003 | last post by:
So lets assume I have a list of tasks in db table (table looks like: ID, task, sort) And I want to reorder the task list without updating all the records in the table. I dont want to run a sql...
0
by: Mel Draper | last post by:
Hello all, I have tried searching for this. I need a listbox populated by my database table where users can re-order the list of items and submit the changes. I can do the listbox and populate...
4
by: DaKoadMunky | last post by:
<CODE> #include <iostream> using namespace std; int Foo(int x,int y) { int result = x; result*=y; result+=y;
11
by: Laszlo Zsolt Nagy | last post by:
Hello, Do you know how to implement a really efficient self reordering list in Python? (List with a maximum length. When an item is processed, it becomes the first element in the list.) I would...
4
by: Nathaniel Price | last post by:
I'm new to this list, so I'm not sure if this is the right place to post this. If not, please direct me to where it would be better to post it. Anyway, I'm creating a report generation tool of...
5
by: John Dann | last post by:
Can anyone point me to a tutorial on reordering items within a single listbox using the mouse, ie drag and drop, specifically with vb.net. Google shows me various half-references eg to related...
1
by: NickP | last post by:
Hi there, I am trying to implement drag and drop reordering of controls that are placed in a FlowLayoutPanel control but unfortunately as the control collection doesn't have an "insert" method I...
2
by: greenflame | last post by:
I am trying to reorder elements of a list and I am stuck as to what might be the best way to approach this. I have a (main) list of elements and another (ordering) list (which is may shorter, but...
5
by: Steven T. Hatton | last post by:
If find the following excerpt from the Standard a bit confusing: <quote> 3.3.6 - Class scope -1- The following rules describe the scope of names declared in classes. 1) The potential scope...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.