Mercurial > hg > NetworkVis

annotate d3s_examples/python-neo4jrestclient/static/platin/lib/slider/slider.html @ 34:4bbb832c53ac

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Completed: Base functionality for simple examples. Minus button now removes all filters for simplicity. Still need to adjust how to go about restarting the querying process once a result has been selected from the display list (eg. the 'selected object is:' case). Also need to strip out a bunch of unneeded code.
author arussell
date Sat, 19 Dec 2015 23:25:23 -0500
parents 18ef6948d689
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
8
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
3
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
4 <html>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
5 <head>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
6 <title>Slider (WebFX)</title>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
8 <script type="text/javascript" src="local/webfxlayout.js"></script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
9
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
10 <script type="text/javascript" src="js/range.js"></script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
11 <script type="text/javascript" src="js/timer.js"></script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
12 <script type="text/javascript" src="js/slider.js"></script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
13 <link type="text/css" rel="StyleSheet" href="css/bluecurve/bluecurve.css" />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
14
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
15 </head>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
16 <body>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
17 <!-- WebFX Layout Include -->
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
18 <script type="text/javascript">
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
19
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
20 var articleMenu= new WebFXMenu;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
21 articleMenu.left = 384;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
22 articleMenu.top = 86;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
23 articleMenu.width = 140;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
24 articleMenu.add(new WebFXMenuItem("Slider", "slider.html"));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
25 articleMenu.add(new WebFXMenuItem("Implementation", "implementation.html"));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
26 articleMenu.add(new WebFXMenuItem("API", "api.html"));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
27 articleMenu.add(new WebFXMenuItem("Demo", "demo.html"));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
28 articleMenu.add(new WebFXMenuSeparator);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
29 articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/slider102.zip"));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
30 webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
31
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
32 webfxLayout.writeTitle("Slider");
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
33 webfxLayout.writeMenu();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
34 webfxLayout.writeDesignedByEdger();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
35
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
36 </script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
37 <div class="webfx-main-body">
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
38 <!-- end WebFX Layout Includes -->
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
39
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
40 <p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
41 <span class="date">2002-10-07</span>: First public version released<br />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
42 <span class="date">2006-05-28</span>: Changed license to Apache Software License 2.0.<br />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
43 </p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
44
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
45 <h2>Introduction</h2>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
46
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
47 <p>Sliders are useful controls for choosing a value in a range of values.
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
48 Common uses are volume controls, seekers for movie and sound files as well
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
49 as color pickers. A few people have asked for an update to the old
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
50 <a href="http://webfx.eae.net/dhtml/slidebar/slidebar.html">Slidebar</a>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
51 component to make it work in Mozilla and work better in IE. But since the
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
52 original control was very basic and was not very usable I decided to
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
53 create a new one.</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
54
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
55 <form onsubmit="return false;">
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
56 <div class="slider" id="slider-1" tabIndex="1" style="width: auto; margin: 10px;">
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
57 <input class="slider-input" id="slider-input-1"/>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
58 </div>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
59 </form>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
60
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
61 <script type="text/javascript">
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
62
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
63 var sliderEl = document.getElementById ? document.getElementById("slider-1") : null;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
64 var inputEl = document.forms[0]["slider-input-1"];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
65 var s = new Slider(sliderEl, inputEl);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
66 s.onchange = function () {
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
67 window.status = "Value: " + s.getValue();
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
68 };
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
69 s.setValue(50);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
70
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
71 </script>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
72
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
73 <p>When starting with the new slider a few main features where kept in mind:</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
74
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
75 <ul>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
76 <li>Degrade gracefully for browser without the needed DOM support. This is
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
77 achieved by using a basic text input as the base for the control. In case
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
78 the browser does not support the needed features then the input can be used
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
79 in the normal way.</li>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
80 <li>Full mouse support. Lots of slider controls does not support anything beyond dragging
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@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
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
82 and hold down the mouse anywhere on the slider to move the handle towards the
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
83 mouse.</li>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
84 <li>Full keyboard support. Once the slider is focused the arrow keys and Page Up /
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
85 Page Down can be used to change the value.</li>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
86 <li>Mouse wheel support where available.</li>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
87 <li>Skinable using different CSS files.</li>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
88 </ul>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
89
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
90 <h2>Requirements</h2>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
91
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
92 <p>The slider works in <strong>any</strong> browser but the GUI component works in
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
93 browsers with simple DOM level 1 support with one IE extended proprietary property.
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
94 That property is <code>offsetWidth</code> (and <code>offsetHeight</code>) and this is
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@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
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
96 browsers will support this as well because it has become a de facto standard.</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
97
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
98 <h2>Usage</h2>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
99
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@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>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
101
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
102 <pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
103 &lt;script type="text/javascript" src="<a href="js/range.js">js/range.js</a>"&gt;&lt;/script&gt;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
104 &lt;script type="text/javascript" src="<a href="js/timer.js">js/timer.js</a>"&gt;&lt;/script&gt;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
105 &lt;script type="text/javascript" src="<a href="js/slider.js">js/slider.js</a>"&gt;&lt;/script&gt;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
106 &lt;link type="text/css" rel="StyleSheet" href="<a href="css/winclassic.css">css/winclassic.css</a>" /&gt;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
107 </pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
108
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@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>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
110
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
111 <pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
112 &lt;div class="slider" id="slider-1" tabIndex="1"&gt;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
113 &lt;input class="slider-input" id="slider-input-1"
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
114 name="slider-input-1"/&gt;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
115 &lt;/div&gt;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
116 </pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
117
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@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
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
119 plan to use this in pages and applications that you know will support the dynamic
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
120 slider control we can use the following script block. This should be placed directly
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
121 after the slider div.</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
122
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
123 <pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
124 &lt;script type="text/javascript"&gt;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
125
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
126 var s = new Slider(document.getElementById("slider-1"),
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
127 document.getElementById("slider-input-1"));
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
128
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
129 &lt;/script&gt;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
130 </pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
131
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
132 <p>If we however cannot guarantee that all user uses browsers that support
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
133 <code>document.getElementById</code> we should use <code>document.forms</code>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
134 to find the input and test whether <code>document.getElementById</code> is
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
135 defined.</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
136
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
137 <pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
138 &lt;script type="text/javascript"&gt;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
139
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
140 var sliderEl = document.getElementById ?
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
141 document.getElementById("slider-1") : null;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
142 var inputEl = document.forms[0]["slider-input-1"];
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
143 var s = new Slider(sliderEl, inputEl);
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
144
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
145 &lt;/script&gt;
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
146 </pre>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
147
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
148 <p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
149 <a href="slider.html">Slider</a><br />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
150 <a href="implementation.html">Implementation</a><br />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
151 <a href="api.html">API</a><br />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
152 <a href="demo.html">Demo</a><br />
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
153 <a href="http://webfx.eae.net/download/slider102.zip">Download</a>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
154 </p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
155
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
156 <p class="author">Author: Erik Arvidsson</p>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
157
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
158 <!-- end webfx-main-body -->
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
159 </div>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
160
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
161 </body>
18ef6948d689 new d3s examples
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
162 </html>