Mercurial > hg > extraction-interface
annotate geotemco/lib/slider/slider.html @ 16:fb948097de39
fix bug: Edittaglist is working on Firefox.
fix bug: name of regex used to show with strange <span id="transmark"></span> showing only on FF but not Saf. Change it to use "document.getElementById(id).textContent to get the pure text string.
author | Zoe Hong <zhong@mpiwg-berlin.mpg.de> |
---|---|
date | Fri, 20 Feb 2015 16:39:08 +0100 |
parents | b12c99b7c3f0 |
children |
rev | line source |
---|---|
0
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
3 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
4 <html> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
5 <head> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
6 <title>Slider (WebFX)</title> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
8 <script type="text/javascript" src="local/webfxlayout.js"></script> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
9 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
10 <script type="text/javascript" src="js/range.js"></script> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
11 <script type="text/javascript" src="js/timer.js"></script> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
12 <script type="text/javascript" src="js/slider.js"></script> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
13 <link type="text/css" rel="StyleSheet" href="css/bluecurve/bluecurve.css" /> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
14 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
15 </head> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
16 <body> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
17 <!-- WebFX Layout Include --> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
18 <script type="text/javascript"> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
19 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
20 var articleMenu= new WebFXMenu; |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
21 articleMenu.left = 384; |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
22 articleMenu.top = 86; |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
23 articleMenu.width = 140; |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
24 articleMenu.add(new WebFXMenuItem("Slider", "slider.html")); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
25 articleMenu.add(new WebFXMenuItem("Implementation", "implementation.html")); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
26 articleMenu.add(new WebFXMenuItem("API", "api.html")); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
27 articleMenu.add(new WebFXMenuItem("Demo", "demo.html")); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
28 articleMenu.add(new WebFXMenuSeparator); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
29 articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/slider102.zip")); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
30 webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu)); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
31 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
32 webfxLayout.writeTitle("Slider"); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
33 webfxLayout.writeMenu(); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
34 webfxLayout.writeDesignedByEdger(); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
35 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
36 </script> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
37 <div class="webfx-main-body"> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
38 <!-- end WebFX Layout Includes --> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
39 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
40 <p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
41 <span class="date">2002-10-07</span>: First public version released<br /> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
42 <span class="date">2006-05-28</span>: Changed license to Apache Software License 2.0.<br /> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
43 </p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
44 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
45 <h2>Introduction</h2> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
46 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
47 <p>Sliders are useful controls for choosing a value in a range of values. |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
48 Common uses are volume controls, seekers for movie and sound files as well |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
49 as color pickers. A few people have asked for an update to the old |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
50 <a href="http://webfx.eae.net/dhtml/slidebar/slidebar.html">Slidebar</a> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
51 component to make it work in Mozilla and work better in IE. But since the |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
52 original control was very basic and was not very usable I decided to |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
53 create a new one.</p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
54 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
55 <form onsubmit="return false;"> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
56 <div class="slider" id="slider-1" tabIndex="1" style="width: auto; margin: 10px;"> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
57 <input class="slider-input" id="slider-input-1"/> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
58 </div> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
59 </form> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
60 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
61 <script type="text/javascript"> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
62 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
63 var sliderEl = document.getElementById ? document.getElementById("slider-1") : null; |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
64 var inputEl = document.forms[0]["slider-input-1"]; |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
65 var s = new Slider(sliderEl, inputEl); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
66 s.onchange = function () { |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
67 window.status = "Value: " + s.getValue(); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
68 }; |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
69 s.setValue(50); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
70 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
71 </script> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
72 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
73 <p>When starting with the new slider a few main features where kept in mind:</p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
74 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
75 <ul> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
76 <li>Degrade gracefully for browser without the needed DOM support. This is |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
77 achieved by using a basic text input as the base for the control. In case |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
78 the browser does not support the needed features then the input can be used |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
79 in the normal way.</li> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
80 <li>Full mouse support. Lots of slider controls does not support anything beyond dragging |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
81 the handle. The goal was to allow the user to be able to both drag the handle |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
82 and hold down the mouse anywhere on the slider to move the handle towards the |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
83 mouse.</li> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
84 <li>Full keyboard support. Once the slider is focused the arrow keys and Page Up / |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
85 Page Down can be used to change the value.</li> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
86 <li>Mouse wheel support where available.</li> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
87 <li>Skinable using different CSS files.</li> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
88 </ul> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
89 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
90 <h2>Requirements</h2> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
91 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
92 <p>The slider works in <strong>any</strong> browser but the GUI component works in |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
93 browsers with simple DOM level 1 support with one IE extended proprietary property. |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
94 That property is <code>offsetWidth</code> (and <code>offsetHeight</code>) and this is |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
95 known to be supported by IE5+, Mozilla 1.0+, Konqueror 3+ and it is assumed other future |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
96 browsers will support this as well because it has become a de facto standard.</p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
97 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
98 <h2>Usage</h2> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
99 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
100 <p>To use the slider we have to include a few JS files and a CSS file.</p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
101 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
102 <pre> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
103 <script type="text/javascript" src="<a href="js/range.js">js/range.js</a>"></script> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
104 <script type="text/javascript" src="<a href="js/timer.js">js/timer.js</a>"></script> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
105 <script type="text/javascript" src="<a href="js/slider.js">js/slider.js</a>"></script> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
106 <link type="text/css" rel="StyleSheet" href="<a href="css/winclassic.css">css/winclassic.css</a>" /> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
107 </pre> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
108 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
109 <p>Then we need to define the HTML to use for the slider. Something like this:</p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
110 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
111 <pre> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
112 <div class="slider" id="slider-1" tabIndex="1"> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
113 <input class="slider-input" id="slider-input-1" |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
114 name="slider-input-1"/> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
115 </div> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
116 </pre> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
117 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
118 <p>After this we have to create the JS object that handles the logic. If we only |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
119 plan to use this in pages and applications that you know will support the dynamic |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
120 slider control we can use the following script block. This should be placed directly |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
121 after the slider div.</p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
122 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
123 <pre> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
124 <script type="text/javascript"> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
125 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
126 var s = new Slider(document.getElementById("slider-1"), |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
127 document.getElementById("slider-input-1")); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
128 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
129 </script> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
130 </pre> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
131 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
132 <p>If we however cannot guarantee that all user uses browsers that support |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
133 <code>document.getElementById</code> we should use <code>document.forms</code> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
134 to find the input and test whether <code>document.getElementById</code> is |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
135 defined.</p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
136 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
137 <pre> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
138 <script type="text/javascript"> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
139 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
140 var sliderEl = document.getElementById ? |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
141 document.getElementById("slider-1") : null; |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
142 var inputEl = document.forms[0]["slider-input-1"]; |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
143 var s = new Slider(sliderEl, inputEl); |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
144 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
145 </script> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
146 </pre> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
147 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
148 <p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
149 <a href="slider.html">Slider</a><br /> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
150 <a href="implementation.html">Implementation</a><br /> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
151 <a href="api.html">API</a><br /> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
152 <a href="demo.html">Demo</a><br /> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
153 <a href="http://webfx.eae.net/download/slider102.zip">Download</a> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
154 </p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
155 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
156 <p class="author">Author: Erik Arvidsson</p> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
157 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
158 <!-- end webfx-main-body --> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
159 </div> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
160 |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
161 </body> |
b12c99b7c3f0
commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff
changeset
|
162 </html> |