<!DOCTYPE html> <html lang="en-US"> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> <title>JavaScript Sample</title> <link href="../common.css" rel="stylesheet" type="text/css"/> <link type="text/css" rel="stylesheet" href="general.css" /> <link type="text/css" rel="stylesheet" href="table.css" /> <script type="text/javascript" src="flotr2.min.js"></script> <script type="text/javascript" src="../awesomizr.js"></script> <script type="text/javascript" src="script.js"></script> <script type="text/javascript"> function executeScripts() { // retrieve the data from the table getData(document.getElementById("table")); // calculate the total precipitation to the last column calculateTotal(document.getElementById("table")); // draw the graphs drawLines(document.getElementById("graphs").children[0]); drawBars(document.getElementById("graphs").children[1]); drawPie(document.getElementById("graphs").children[2]); // transform the table transformTable(document.getElementById("table")); // insert PDF pages as images insertPdfAsImages("resources/magazine.pdf"); } </script> </head> <body onload="executeScripts()"> <h1>JavaScript Sample</h1> <p>This document shows precipitation values for several cities (taken from the cities' respective Wikipedia articles). JavaScript is used to create graphs and improve the look of the table. This sample includes several external style sheets and script files:</p> <ul> <li><em>script.js</em> Retrieves data from the HTML table, calculates totals and passes them to Flotr.</li> <li><em>flotr2.min.js</em> A popular Open Source JavaScript library to create graphs.</li> <li><em>awesomizr.js</em> A RealObjects-made JavaScript library used to transform table headers.</li> <li><em>style.css</em> Styles tables with advanced CSS3 properties and selectors.</li> </ul> <div id="graphs"> <div></div> <div></div> <div></div> </div> <table id="table" class="styled"> <thead> <tr> <td>City</td> <td>January</td> <td>February</td> <td>March</td> <td>April</td> <td>May</td> <td>June</td> <td>July</td> <td>August</td> <td>September</td> <td>October</td> <td>November</td> <td>December</td> <td>Total</td> </tr> </thead> <tbody> <tr> <td>New York City</td> <td>71.1</td> <td>65.5</td> <td>88.4</td> <td>77.7</td> <td>101.3</td> <td>95.8</td> <td>94.5</td> <td>74.2</td> <td>94.5</td> <td>86.4</td> <td>80.5</td> <td>77.5</td> <td></td> </tr> <tr> <td>Los Angeles</td> <td>79.2</td> <td>96.5</td> <td>61.7</td> <td>23.1</td> <td>6.6</td> <td>2.3</td> <td>0.3</td> <td>1</td> <td>6.1</td> <td>16.8</td> <td>26.4</td> <td>59.2</td> <td></td> </tr> <tr> <td>San Francisco</td> <td>114.3</td> <td>113</td> <td>82.6</td> <td>37.1</td> <td>18</td> <td>4.1</td> <td>0</td> <td>1.5</td> <td>5.3</td> <td>28.4</td> <td>80.3</td> <td>115.8</td> <td></td> </tr> <tr> <td>Washington. D.C.</td> <td>69.1</td> <td>68.8</td> <td>80.5</td> <td>68.8</td> <td>93.0</td> <td>85.9</td> <td>96.5</td> <td>99.3</td> <td>84.1</td> <td>76.7</td> <td>79.2</td> <td>79.2</td> <td></td> </tr> <tr> <td>Boston</td> <td>85.3</td> <td>82.6</td> <td>109.7</td> <td>95</td> <td>88.4</td> <td>93.5</td> <td>87.1</td> <td>83.6</td> <td>87.4</td> <td>100.1</td> <td>101.3</td> <td>96</td> <td></td> </tr> <tr> <td>Berlin</td> <td>42.3</td> <td>33.3</td> <td>40.5</td> <td>37.1</td> <td>53.8</td> <td>68.7</td> <td>55.5</td> <td>58.2</td> <td>45.1</td> <td>37.3</td> <td>43.6</td> <td>55.3</td> <td></td> </tr> <tr> <td>Stockholm</td> <td>39</td> <td>27</td> <td>26</td> <td>30</td> <td>30</td> <td>75</td> <td>72</td> <td>66</td> <td>55</td> <td>50</td> <td>53</td> <td>46</td> <td></td> </tr> <tr> <td>Cape Town</td> <td>15</td> <td>17</td> <td>20</td> <td>41</td> <td>69</td> <td>93</td> <td>82</td> <td>77</td> <td>40</td> <td>30</td> <td>14</td> <td>17</td> <td></td> </tr> </tbody> <tfoot> <tr> <td colspan="14"><dfn>Precipitation [mm] per month</dfn></td> </tr> </tfoot> </table> <h2 style="break-before: auto;">Awesomizr</h2> <p>RealObjects provides you its Open Source JavaScript library <em>Awesomizr</em>. This library provides among other things a function that can be used to rotate the header of any table in an arbitrary angle, by using CSS3 transforms.</p> <h3>Usage</h3> <p>Transform a table by including the library in your document and calling the <em>rotateTableHeader</em> function in your JavaScript code. <em>Awesomizr</em> will automatically create a <code><thead></code> element from the first row in the specified table if no such element is present.</p> <div class="code"> <pre> <script type="text/javascript" src="awesomizr.js"></script> <script type="text/javascript"> ... Awesomizr.rotateTableHeader(table, params); </script></pre> </div> <ul> <li> <code>table</code> The HTML node of the table to transform. </li> <li> <code>params</code> An object of optional parameters. </li> </ul> <p>In the PDFreactor manual, you can find more information on the optional parameters and other functionality of the awesomizr library.</p> <h3>Example</h3> <div class="code"> <pre> Awesomizr.rotateTableHeader(document.getElementById("myTable"), { angle: 40, width: "20pt" });</pre> </div> <h2 style="break-before: always;">PDF Images</h2> <p>PDFreactor enables you to embed PDFs as images through the <code><img></code> element. PDF image elements have support for additional CSS and JavaScript properties: <ul> <li>You can select which page should be displayed as image via the CSS property <code>-ro-source-page</code>.</li> <li>Using JavaScript, you can retrieve the number of pages a PDF image object has via the proprietary <code>roPageCount</code> property.</li> </ul> </p> <h3>Usage</h3> <p>You can use JavaScript to retrieve the number of pages of a PDF image object, and automatically generate a PDF image for each page by creating an image element for each page, where you can set the page to be displayed through the CSS property <code>-ro-source-page</code>.</p> <h3>Example</h3> <div id="pdfAsImagesContainer"></div> </body> </html>