JavaScript Rotating List Widget

To select an item from a short list, the button is better than a drop-down menu. This widget actually combines a button and a drop-down menu.

I give the name of the rotating list to the <select> object combined with the button to change the selected list item without having to display the list. I need to come up with a new name, because I still haven't found anything like it on the web.

From the drop-down list to the rotation list

The rotating list does not remove anything from the drop-down list, it is the same form object with which the button for changing the displayed and therefore selected item is associated.

The drop-down list is required the first time you access the form to find out the options.
Similarly, if the list is long, selecting an item by clicking in the list is easier.
But if you often use the interface and know the options, and there are few options in the list or the most useful ones are at the top of the list, then the selection button is what makes it as easy as possible to use .

And by the way, adding a button costs nothing. Note that the ideal would still be to use check boxes, but this takes up more space, and in the user interface, applications prefer compact pages.

Principle of operation

A four-line JavaScript function is enough to convert the drop-down list to a rotating one.

A button is added next to the <select> tag of the list. It is used to start the next function.

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

The JavaScript code of the next function is determined.

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 selectedIndex variable from the list, the corresponding item is displayed in the combo box. This is also the content of this item that will be sent with the form data.

Display

Show the list object in one row, where the displayed and therefore selected item is selected by the button.
Formally, this means changing the pointer on the initially selected object with JavaScript code.

Form

To demonstrate, instead of submitting the form, you use a JavaScript function that displays what will be submitted .

Rotating List and Application Interface

To show how an object can act within the graphical user interface of a web application, here is a script that displays images in the background of a panel.

You define a simple function that changes the image. The URL of this image is specified as a function parameter.

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

Clicking on the spin list button increases the index and retrieves the value of the object selected to pass the user interface function:

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 supplemented with the classic mode of operation, when you select an element from the drop-down list, the value of the selected element is passed as a function parameter:

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

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

Demonstration with images

Here's a demonstration of an object's "rotating list," where selecting a list item performs an action on a page. It will show how the list works in the context of the application interface .

Graphical user interface

Each <option> element of the <select> object contains an image URL in value and text with the image name.

HTML-code

<fieldset class="rotatinglist">
<legend>Interface utilisateur graphique </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="Suivant" 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:260px;
  height:160px;
  min-height:160px;
  -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;
}