Difference between revisions of "Display Options Tab"

From dataZoa Wiki
Jump to: navigation, search
(Created page with "<div class="imgGlyph24 imgConcept"></div> Your dataZoa account can apply a variety of style overrides and functionality to your displays. == Terminology == <div...")
 
(Examples)
 
(8 intermediate revisions by the same user not shown)
Line 23: Line 23:
 
</div>
 
</div>
  
== Example ==
+
== Examples ==
 +
 
 
<div>
 
<div>
<ul style="margin-left: 2.5em;">
+
Note: These examples presume some degree of familiarity with common Web technologies like CSS and Javascript.
<li>All Series and Display ownership principles remain applicable in Related Accounts.</li>
+
<li>Series Sharing privileges are mediated by the <b>Share Acceptance</b> setting of the <b>Preferences</b> tab of your account profile, .</li>
+
<li>Display ownership can be transferred among related accounts via the dataZoa API.</li>
+
</ul>
+
 
</div>
 
</div>
 +
 +
=== 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:
 +
</p>
 +
 +
<ul>
 +
<li>Add to the header section:
 +
<p>
 +
<code><style type="text/css"> .DZOptionsRow .EMCT-DateSelect { width:8em; height: initial; display:inline-block; } </style></code>
 +
</p>
 +
</li>
 +
 +
<li>Add to the header section:
 +
<p>
 +
<code><script type="text/javascript"> $(".EMCT-Overlay").css("font-size", "large"); </script></code>
 +
</p>
 +
</li>
 +
</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.

Terminology

Key Concepts
  • 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>