How would I go about reordering divs without altering the HTML source code?
example, I want divs to appear in order #div2, #div1, #div3, but in the HTML they are:
<div id="#div1"></div>
<div id="#div2"></div>
<div id="#div3"></div>
Thanks!
views:
2517answers:
7
A:
If you are literally not allowed or able to touch the HTML, but are linking to a style sheet, you could do it from there.
#div1
{
--Position it with whatever CSS positioning method you'd like
}
etc.
colithium
2009-02-17 20:40:38
A:
Since you tagged jQuery, you could use javascript to remove the elements and then re-insert them although that may not be all too flexible.
Having a bit more context would net you better answers I think.
Tom Ritter
2009-02-17 20:44:52
+1
A:
Here is an excellent example of reordering child elements. The example code reorders them randomly, but you could modify it to use any order you specified.
Peter J
2009-02-17 20:44:58
A:
There is no catch-all way of reordering elements with css.
You can inverse their order horizontally by floating them all to the right. Or you can position them absolutely relative to the body or some other containing element - but that comes with severe limitations regarding the size of the elements, and positioning relative to other elements on the page.
Short answer: You can only achieve this in a very limited set of circumstances. Reordering elements is best done in markup.
If you have no control over the html, you could use javascript. Here using jQuery:
$("#div2").insertAfter("#div3");
$("#div1").prependTo("#div2");
I certainly don't recommend that unless your hands are tied. It will be harder to maintain, and for your end users it will make your page "jerk around" while its setting up the page.
Magnar
2009-02-17 20:46:18
+1
A:
In jQuery, you can do the following:
$("#div1").insertAfter("#div2");
That will move the element with id 'div1' to after element with id 'div2'. This assumes that you eliminate the '#' from your id attributes.
jonstjohn
2009-02-17 20:52:12
Doh! My mouse was *on* the submit button to say the same thing.
Crescent Fresh
2009-02-17 20:54:30
ha! sorry, guess I got this one!
jonstjohn
2009-02-17 23:19:45
A:
You could do, in Javascript:
function reOrder() {
divOne = document.getElementById('#div1');
divTwo = document.getElementById('#div2');
divThree = document.getElementById('#div3');
container = divOne.parentNode;
container.appendChild(divTwo);
container.appendChild(divOne);
container.appendChild(divThree);
}
Edit: Fixed typo in IDs.
+1
A:
I would use Javascript to traverse the nodes accordingly. If you want to use a library like jQuery, you can use the above suggestions. If you'd prefer not to have the bloat, use the following simple and minimalistic solution...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function swapSibling(node1, node2) {
node1.parentNode.replaceChild(node1, node2);
node1.parentNode.insertBefore(node2, node1);
}
window.onload = function() {
swapSibling(document.getElementById('div1'), document.getElementById('div2'));
}
</script>
</head>
<body>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</body>
</html>
Best regards...
EDIT: Changed function name from swapNode to swapSibling, as I am fairly certain this will only work with nodes that have the same parent.
Josh Stodola
2009-02-17 20:55:01