Rotating list widget in JavaScript

For a frequent use of form, dropdowns list are painful, a button for next option is a better design.

I wonder why no one had the idea to implement rotating lists in HTML, as an alternative to the sometime annoying scrolling 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. I had to invent a name because I have so far found nothing similar on the web (apart in some Ajax Frameworks).

Scrolling list or 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 of a rotating list widget

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

Interface with an 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);

Demo or rotating list widget with images

Demonstration of an "rotating list" form object, where the choice of a list item operates action on the page.

We want to 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;
}