www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] change order of <li> item with javascript

  1. #1
    Join Date
    Jul 2010
    Posts
    7

    resolved [RESOLVED] change order of <li> item with javascript

    Is it possible to change order of <li> item with JavaScript by using a string variable?
    The string variable is coming from <%=(Recordset2.Fields.Item("neworder").Value)%>.
    The string variable value may be 1,2,3 or 2,3,1 or 3,2,1.
    I would like the numbers in the string variable represent the <li> order or positions.
    <ul>
    <li><%=(Recordset2.Fields.Item("image_code_A").Value)%></li>
    <li><%=(Recordset2.Fields.Item("image_code_B").Value)%></li>
    <li><%=(Recordset2.Fields.Item("image_code_C").Value)%></li>
    </ul>
    for example: if string variable = 2,3,1 then the list would display:
    <li><%=(Recordset2.Fields.Item("image_code_B").Value)%></li>
    <li><%=(Recordset2.Fields.Item("image_code_C").Value)%></li>
    <li><%=(Recordset2.Fields.Item("image_code_A").Value)%></li>

    Thanks in advance

  2. #2
    Join Date
    May 2010
    Posts
    109
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	var listOrder = "3,1,2";
    
    	function init(){
    
    		var nList = document.getElementsByTagName('ul')[0];
    		var nEntry = nList.getElementsByTagName('li');	
    		var nEntryCopy = [];
    		for (i=0; i<nEntry.length; i++)
    			{
    			 nEntryCopy[nEntryCopy.length] = nEntry[i].firstChild.data;
    			}
    		while (nList.lastChild)
    			{	
    			 nList.removeChild(nList.lastChild);
    			}	
    		listOrder = listOrder.split(",");
    		for (i=0; i<nEntryCopy.length; i++)
    			{			 
    			 var nEntry = document.createElement('li');	
    			 nEntry.appendChild(document.createTextNode(nEntryCopy[listOrder[i]-1]));
    			 nList.appendChild(nEntry);
    			}		
            }	
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	 body {background-color: #fffacd; margin-top: 60px;}
    
    	
    </style>
    </head>
    	<body>
    		<ul>
    			<li> One </li>
    			<li> Two </li>
    			<li> Three </li>
    		</ul>
    	</body>
    </html>

  3. #3
    Join Date
    Jul 2010
    Posts
    7
    Thank you Westerly.
    This is exactly what I need to work with.
    Thanks so, so much.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles