By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,964 Members | 1,290 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,964 IT Pros & Developers. It's quick & easy.

Reordering DIV sections

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a
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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.