main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:interactivity and svg gui:combobox

SVG Combobox, Version 1.2.1, 2006-10-03, (see history at the end of the page)

This SVG combobox object should assist authors of SVG webapplications in creating user interfaces.

Why should you create SVG only web applications? Advantages of SVG only applications are flexiblity (you can control every single aspect of a SVG GUI element) and scalability (in SVG your userinterface elements are scalable as well). If you need a pixel-precise, scalable application, HTML is not very well suited, since HTML form elements don't scale well. SVG also potentially allows more sophisticated GUI elements than HTML provides, such as slider, dial knobs, complex colourpickers, etc. Disadvantages include complexity (more complex than using HTML form elements) and a potentially bad user experience, if your SVG GUI elements behave different than native GUI elements of the operating system the user is used to. Some browsers still don't support SVG to HTML or HTML to SVG communication. In that case you are sort of locked into doing everything with SVG in order to reach the broadest audience. Another advantage of creating SVG only applications is, that your applications also work in SVG viewers outside the webbrowser (e.g. Batik, eSVG or SVG embedded applications).

See an example of the SVG combobox object. The scripts had been tested in Adobe SVG viewer version 3, version 6, Mozilla SVG, Opera9 and Batik.

The combobox is free to use. If you do any substantial improvements, please send back your improvements to the author. The GUI elements of are licensed under the terms of the LGPL license and you need to distribute the license with your code. Additionally, you should create a link to in your project's "about page" or impressum. If you plan to use the GUI elements in a commercial product, please check back with the author of the GUI elements to investigate arrangements. The original URL for the combobox is



To use the combobox, your project needs to meet the following requirements:


Dependencies on external functions

  1. combobox.js:
    • all of the objects and functions in this file are necessary
  2. mapApp.js:
    • all of the objects and functions in this file are necessary
  3. timer.js:
    • all of the objects and functions in this file are necessary
  4. helper_functions.js:
    • all the global variables at the top of the file are necessary


The following constructor function creates the combobox:

var myCombobox = new combobox(id,parentNode,elementsArray,width,xOffset,yOffset,cellHeight,textPadding,heightNrElements,multiple,offsetValue,textStyles,boxStyles,scrollbarStyles,smallrectStyles,highlightStyles,triangleStyles,functionToCall);

//first a few styling parameters:
var comboBoxCellHeight = 16;
var comboBoxTextpadding = 3;
var comboBoxtextStyles = {"font-family":"Arial,Helvetica","font-size":11,"fill":"dimgray"};
var comboBoxStyles = {"stroke":"dimgray","stroke-width":1,"fill":"white"};
var comboBoxScrollbarStyles = {"stroke":"dimgray","stroke-width":1,"fill":"whitesmoke"};
var comboBoxSmallrectStyles = {"stroke":"dimgray","stroke-width":1,"fill":"lightgray"};
var comboBoxHighlightStyles = {"fill":"dimgray","fill-opacity":0.3};
var comboBoxTriangleStyles = {"fill":"dimgray"};
//this array contains the values
var roses = new Array({key:"Butterscotch",value:false},{key:"Ci Peace",value:false},{key:"Impatient",value:false},{key:"Lady Hillingdon",value:false},{key:"Lavaglut",value:false},{key:"Mission Bells",value:false},{key:"Sexy Rexy",value:false},{key:"Souvenir de Pierre Notting",value:false},{key:"Sunflare",value:false},{key:"Whisky Mac",value:false},{key:"Whisper Floribunda",value:false});
//now the initialization of the combobox
var comboRoses = new combobox("roses","roses",roses,170,50,300,comboBoxCellHeight,comboBoxTextpadding,5,true,50,comboBoxtextStyles,comboBoxStyles,comboBoxScrollbarStyles,comboBoxSmallrectStyles,comboBoxHighlightStyles,comboBoxTriangleStyles,showRoses);

The arguments are the following:


Look and Feel

You can adapt the look and feel (colors, fonts, sizes, etc.) in the combobox.js script (top section in the constructor function). We simply assign XML attributes to various elements of the combobox.

Current Limitation

Currently, the combobox object may react strange if users zoom in with the plugin. This limitation might be eliminated in a later version. If multiselecting elements by mousedown and dragging, the list does not scroll if the user moves to the top or bottom of the combobox. This feature might be introduced in the future.

Version history

Last modified: Tuesday, 03-Oct-2006 18:02:34 CEST
© carto:net (andreas neumann & andré m. winter)
original URL for reference: