Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

changing div position

Status
Not open for further replies.
thysonj

thysonj

Programmer
Jul 6, 2001
240
US
is it possible to change the position of a div? For example
Code: 
<tr>
                        <td>Field1 <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('a', this.checked);&quot;></td>
                        <td rowspan=&quot;7&quot;>
                            <div id=&quot;background&quot; style=&quot;background-color:cccccc;width:100;&quot;>
                                <div id=&quot;a&quot; style=&quot;display:none;&quot;>aaa<br></div>
                                <div id=&quot;b&quot; style=&quot;display:none;&quot;>bbb<br></div>
                                <div id=&quot;c&quot; style=&quot;display:none;&quot;>ccc<br></div>
                                <div id=&quot;d&quot; style=&quot;display:none;&quot;>ddd<br></div>
                                <div id=&quot;e&quot; style=&quot;display:none;&quot;>eee<br></div>
                                <div id=&quot;f&quot; style=&quot;display:none;&quot;>fff<br></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>Field1 <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('b', this.checked);&quot;></td>
                    </tr>
                    <tr>
                        <td>Field1 <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('c', this.checked);&quot;></td>
                    </tr>
                    <tr>
                        <td>Field1 <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('d', this.checked);&quot;></td>
                    </tr>
                    <tr>
                        <td>Field1 <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('e', this.checked);&quot;></td>
                    </tr>
                    <tr>
                        <td>Field1 <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('f', this.checked);&quot;></td>
                    </tr>

When a user checks a checkbox a certain div will appear. If all checkboxed are checked the results look something like this.
Code: 
aaa
bbb
ccc
ddd
eee
fff

Id' like to be able to then change the above order if need to be. to something like this
Code: 
aaa
ccc
eee
ddd
fff
bbb
Is this possible?
 
Sort by date Sort by votes
thysonj,

This should work in all browsers, although I've only tested it in IE6:

Code: 
<html>
<head>
<script type=&quot;text/javascript&quot;>
<!--
	function toggleDiv(divId, displayedFlag)
	{
		if (displayedFlag)
		{
			// clone the node
			var currentDiv = document.getElementById(divId);
			var newDiv = currentDiv.cloneNode(true);

			// place it at the end of the list
			document.getElementById('divContainer').appendChild(newDiv);

			// delete the old node
			currentDiv.removeNode(true);

			// and show the new node
			newDiv.style.display = 'block';
		}
			else
		{
			document.getElementById(divId).style.display = 'none';
		}
	}
//-->
</script>
</head>
<body>
<form>
<table>
	<tr>
		<td>Field A <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('a', this.checked);&quot;></td>
		<td rowspan=&quot;7&quot;>
			<div id=&quot;divContainer&quot; style=&quot;background-color:cccccc;width:100;&quot;>
				<div id=&quot;a&quot; style=&quot;display:none;&quot;>aaa<br></div>
				<div id=&quot;b&quot; style=&quot;display:none;&quot;>bbb<br></div>
				<div id=&quot;c&quot; style=&quot;display:none;&quot;>ccc<br></div>
				<div id=&quot;d&quot; style=&quot;display:none;&quot;>ddd<br></div>
				<div id=&quot;e&quot; style=&quot;display:none;&quot;>eee<br></div>
				<div id=&quot;f&quot; style=&quot;display:none;&quot;>fff<br></div>
			</div>
		</td>
	</tr>
	<tr>
		<td>Field B <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('b', this.checked);&quot;></td>
	</tr>
	<tr>
		<td>Field C <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('c', this.checked);&quot;></td>
	</tr>
	<tr>
		<td>Field D <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('d', this.checked);&quot;></td>
	</tr>
	<tr>
		<td>Field E <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('e', this.checked);&quot;></td>
	</tr>
	<tr>
		<td>Field F <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;1&quot; onclick=&quot;toggleDiv('f', this.checked);&quot;></td>
	</tr>
</table>
</form>
</body>
</html>

I assumes 1 thing:

That you always want the last item you toggled to be at the bottom of the list.

I do this by cloning the node for the DIV, appending it to the end of the &quot;list&quot; (the 'divContainer'), and then deleting the old node (div).

Hope this helps,

Dan
 
Upvote 0 Downvote
This worked but doesn't accomplish exactly what I'd like. The code I originally posted &quot;placed&quot; the items to right right when a checkbox was checked. What I'd like to be able to do is to also move items up and down the list once they are there. I think a combination of the code you gave me(which accomplishes the correct goal of adding an item to the bottom of the list) and another little bit can accomplish this. Ideally users can highlite an item and use up and down arrows to move the item.
 
Upvote 0 Downvote


Aaah - now I understand...


I'll have a look when I get home, assuming the usual Friday night drinking fun & games don't wear me out altogether ;o)

Dan
 
Upvote 0 Downvote
thysonj,

Try this:

Code: 
<html>
<head>

<style type=&quot;text/css&quot;>
.clickableItem
{
	background-color: #CCCCCC;
	color: #000000;
	cursor: pointer;
	width: 100px;
	border-bottom: 1px #FFFFFF solid;
	display: none;
}
.selectedItem
{
	background-color: #000066;
	color: #FFFFFF;
}
</style>

<script type=&quot;text/javascript&quot;>
<!--
	var currentItem = '';
	var numItemsShown = 0;

	function unselectItem(itemId)
	{
		document.getElementById(itemId).className = 'clickableItem';
		if (itemId == currentItem) currentItem = '';
	}

	function selectItem(itemId)
	{
		document.getElementById(itemId).className = 'clickableItem selectedItem';
		currentItem = itemId;
	}

	function itemClicked(itemId)
	{
		if (itemId != currentItem)
		{
			if (currentItem != '') unselectItem (currentItem);
			selectItem(itemId);
		}
			else
		{
			if (document.getElementById(itemId).className.indexOf('selectedItem') != -1) unselectItem(itemId);
				else selectItem(itemId);
		}
		updateButtons();
	}

	function findItemPosition()
	{
		var currentPos = -1;
		for (var loop=0; loop<divContainer.childNodes.length; loop++)
		{
			if (divContainer.childNodes[loop].id == currentItem)
			{
				currentPos = loop;
				break;
			}
		}
		return (currentPos);
	}

	function moveItemUp()
	{
		var currentPos = findItemPosition();
		if (currentPos > 0)
		{
			// swap this item, and the one before it
			divContainer.childNodes[currentPos].swapNode(divContainer.childNodes[currentPos-1]);
		}
	}

	function moveItemDown()
	{
		var currentPos = findItemPosition();
		if (currentPos != -1 && currentPos < (divContainer.childNodes.length - 1))
		{
			// swap this item, and the one after it
			divContainer.childNodes[currentPos].swapNode(divContainer.childNodes[currentPos+1]);
		}
	}

	function updateButtons()
	{
		if (numItemsShown > 1 && currentItem != '') document.getElementById('buttonContainer').style.visibility = 'visible';
			else document.getElementById('buttonContainer').style.visibility = 'hidden';
	}

	function toggleDiv(checkBoxElement)
	{
		var divId = checkBoxElement.value;

		if (checkBoxElement.checked)
		{
			// clone the node
			var currentDiv = document.getElementById(divId);
			var newDiv = currentDiv.cloneNode(true);

			// place it at the end of the list
			divContainer.appendChild(newDiv);

			// delete the old node
			currentDiv.removeNode(true);

			// and show the new node
			newDiv.style.display = 'block';

			numItemsShown++;
			updateButtons();
		}
			else
		{
			unselectItem(divId);
			document.getElementById(divId).style.display = 'none';

			numItemsShown--;
			updateButtons();
		}
	}

	onload = setupPage;
	var divContainer = null;
	function setupPage()
	{
		divContainer = document.getElementById('divContainer');
	}

//-->
</script>
</head>
<body>
<form>
<table>
	<tr>
		<td>Field A <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;a&quot; onclick=&quot;toggleDiv(this);&quot;></td>
		<td rowspan=&quot;7&quot;>
			<div id=&quot;divContainer&quot;>
				<div id=&quot;a&quot; class=&quot;clickableItem&quot; onClick=&quot;itemClicked(this.id);&quot;>aaa</div>
				<div id=&quot;b&quot; class=&quot;clickableItem&quot; onClick=&quot;itemClicked(this.id);&quot;>bbb</div>
				<div id=&quot;c&quot; class=&quot;clickableItem&quot; onClick=&quot;itemClicked(this.id);&quot;>ccc</div>
				<div id=&quot;d&quot; class=&quot;clickableItem&quot; onClick=&quot;itemClicked(this.id);&quot;>ddd</div>
				<div id=&quot;e&quot; class=&quot;clickableItem&quot; onClick=&quot;itemClicked(this.id);&quot;>eee</div>
				<div id=&quot;f&quot; class=&quot;clickableItem&quot; onClick=&quot;itemClicked(this.id);&quot;>fff</div>
			</div>
		</td>
		<td rowspan=&quot;7&quot;>
			<div id=&quot;buttonContainer&quot; style=&quot;visibility:hidden;&quot;>
				<a href=&quot;javascript:moveItemUp();&quot;>Up</a>
				<br>
				<a href=&quot;javascript:moveItemDown();&quot;>Down</a>
			</div>
		</td>
	</tr>
	<tr><td>Field B <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;b&quot; onclick=&quot;toggleDiv(this);&quot;></td></tr>
	<tr><td>Field C <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;c&quot; onclick=&quot;toggleDiv(this);&quot;></td></tr>
	<tr><td>Field D <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;d&quot; onclick=&quot;toggleDiv(this);&quot;></td></tr>
	<tr><td>Field E <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;e&quot; onclick=&quot;toggleDiv(this);&quot;></td></tr>
	<tr><td>Field F <input type=&quot;checkbox&quot; name=&quot;test&quot; value=&quot;f&quot; onclick=&quot;toggleDiv(this);&quot;></td></tr>
</table>
</form>
</body>
</html>

The &quot;up&quot; and &quot;down&quot; links are only available when:

1. There are more than 1 items being displayed (no point in swapping 1 item with itself!), and
2. When there is an item highlighted (otherwise the code wouldn't know what item to move).

It's not the best code in the world, and it only works in IE (swapNode and removeNode haven't makde it out into the wild yet), but it should give you a starting point to improve upon, when you get the time.

Hope this helps,

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
malibu65k
  • Locked
  • Question
Hide/Unhide div using Radio button onClick
Replies
4
Views
250
malibu65k
malibu65k
ahm1985
  • Locked
  • Question
get the value of row before changing in table if cancel click
Replies
0
Views
161
ahm1985
ahm1985
Julierme
  • Locked
  • Question
Selecting leaflet markers and changing marker icons
Replies
0
Views
191
Julierme
Julierme
bluemask11
  • Locked
  • Question
jQuery hide div class if total equal to 0
2
Replies
23
Views
607
bluemask11
bluemask11

Part and Inventory Search

Sponsor

Back
Top