From: Robert Konigsberg <konigsberg@gmail.com>
Date: Sat, 29 Dec 2012 02:26:01 +0000 (-0500)
Subject: Clean up instructions section of the palette; hide it until we need it.
X-Git-Tag: v1.0.0~139^2~4
X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=e664574785f3b5a3c7cfc86be46263eb438cbc5b;p=dygraphs.git
Clean up instructions section of the palette; hide it until we need it.
---
diff --git a/experimental/palette/index.css b/experimental/palette/index.css
index d17ca62..ca171f4 100644
--- a/experimental/palette/index.css
+++ b/experimental/palette/index.css
@@ -7,3 +7,12 @@
margin-left: auto;
margin-right: auto;
}
+
+#toggleInstructions {
+ color: #0000DD;
+}
+
+#toggleInstructions:hover {
+ color: #0000FF;
+ text-decoration: underline;
+}
diff --git a/experimental/palette/index.html b/experimental/palette/index.html
index 3a4536b..8951811 100644
--- a/experimental/palette/index.html
+++ b/experimental/palette/index.html
@@ -29,68 +29,76 @@
</div>
<div id="graph"></div>
<div id="status" style="width:200px; font-size:0.8em; padding-top:5px;"></div>
- Other messages:
- <div id="messages"></div>
- <div id="moreinstructions">
- <h3>Learn By Doing</h3>
- <ol>
- <li>In the filter box, type <code>point</code>.</li>
- <li>In the <em>drawPoints</em> text box, toggle the value until <code>true</code> appears</li>
- <li>You will see dots on the graph where points exist.</li>
- <li>In the <em>pointSize</em> text box, enter <code>5</code></li>
- <li>Press <code>enter</code> or click <em>Refresh</em>. The dots
- just got larger.</li>
- <li>Type <code>callback</code> in the filter box.</li>
- <li>Instead of a text box, you will see buttons that can be used
- to define callbacks. Click the button for <em>clickCallback</em>.</li>
- <li>You will see that the prototype function body is
- <code>function(e, x, points){ }</code>. Paste in this
- replacement function:<p/>
- <code>function(e, x){<br/> var elem =
- document.getElementById("messages");<br/> elem.innerHTML =
- elem.innerHTML + x + "<br>";<br/>}</code></li>
- <li>Click the <em>OK</em> button. The <em>clickCallback</em>
- button now says <code>defined</code> instead of <code>not defined</code>.</li>
- <li>Click anywhere on the graph. The x-value will appear on the
- page.</li>
- <li>If you click directly on a point, then an alert box will
- indicate that you've clicked on a point. That's because the
- <em>pointClickCallback</em> was defined already.</li>
- <li><b>Have fun and send feedback!</b></li>
- </ol>
- <h3>tips</h3>
- The palette on the right contains (most) Dygraphs options. Here's
- how they work:
- <ul>
- <li>The selection box on top can be used to choose your own data source.</li>
- <li>Use the filter box to constrain your selection. For instance,
- typing <code>draw</code> will show all options with that phrase in
- its name.</li>
- <li>Each field has specific types. The types are not documented,
- but if you hover over an entry (or click on it) it will give you a
- hint.</li>
- <li>Enter a new value for the option, and hit the
- <code>enter</code> key, or the <em>Refresh</em> button.</li>
- <li>Some types require special consideration:
- <li>integers, floats, strings and booleans can be entered
- as-is.</li>
- <li>arrays of elements can be comma-separated <em>except string
- arrays, which are (at the moment) semicolon-separated (anyone
- interested in making a good string array parser, take a shot.</em></li>
- <li>Callbacks are defined in a (crappy tiny) dialog box. If the
- function isn't defined, then a prototype of the function will be
- presented to the user.</li>
- </li>
- </ul>
-
- Then in the filter text box, type "point". Set drawPoints: true and
- pointSize: 5.
- You get the idea.
+ <div class="instructions">
+ <a id="toggleInstructions">instructions</a>
+ <div id="instructions" style="display: none">
+ <h3>Learn By Doing</h3>
+ <ol>
+ <li>In the filter box, type <code>point</code>.</li>
+ <li>Click the <em>drawPoints</em> toggle button until <code>true</code> appears</li>
+ <li>You will see dots on the graph where points exist.</li>
+ <li>In the <em>pointSize</em> text box, enter <code>5</code></li>
+ <li>Press <code>enter</code> or click <em>Refresh</em>. The dots
+ just got larger.</li>
+ <li>Type <code>callback</code> in the filter box.</li>
+ <li>Instead of a text box, you will see buttons that can be used
+ to define callbacks. Click the button for <em>clickCallback</em>.</li>
+ <li>You will see that the prototype function body is
+ <code>function(e, x, points){ }</code>. Paste in this
+ replacement function:<p/>
+ <code>function(e, x){<br/> var elem =
+ document.getElementById("messages");<br/> elem.innerHTML =
+ elem.innerHTML + x + "<br>";<br/>}</code></li>
+ <li>Click the <em>OK</em> button. The <em>clickCallback</em>
+ button now says <code>defined</code> instead of <code>not defined</code>.</li>
+ <li>Click anywhere on the graph. The x-value will appear on the
+ page.</li>
+ <li>If you click directly on a point, then an alert box will
+ indicate that you've clicked on a point. That's because the
+ <em>pointClickCallback</em> was defined already.</li>
+ <li><b>Have fun and send feedback!</b></li>
+ </ol>
+ <h3>tips</h3>
+ The palette on the right contains (most) Dygraphs options. Here's
+ how they work:
+ <ul>
+ <li>The selection box on top can be used to choose your own data source.</li>
+ <li>Use the filter box to constrain your selection. For instance,
+ typing <code>draw</code> will show all options with that phrase in
+ its name.</li>
+ <li>Each field has specific types. The types are not documented,
+ but if you hover over an entry (or click on it) it will give you a
+ hint.</li>
+ <li>Enter a new value for the option, and hit the
+ <code>enter</code> key, or the <em>Refresh</em> button.</li>
+ <li>Some types require special consideration:
+ <li>integers, floats, strings and booleans can be entered
+ as-is.</li>
+ <li>arrays of elements can be comma-separated <em>except string
+ arrays, which are (at the moment) semicolon-separated (anyone
+ interested in making a good string array parser, take a shot.</em></li>
+ <li>Callbacks are defined in a (crappy tiny) dialog box. If the
+ function isn't defined, then a prototype of the function will be
+ presented to the user.</li>
+ </li>
+ </ul>
+
+ Then in the filter text box, type "point". Set drawPoints: true and
+ pointSize: 5.
+ You get the idea.
+ </div>
</div>
</td>
<td valign="top"><div id="optionsPalette"></div></td>
</tr>
</table>
</body>
- <script type="text/javascript">Index.start();</script>
+ <script type="text/javascript">
+ Index.start();
+ $(function() {
+ $("#toggleInstructions").click(function() {
+ $("#instructions").toggle(500);
+ });
+ });
+ </script>
</html>