Rotating list widget in JavaScript

For select an item in a short list, dropdown is painful, a button is a better design. This widget actually combines a button and a dropdown list.

I give the name "rotating list" to an object <select> combined with a button to change the selected list item, without having to show the list. A new name has to be invented because I have so far found nothing similar on the web (apart in some Ajax Frameworks).

From drop down list to rotating list

The rotating list does not detract anything to a dropdown list, it is the same form object plus an associated button to change the displayed and thus selected item.

1. The list box is necessary when accessing to form the first time to view the list of options.
2. And more, if the list is long, selecting an item by clicking in a list is simpler.
3. But if the interface is used so frequently and you know the options, and if the list has few options, or the most useful early in the list, the selection button is what simplifies the more the use.

And also adding a button does not cost anything. Note that the ideal would still checkboxes, but it takes more space, and user interfaces of Web applications need for compact pages.

How it works

Just a JavaScript function with four lines to turn a dropdown list in rotaring list.

A button is added beside the <select> list tag. It calls the next function.

<input type="button" name="Submit" value="Next" onClick="next()">

The next JavaScript function is defined.

function next()
{
    var element = document.form1.select1;
    var x = element.selectedIndex + 1;
    if(x >= element.options.length) x = 0;
    element.selectedIndex = x;
}  

The function increments the variable selectedIndex of the list, the corresponding item is displayed in the display field of the combo. It is also the value of this selected element that is to be sent with the form data.

Demo

Demonstration of an object list on one line, where the displayed and thus selected item is chosen with a button.

Technically, this is to achieved by changing the pointer to the object originally selected by JavaScript.

Form

First item Second item Third item Fourth item

Interfacing rotating list and application

To show how the object can act as part of the GUI of a web application, here is a script for displaying images on the background of a panel.

We define a simple function that changes the image. It is given in parameter the URL of the image.

function update(fruit)
{
    var panel = document.getElementById("fruits");
    panel.style.backgroundImage = 'url(' + fruit + ')';
}

When you click the button on the rotating list, the index is incremented and it retrieves the value of the selected object to pass it to the function of the user interface:

var element = document.form1.select1;
var x = element.selectedIndex + 1;
if(x >= element.options.length) x = 0;
element.selectedIndex = x;

update(element.options[x].value);

The script is completed with the conventional procedure, when selecting an item from the dropdown list, it passes the value of the item selected in parameter to the function:

var element = document.form1.select1;
var x = element.selectedIndex ;

update(element.options[x].value);

Demonstration with images

Here is the demo of an "rotating list" form object, where the choice of a list item operates action on the page. It will show how the list works as part of the interface of an application.

Graphical user interface

Language C C++ PHP HTML

HTML code

<fieldset class="rotatinglist">
<legend>Graphical user interface</legend>
<form  method="post" action="">
  <select name="selectImage" id="selectImage" onchange="change()">
    <option value="/images/language-c.png">Langage C</option>
    <option value="/images/language-cpp.png">C++</option>
    <option value="/images/language-php.png">PHP</option>
    <option value="/images/language-html.png">HTML</option>
  </select>
  <input type="button" name="Submit" value="Next" onClick="next()">
</form>
<img id="lang" src="/images/language-c.png" />
</fieldset>

JavaScript code

function update(lang)
{
  var x = document.getElementById("lang");
  x.src = lang;
}
function next()
{
  var element = document.getElementById("selectImage");
  var x = element.selectedIndex + 1;
  if(x >= element.options.length) x = 0;
  element.selectedIndex = x;
  update(element.options[x].value);	
}
function change()
{
  var element = document.getElementById("selectImage");
  var x = element.selectedIndex ;
  update(element.options[x].value);
} 

CSS Code

.rotatinglist
{
  width:200px;
  height:128px;
  min-height:128px;
  -moz-border-radius:8px;
  border-radius:8px;
  border: 2px solid #339900 !important;
  padding-left:8px;
  -padding:0 !important;
}
.rotatinglist img
{
  margin:8px;
  width:64px;
  height:64px;
}