RGraph/docs/css.html

   1 <?php ob_start('ob_gzhandler') ?>
   2 <!DOCTYPE html >
   3 <html>
   4 <head>
   5     <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6     <!--
   7         /**
   8         * o------------------------------------------------------------------------------o
   9         * | This file is part of the RGraph package - you can learn more at:             |
  10         * |                                                                              |
  11         * |                          http://www.rgraph.net                               |
  12         * |                                                                              |
  13         * | This package is licensed under the RGraph license. For all kinds of business |
  14         * | purposes there is a small one-time licensing fee to pay and for non          |
  15         * | commercial  purposes it is free to use. You can read the full license here:  |
  16         * |                                                                              |
  17         * |                      http://www.rgraph.net/LICENSE.txt                       |
  18         * o------------------------------------------------------------------------------o
  19         */
  20     -->
  21     <title>RGraph: HTML5 canvas graph library - available CSS classes</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas graph docs css classes" />
  24     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about RGraph CSS classes" />
  25
  26     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  27     <link rel="icon" type="image/png" href="../images/favicon.png">
  28
  29     <style type="text/css">
  30         li {
  31             margin: 0 ! important;
  32         }
  33
  34         li a {
  35             text-decoration: none;
  36         }
  37     </style>
  38 </head>
  39 <body>
  40
  41     <!-- Social networking buttons -->
  42     <script src="../libraries/RGraph.common.core.js" ></script>
  43
  44     <script>
  45         function HideTwitterDIV ()
  46         {
  47             document.getElementById("twitter_div").style.opacity = 0;
  48             document.getElementById("twitter_div").style.display = 'none';
  49         }
  50
  51
  52         function ShowTwitterDIV (e)
  53         {
  54             var e   = RGraph.FixEventObject(document.all ? event : e);
  55             var div = document.getElementById("twitter_div");
  56             var img = document.getElementById("twitter_icon");
  57
  58             div.style.display = 'block';
  59             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  60             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  61
  62             /**
  63             * Fade it in
  64             */
  65             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  66             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  67             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  68             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  69             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  70
  71             e.stopPropagation();
  72
  73             return false;
  74         }
  75
  76         /**
  77         * This code installs the event handler that hides the Twitter DIV
  78         */
  79         if (RGraph.isIE8()) {
  80              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  81         } else {
  82             window.addEventListener('click', HideTwitterDIV, false);
  83         }
  84     </script>
  85
  86     <!-- The twitter DIV -->
  87     <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;">
  88         <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet&nbsp;about&nbsp;RGraph</a><br>
  89         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  90     </div>
  91
  92     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
  93         <script>
  94             // Opera fix
  95             if (navigator.userAgent.indexOf('Opera') == -1) {
  96               document.getElementById("social_icons").style.position = 'fixed';
  97               document.getElementById("twitter_div").style.position = 'fixed';
  98
  99             }
 100         </script>
 101
 102         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 103
 104
 105             <div id="social">
 106                 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
 107                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 108                 </a>
 109
 110                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 111                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 112                 </a>
 113
 114
 115 <!--
 116                 <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
 117                     <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 118                 </a>
 119
 120
 121                 <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
 122                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 123                 </a>
 124
 125                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 126                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 127                 </a>
 128
 129                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 130                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 131                 </a>
 132 -->
 133             </div>
 134     </div>
 135     <!-- /Social networking buttons -->
 136
 137     <div id="breadcrumb">
 138         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 139         >
 140         <a href="index.html">Documentation</a>
 141         >
 142         Available CSS classes
 143     </div>
 144
 145     <h1>RGraph: HTML5 canvas graph library - Available CSS classes</h1>
 146
 147     <script>
 148         if (RGraph.isIE8()) {
 149             document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the graphs, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
 150         }
 151     </script>
 152
 153     <p>
 154         This is information about the CSS classes available to you to allow you to customise the appearance of tooltips and
 155         context menus.
 156     </p>
 157
 158     <ul>
 159         <li><a href="#RGraph_png">RGraph_png</a></li>
 160         <li><a href="#RGraph_palette">RGraph_palette</a></li>
 161         <li><a href="#RGraph_tooltip">RGraph_tooltip</a></li>
 162         <li><a href="#RGraph_contextmenu">RGraph_contextmenu</a></li>
 163         <li><a href="#RGraph_contextmenu_item">RGraph_contextmenu_item</a></li>
 164         <li><a href="#RGraph_contextmenu_background">RGraph_contextmenu_background</a></li>
 165         <li><a href="#RGraph_zoom_window">RGraph_zoom_window</a></li>
 166         <li><a href="#RGraph_zoomed_canvas">RGraph_zoomed_canvas</a></li>
 167         <li><a href="#RGraph_zoomed_area">RGraph_zoomed_area</a></li>
 168         <li><a href="#ModalDialog_background">ModalDialog_background</a></li>
 169         <li><a href="#ModalDialog_dialog">ModalDialog_dialog</a></li>
 170         <li><a href="#ModalDialog_topbar">ModalDialog_topbar</a></li>
 171         <li><a href="#example">An example usage</a></li>
 172         <li><a href="#important">! important</a></li>
 173     </ul>
 174
 175     <a name="RGraph_png"></a>
 176     <br />&nbsp;<br />
 177     <h2>RGraph_png</h2>
 178         <p>
 179             This controls the appearance of the PNG image which is shown when you use the context menu option <i>RGraph.showPNG()</i>.
 180         </p>
 181
 182     <a name="RGraph_palette"></a>
 183     <br />&nbsp;<br />
 184     <h2>RGraph_palette</h2>
 185         <p>
 186             This controls the appearance of the mini-palette that can be used with annotating.
 187         </p>
 188
 189     <a name="RGraph_tooltip"></a>
 190     <br />&nbsp;<br />
 191     <h2>RGraph_tooltip</h2>
 192         <p>
 193             This controls the appearance of tooltips. The default is to have them look like Windows tooltips.
 194         </p>
 195
 196     <a name="RGraph_contextmenu"></a>
 197     <br />&nbsp;<br />
 198     <h2>RGraph_contextmenu</h2>
 199         <p>
 200             This controls how context menus appear. The default is similar to the look that Windows XP has.
 201         </p>
 202
 203     <a name="RGraph_contextmenu_item"></a>
 204     <br />&nbsp;<br />
 205     <h2>RGraph_contextmenu_item</h2>
 206         <p>
 207             This controls how individual items on the context menu will appear, for example the default has roughly 25px padding-left
 208             to accomodate the left bar.
 209         </p>
 210
 211     <a name="RGraph_contextmenu_background"></a>
 212     <br />&nbsp;<br />
 213     <h2>RGraph_contextmenu_background</h2>
 214         <p>
 215             This is the Windows XP style left vertical bar. By default this is light grey.
 216         </p>
 217
 218     <a name="RGraph_zoom_window"></a>
 219     <br />&nbsp;<br />
 220     <h2>RGraph_zoom_window</h2>
 221         <p>
 222             This is the class to use if you want to customise the mini-zoom window.
 223         </p>
 224
 225     <a name="RGraph_zoomed_canvas"></a>
 226     <br />&nbsp;<br />
 227     <h2>RGraph_zoomed_canvas</h2>
 228         <p>
 229             This is the class to use if you want to customise the full canvas zoom.
 230         </p>
 231
 232     <a name="RGraph_zoomed_area"></a>
 233     <br />&nbsp;<br />
 234     <h2>RGraph_zoomed_area</h2>
 235         <p>
 236             This is the class to use if you want to customise the zoomed area.
 237         </p>
 238
 239     <a name="ModalDialog_background"></a>
 240     <br />&nbsp;<br />
 241     <h2>ModalDialog_background</h2>
 242         <p>
 243             This class controls the dark semi-opaque background for the ModalDialog.
 244         </p>
 245
 246     <a name="ModalDialog_dialog"></a>
 247     <br />&nbsp;<br />
 248     <h2>ModalDialog_dialog</h2>
 249         <p>
 250             This class controls the ModalDialog itself.
 251         </p>
 252
 253     <a name="ModalDialog_topbar"></a>
 254     <br />&nbsp;<br />
 255     <h2>ModalDialog_topbar</h2>
 256         <p>
 257             This class controls the top bar for the ModalDialog. You could, for example, use the <i>display</i> CSS property to
 258             hide this if you don't want it.
 259         </p>
 260
 261     <a name="example"></a>
 262     <br />&nbsp;<br />
 263     <h2>Example usage</h2>
 264         <p>
 265             Here is an example of using the CSS classes. At the time of writing, some of the items here were only implemented in newer
 266             web browsers:
 267         </p>
 268
 269         <pre class="code">
 270 &lt;style&gt;
 271     .RGraph_png {
 272     }
 273
 274     .RGraph_palette {
 275     }
 276
 277     .RGraph_tooltip {
 278     }
 279
 280     .RGraph_contextmenu {
 281     }
 282
 283     .RGraph_contextmenu_background {
 284     }
 285
 286     .RGraph_contextmenu_item {
 287     }
 288
 289     .RGraph_zoom_window {
 290     }
 291
 292     .RGraph_zoomed_canvas {
 293     }
 294
 295     .RGraph_zoomed_area {
 296     }
 297
 298     .ModalDialog_background {
 299     }
 300
 301     .ModalDialog_dialog {
 302     }
 303
 304     .ModalDialog_topbar {
 305     }
 306 &lt;/style&gt;
 307 </pre>
 308
 309 <a name="important"></a>
 310 <br />&nbsp;<br />
 311 <h2>! important</h2>
 312
 313     <p>
 314         If you're attempting to override default styles, then because of the ordering (ie the script is setting the style  AFTER
 315         your own CSS) you may need to use the "! important" modifier, for example:
 316     </p>
 317
 318     <pre class="code">
 319 &lt;style&gt;
 320     .RGraph_tooltip {
 321         background-color: white ! important;
 322     }
 323 &lt;/style&gt;
 324 </pre>
 325 </body>
 326 </html>