Difference between revisions of "Display Options Tab"
(→Examples) |
(→Examples) |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 22: | Line 22: | ||
</ul> | </ul> | ||
</div> | </div> | ||
| + | |||
| + | == Examples == | ||
<div> | <div> | ||
| Line 27: | Line 29: | ||
</div> | </div> | ||
| − | == Example: Enlarge downloader dialog box == | + | === Example: Enlarge downloader dialog box === |
| − | + | <p> | |
| − | < | + | |
dataZoa Displays typically have a download button for visitors to grab the data shown. By default, the button brings up a compact dialog box. These options will re-style it to be a bit larger: | dataZoa Displays typically have a download button for visitors to grab the data shown. By default, the button brings up a compact dialog box. These options will re-style it to be a bit larger: | ||
| + | </p> | ||
<ul> | <ul> | ||
<li>Add to the header section: | <li>Add to the header section: | ||
<p> | <p> | ||
| − | <style type="text/css"> .DZOptionsRow .EMCT-DateSelect { width:8em; height: initial; display:inline-block; } </style> | + | <code><style type="text/css"> .DZOptionsRow .EMCT-DateSelect { width:8em; height: initial; display:inline-block; } </style></code> |
</p> | </p> | ||
</li> | </li> | ||
| Line 41: | Line 43: | ||
<li>Add to the header section: | <li>Add to the header section: | ||
<p> | <p> | ||
| − | <script type="text/javascript"> $(".EMCT-Overlay").css("font-size", "large"); | + | <code><script type="text/javascript"> $(".EMCT-Overlay").css("font-size", "large"); </script></code> |
</p> | </p> | ||
</li> | </li> | ||
</ul> | </ul> | ||
| − | + | <br> | |
| − | </ | + | <br> |
| + | |||
| + | === Example: Custom popup on downloader button === | ||
| + | <p> | ||
| + | dataZoa Displays typically have a download button for visitors to grab the data shown. By default, the button brings up a compact dialog box. This option will add functionality to pop up a Javascript alert box: | ||
| + | </p> | ||
| + | |||
| + | <ul> | ||
| + | <li>Add to the footer section: | ||
| + | <p> | ||
| + | <code><script>$('[alt^="Download the data from"]').on("click", function() {alert("Ooooh! Clicky!");} );</script></code> | ||
| + | </p> | ||
| + | </li> | ||
| + | </ul> | ||
| + | |||
| + | <br> | ||
| + | <br> | ||
| + | |||
Latest revision as of 12:11, 11 April 2024
Your dataZoa account can apply a variety of style overrides and functionality to your displays.
Contents
Terminology
- The Display Options are a means of custom-styling your displays from a central location.
- A Custom-styling is (typically) CSS or Javascript you add to the HTML headers or footers of displays owned by your account.
- You can add your own stylings or override those used by default by dataZoa
Adding/Editing Display Options
|
In the housekeeping toolbar, "pick Profile/Preferences under the 'gear' menu". |
^
|
This brings you to a multi-tab page with various account attributes:
- Access the account-wide display options, use the Gear button and choose the Profile/Preferences entry.
- Use the Display Options panel to examine or edit the headers and footers.
- Note that the custom header and footer fields are empty by default.
Examples
Note: These examples presume some degree of familiarity with common Web technologies like CSS and Javascript.
Example: Enlarge downloader dialog box
dataZoa Displays typically have a download button for visitors to grab the data shown. By default, the button brings up a compact dialog box. These options will re-style it to be a bit larger:
- Add to the header section:
<style type="text/css"> .DZOptionsRow .EMCT-DateSelect { width:8em; height: initial; display:inline-block; } </style> - Add to the header section:
<script type="text/javascript"> $(".EMCT-Overlay").css("font-size", "large"); </script>
Example: Custom popup on downloader button
dataZoa Displays typically have a download button for visitors to grab the data shown. By default, the button brings up a compact dialog box. This option will add functionality to pop up a Javascript alert box:
- Add to the footer section:
<script>$('[alt^="Download the data from"]').on("click", function() {alert("Ooooh! Clicky!");} );</script>
