Drop-down list with scrolling on data 100% SVG
New version runing with Firefox 1.5, Opera 9 and Batik 1.6
Design and script are separated.
Script is load on begin
Design is load on request and removed after use.
You can create your design, save it in SVG or SVGZ files.
In main SVG, for using drop-down list, you have to
1) load script with
<script xlink:href="js/list_scroll.js"/>
manage scrolling list
<script xlink:href="js/opera.js"/>
emulation for getURL() and parseXML()
<script xlink:href="js/tools.js"/>
moving window
2) reserve at the end place for design with <g id="messages" transform="translate(100,50)"></g>
by example
3) put in <defs> gradients used by design
4) call it with
add_list_scroll("svg/list_scroll.svg","messages","Change color\nof rectangle\nin
green",color.join("\n"), num);
in order: file for design, name of group where put fragment, string for text,
string for options in list,number for using
5) create function to use result in main SVG as this
function messages_use_list_scroll(result,num_choice,num_list)
{
if (!result)
return
switch(num_list)
{
case 0:
obj=svgdoc.getElementById("rect1");
obj.setAttribute("fill",color[num_choice]);
break;
..........
}
}
( svgdoc must be name for SVGDocument and name of group + "_use_list_scroll" name of function )
In SVG design, this function is called when you close window with
onclick="close_list_scroll(true)".
Function list_tape allow using Enter and Escape
keys to close window.
Three lines of text can be used with "invite0", "invite1",
"invite2" as id.
You have to keep id for objects in design or modify script.
When drop-down list is closed, indice of option choosed is give to main SVG, so
you can work on array for options.
You can modify script to return string choosed.