SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Wizard big_al's Avatar
    Join Date
    May 2000
    Location
    Victoria, Australia
    Posts
    1,661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ListBox Question

    Hi,

    just wondering if anyone knew how or if it is at all possible to have a listbox that allows you to change the rank/ possition of an item in it, without having to re-load the page?

    Similar to what alot of applications allow you to do with items in the toolbar if that helps at all.

    Thanks in Advance
    .NET Code Monkey

  2. #2
    Xbox why have you forsaken me? moospot's Avatar
    Join Date
    Feb 2001
    Location
    Clearwater, FL
    Posts
    3,615
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With DHTML you can move elements around on a page. I'm sure that you could apply this in a menu format. I'm not sure about a list box though.

  3. #3
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Al,

    I'm not sure if this is what you was after but it may be of
    help. I think it'll need some adapting for N4 and the 'copytextarea'
    doesn't work in N6. I was fooling around with this for our
    intranet so dealing with N4 wasn't an issue for me.

    Code:
    <!-- saved from url=(0022)http://internet.e-mail -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    	<title>Dynamic form elements</title>
    	<style type="text/css">
    	.button {
    		background-color: #ffcc00;
    		color: #000000;
    		font-size: 10px;
    		font-family: Verdana, Arial;
    		width: 70px;
    	}
    	.buttonon {
    		background-color: #999900;
    		color: #FFFFFF;
    		font-size: 10px;
    		font-family: Verdana, Arial;
    		width: 70px;
    		cursor: hand;
    	}
    	.textbox, .selectlist {
    		font-size: 10px;
    		font-family: Verdana, Arial;
    	}
    	h2 {
    		color: #000066;
    		font-size: 10pt;
    		font-family: Arial;
    		font-weight: bold;
    		margin: 30px 0px 0px 0px;
    	}
    	hr {
    		color: #000066;
    		height: 1px;
    		width: 400px;
    		text-align:left;
    	}
    	form {
    		margin: 10px;
    	}
    	.message {
    		position: absolute;
    		z-index: 100;
    		top: 100px;
    		left: 100px;
    		width: 250px;
    		height: 100px;
    		background-color: #ccccff;
    		color: #000000;
    		border-style: solid;
    		border-width: 1px;
    		border-color: #000000;
    		font-size: 11px;
    		font-family: verdana, arial;
    		vertical-align: middle;
    		text-align: center;
    		visibility: hidden;
    	}
    	</style>
    	<script type="text/javascript">
    	
    	function buttonColorChange(id, dir) {
    				
    		var objButton = getObject(id);
    		
    		if (objButton == null)
    			return;
    		
    		if (dir == 1)
    			objButton.className = "buttonon"
    		else
    			objButton.className = "button"
    	}
    	
    	function copyText(text1, text2) {
    		
    		var strText;
    		var objTextArea1 = getObject(text1);
    		var objTextArea2 = getObject(text2);
    		
    		if ((objTextArea1 == null) || (objTextArea2 == null))
    			return;
    		
    		strText = objTextArea1.innerText;
    		objTextArea2.innerText = strText;
    
    	}
    	
    	function moveOption(text1, text2) {
    		var intIndex;
    		var objSelect1 = getObject(text1);
    		var objSelect2 = getObject(text2);
    		
    		if ((objSelect1 == null) || (objSelect2 == null))
    			return;
    		
    		intIndex = -1;
    		
    		intIndex = objSelect1.selectedIndex;
    		if (intIndex >= 0) {
    			optionText = objSelect1.options[intIndex].text;
    			optionValue = objSelect1.options[intIndex].value;
    			optionNumber = objSelect2.options.length;
    			objSelect2.options[optionNumber] = new Option(optionText, optionValue);
    			
    			//Delete option from select list 1
    			objSelect1.options[intIndex] = null;
    			
    			//Set selected option
    			lastIndex = objSelect1.options.length -1;
    			if (lastIndex >= 0) 
    				objSelect1.options[lastIndex].selected = true;
    				
    			objSelect2.options[optionNumber].selected = true;
    		}
    	}
    
    	function moveOptionUp(text1) {
    
    		var intIndex;
    		var intNumber;
    		var objSelect = getObject(text1);
    		
    		if (objSelect == null)
    			return;
    		
    		intIndex = -1;
    		intNumber = -1
    		
    		intIndex = objSelect.selectedIndex;
    		intNumber = objSelect.options.length - 1;
    		if ((intIndex > 0) && (intIndex <= intNumber)){
    			//Get value to move up
    			optionValue1 = objSelect.options[intIndex].value;
    			optionText1 = objSelect.options[intIndex].text;
    			
    			//Get value to move down
    			optionValue2 = objSelect.options[intIndex-1].value;
    			optionText2 = objSelect.options[intIndex-1].text;
    			
    			//Swap options values
    			objSelect.options[intIndex].value = optionValue2;
    			objSelect.options[intIndex].text = optionText2;
    			
    			objSelect.options[intIndex-1].value = optionValue1;
    			objSelect.options[intIndex-1].text = optionText1;
    			
    			//Set selected option
    			objSelect.options[intIndex-1].selected = true;
    		}
    		
    	}
    	
    		
    	function moveOptionDown(text1) {
    
    		var intIndex;
    		var intNumber;
    		var objSelect = getObject(text1);
    		
    		if (objSelect == null)
    			return;
    			
    		intIndex = -1;
    		intNumber = -1
    		
    		intIndex = objSelect.selectedIndex;
    		intNumber = objSelect.options.length - 1;
    		if ((intIndex < intNumber) && (intIndex >= 0)) {
    			//Get value to move down
    			optionValue1 = objSelect.options[intIndex].value;
    			optionText1 = objSelect.options[intIndex].text;
    			//Get value move up
    			optionValue2 = objSelect.options[intIndex+1].value;
    			optionText2 = objSelect.options[intIndex+1].text;
    			
    			//Swap options values
    			objSelect.options[intIndex].text = optionText2;
    			objSelect.options[intIndex].value = optionValue2;
    			
    			objSelect.options[intIndex+1].text = optionText1;
    			objSelect.options[intIndex+1].value = optionValue1;
    			
    			//Set selected option
    			objSelect.options[intIndex+1].selected = true;
    		}
    	}
    	
    	function setOrderList(selectId, hiddenId) {
    	
    		var strList;
    		var objSelect = getObject(selectId);
    		var objHidden = getObject(hiddenId);
    		
    		strList = "";
    		if ((objSelect == null) || (objHidden == null))
    			return;
    		
    		//Get the number of elements in select list
    		intNumber = objSelect.options.length - 1;
    		for (i = 0; i <= intNumber; i++) {
    			//Get the element value
    			strValue = objSelect.options[i].value;
    			if (strValue != null)
    				//Append the value
    				strList = strList + strValue;
    			if (i < intNumber)
    				strList = strList + ","
    		}
    		//Set the hidden field value
    		objHidden.value = strList;
    
    	}
    	
    	function moveOptionSetLists(selectId1, selectId2, hiddenList1, hiddenList2) {
    		
    		//Move the option
    		moveOption(selectId1, selectId2);
    			
    		//Set the hidden option lists
    		setOrderList(selectId1, hiddenList1);
    		setOrderList(selectId2, hiddenList2);
    		
    	}
    	
    	function changeOptionOrderSetList(selectId1, dir, hiddenList1) {
    		
    		//If direction is one then move option up
    		//else move it down
    		if (dir == 1)
    			moveOptionUp(selectId1);
    		else
    			moveOptionDown(selectId1);
    			
    		//Set the hidden option list
    		setOrderList(selectId1, hiddenList1);
    		
    	}
    	
    	function getObject(id){
    		var obj = null;
    		if (document.getElementById) obj = document.getElementById(id);
    		else if (document.all) obj = document.all[id];
    		return obj;
    	}
    	
    	function showMessageBox(id) {
    	
    		var objBox = getObject(id);
    		
    		if (objBox == null)
    			return;
    		objBox.style.visibility = "visible";
    
    	}
    	function hideMessageBox(id) {
    		
    		var objBox = getObject(id);
    		
    		if (objBox == null)
    			return;
    		objBox.style.visibility = "hidden";
    	}
    
    	
    	</script>
    </head>
    
    <body>
    
    <div id="messagebox" class="message">
    	<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    	<tr>
    		<td align="center"><span style="font-size: 11px;">Processing request. Please wait.</span></td>
    	</tr>
    	<tr>
    		<td height="15" bgcolor="#535782">&nbsp;</td>
    	</tr>
    	</table>
    </div>
    
    <h2>Copy textarea contents</h2>
    <hr>
    <form action="" method="post">
    <table>
    	<tr>
    	<td>
    		<textarea class="textbox" cols="20" rows="5" name="mytext" id="mytext"></textarea>
    	</td>
    	<td>
    		<input type="button" name="btncopy" value="Copy &raquo;" class="button" onClick="copyText('mytext','newtext')">	
    	</td>
    	<td>
    		<textarea class="textbox" cols="20" rows="5" name="newtext" id="newtext"></textarea>
    	</td>
    	</tr>
    </table>
    </form>
    <h2>Move options</h2>
    <hr>
    <form action="" method="post">
    <table>
    	<tr>
    	<td>
    		<select style="width: 100px" class="selectlist" size="5" name="select1" id="select1">
    			<option value="1">shane</option>
    			<option value="2">jim</option>
    			<option value="3">bob</option>
    			<option value="4">dave</option>
    		</select>
    	</td>
    	<td>
    		<input type="button" id="btnmoveright" name="btnmoveright" value="Move &raquo;" class="button" onClick="moveOptionSetLists('select1','select2', 'select1order', 'select2order')">
    		<br>
    		<input type="button" id="btnmoveleft" name="btnmoveleft" value="&laquo; Move" class="button" onClick="moveOptionSetLists('select2','select1', 'select1order', 'select2order')">
    	</td>
    	<td>
    		<select style="width: 100px" class="selectlist" size="5" name="select2" id="select2">
    		</select>
    	</td>
    	</tr>
    </table>
    <input type="hidden" name="select1order" id="select1order" value="1,2,3,4">
    <input type="hidden" name="select2order" id="select2order" value="">
    </form>
    
    
    <h2>Move option values up/down</h2>
    <hr>
    <form action="" method="post">
    <table border="0">
    	<tr>
    	<td>
    		<select style="width: 100px" class="selectlist" size="8" name="select3" id="select3">
    			<option value="1">shane</option>
    			<option value="2">jim</option>
    			<option value="3">bob</option>
    			<option value="4">dave</option>
    			<option value="5">john</option>
    			<option value="6">tom</option>
    		</select>
    	</td>
    	<td valign="top">
    		<table border="0" cellspacing="0" cellpadding="0">
    		<tr>
    			<td valign="top" height="13">
    			<input type="button" id="btnmoveup" name="btnmoveup" value="Up" class="button" onClick="changeOptionOrderSetList('select3', 1, 'select3order')">
    			</td>
    		</tr>
    		<tr>
    			<td valign="top" height="13">
    			<input type="button" id="btnmovedown" name="btnmovedown" value="Down" class="button" onClick="changeOptionOrderSetList('select3', 0, 'select3order')">
    			</td>
    		</tr>
    		</table>
    	</td>
    	</tr>
    </table>
    <input type="hidden" name="select3order" id="select3order" value="1,2,3,4,5,6">
    </form>
    
    
    <h2>Process request</h2>
    <hr>
    <input class="button" type="button" id="btnrequest" name="btnrequest" value="process request" style="width: 150px;" onClick="showMessageBox('messagebox')">
    <br>
    <input class="button" type="button" id="btnrequeststop" name="btnrequeststop" value="stop request" style="width: 150px;" onClick="hideMessageBox('messagebox')">
    
    
    
    
    </body>
    </html>
    <edit>Updated the scripts to use a function to get the layer,
    simplifying the functions. Original function code to get layer
    was from post by Anarchos (I think).</edit>
    Last edited by shane; Aug 8, 2001 at 12:02.

  4. #4
    SitePoint Wizard big_al's Avatar
    Join Date
    May 2000
    Location
    Victoria, Australia
    Posts
    1,661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    THANKS SHANE!

    Thats exactly what I'm after!! Your a champion!

    .NET Code Monkey


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •