SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard silver trophy Bleys's Avatar
    Join Date
    Feb 2003
    Location
    RI-USA
    Posts
    5,620
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Dynamic List Box

    I want a list box where users can move items up and down (rank them) similar to the way MyYahoo! allows users to set the order of news sources on their site.

    Here is an example of what I mean: http://members.evolt.org/jeff/code/rank_select.cfm

    The catch is, I want it all javascript if possible.

    Another option would be side by side list boxes that can swap info. Something like: http://www.massless.org/_tests/listboxswap/

    Except, again, straight javascript... no ASP.

    Anyone have any ideas/know of any examples?

    Thanks.

    -Josh

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bleys
    I want a list box where users can move items up and down (rank them) similar to the way MyYahoo! allows users to set the order of news sources on their site.

    Here is an example of what I mean: http://members.evolt.org/jeff/code/rank_select.cfm

    The catch is, I want it all javascript if possible.

    Another option would be side by side list boxes that can swap info. Something like: http://www.massless.org/_tests/listboxswap/

    Except, again, straight javascript... no ASP.

    Anyone have any ideas/know of any examples?

    Thanks.

    -Josh
    that example at evolt was javascript + html?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
     <title>Rank Select</title>
      <style type="text/css">
      <!--
    	body, td {
    	  background: window;
    	  color: windowtext;
    	  font: icon;
    	}
    	
    	select {
    	  background: window;
    	  color: windowtext;
    	  font: icon;
    	}
    	
    	input {
    	  background: buttonface;
    	  color: buttontext;
    	  font: icon;
    	}
    	small {
    	  color: graytext;
    	}
      -->
      </style>
      <script language="JavaScript" type="text/javascript">
      <!--
    	function moveOption(selectObj, direction)
    	{
    	  if(selectObj.selectedIndex != -1)
    	  {
    		if(direction < 0)
    		{
    		  for(i = 0; i < selectObj.options.length; i++)
    		  {
    			swapValue = (i == 0 || selectObj.options[i + direction].selected) ? null : selectObj.options[i + direction].value;
    			swapText = (i == 0 || selectObj.options[i + direction].selected) ? null : selectObj.options[i + direction].text;
    			if(selectObj.options[i].selected && swapValue != null && swapText != null)
    			{
    			  thisValue = selectObj.options[i].value;
    			  thisText = selectObj.options[i].text;
    			  selectObj.options[i].value = swapValue;
    			  selectObj.options[i].text = swapText;
    			  selectObj.options[i + direction].value = thisValue;
    			  selectObj.options[i + direction].text = thisText;
    			  selectObj.options[i].selected = false;
    			  selectObj.options[i + direction].selected = true;
    			}
    		  }
    		}
    		else
    		{
    		  for(i = selectObj.options.length - 1; i >= 0; i--)
    		  {
    			swapValue = (i == selectObj.options.length - 1 || selectObj.options[i + direction].selected) ? null : selectObj.options[i + direction].value;
    			swapText = (i == selectObj.options.length - 1 || selectObj.options[i + direction].selected) ? null : selectObj.options[i + direction].text;
    			if(selectObj.options[i].selected && swapValue != null && swapText != null)
    			{
    			  thisValue = selectObj.options[i].value;
    			  thisText = selectObj.options[i].text;
    			  selectObj.options[i].value = swapValue;
    			  selectObj.options[i].text = swapText;
    			  selectObj.options[i + direction].value = thisValue;
    			  selectObj.options[i + direction].text = thisText;
    			  selectObj.options[i].selected = false;
    			  selectObj.options[i + direction].selected = true;
    			}
    		  }
    		}
    	  }
    	}
    	function selectAll(selectObj)
    	{
    	  for(i = 0; i < selectObj.options.length; i++)
    	  {
    		selectObj.options[i].selected = true;
    	  }
    	  return false;
    	}
      // -->
      </script>
    	<script language="JavaScript" type="text/javascript">
    	<!--
    	  top.document.title = document.title;
    	  
    	  function onLoad()
    	  {
    		if(self != top)
    		{
    		  for(var i = 0; i < document.links.length; i++)
    		  {
    			if(document.links[i].target == '')
    			{
    			  if(document.links[i].href.indexOf('#') == -1)
    				document.links[i].target = '_top';
    			  else
    				document.links[i].target = '_self';
    			}
    		  }
    		  top.document.all['content'].style.height = (top.document.body.clientHeight - 33) + 'px';
    		}
    	  }
    	  window.attachEvent('onload', onLoad);
    	// -->
    	</script>
    	</head>
    <body>
    <form onSubmit="return selectAll(this.id_list)">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td colspan="2">
      <select name="id_list" id="id_list" size="10" multiple style="width: 90px">
      
      <option value="1">AAAAAAA</option>
      
      <option value="2">BBBBBBB</option>
      
      <option value="3">CCCCCCC</option>
      
      <option value="4">DDDDDDD</option>
      
      <option value="5">EEEEEEE</option>
      
      <option value="6">FFFFFFF</option>
      
      <option value="7">GGGGGGG</option>
      
      <option value="8">HHHHHHH</option>
      
      <option value="9">IIIIIII</option>
      
      <option value="10">JJJJJJJ</option>
      
      <option value="11">KKKKKKK</option>
      
      <option value="12">LLLLLLL</option>
      
      <option value="13">MMMMMMM</option>
      
      <option value="14">NNNNNNN</option>
      
      <option value="15">OOOOOOO</option>
      
      <option value="16">PPPPPPP</option>
      
      <option value="17">QQQQQQQ</option>
      
      <option value="18">RRRRRRR</option>
      
      <option value="19">SSSSSSS</option>
      
      <option value="20">TTTTTTT</option>
      
      <option value="21">UUUUUUU</option>
      
      <option value="22">VVVVVVV</option>
      
      <option value="23">WWWWWWW</option>
      
      <option value="24">XXXXXXX</option>
      
      <option value="25">YYYYYYY</option>
      
      <option value="26">ZZZZZZZ</option>
      
      </select>
      </td>
    </tr>
    <tr>
      <td width="45"><input type="button" onClick="moveOption(this.form.id_list, -1)" value="5" title="Move Up" style="width: 45px; height: 25px; font-family: webdings; font-size: 10px"></td>
      <td width="45"><input type="button" onClick="moveOption(this.form.id_list, 1)" value="6" title="Move Down" style="width: 45px; height: 25px; font-family: webdings; font-size: 10px"></td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" value="Save" style="width: 90px"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>

  3. #3
    SitePoint Wizard silver trophy Bleys's Avatar
    Join Date
    Feb 2003
    Location
    RI-USA
    Posts
    5,620
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok, well. I'm asking this question for a friend (trying to find info for her)... so I'm not entirely sure.

    But I thought that the info at the evolt one was parsed (?) with cfm... not sure what that means, entirely though. So I could be using that term wrong. Either way, I thought some part of it had cold fusion... maybe not though. Hopefully not... then she could just use that one!

  4. #4
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bleys
    Ok, well. I'm asking this question for a friend (trying to find info for her)... so I'm not entirely sure.

    But I thought that the info at the evolt one was parsed (?) with cfm... not sure what that means, entirely though. So I could be using that term wrong. Either way, I thought some part of it had cold fusion... maybe not though. Hopefully not... then she could just use that one!
    no this example does not use coldfusion, just copy and paste the example into notepad and rename the file to .html open it and you will see it still works

  5. #5
    SitePoint Wizard silver trophy Bleys's Avatar
    Join Date
    Feb 2003
    Location
    RI-USA
    Posts
    5,620
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    If I find out from my friend any reason why it won't work (new info for you :P) I'll come back an post.

    Hopefully this will work though.

    Thanks, again.


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
  •