add a note that this widget may not work on older Browsers as IE8, MKWS-309
[mkws-moved-to-github.git] / examples / htdocs / dict.html
1 <html>\r
2   <head>\r
3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
4     <title>Dictionary lookup demo</title>\r
5     <script type="text/javascript">\r
6       var mkws_config = {\r
7         sp_auth_credentials: "mkwsdict/mkwsdict"\r
8       };\r
9     </script>\r
10     <link rel="stylesheet" type="text/css" href="//" />\r
11     <link rel="stylesheet" type="text/css" href="mkws-widget-reference.css" />\r
12     <script src="//"></script>\r
13     <script>$ = jQuery = mkws.$; </script>\r
14   </head>\r
15   <body>\r
16 \r
17   <table height="100%" width="100%">\r
18     <tr valign="top" height="100%">\r
19       <td width="60%" valign="top">\r
20         <div id="intro" style="background:yellow; padding:0.1em 1em"\r
21            onclick=" = 'none'">\r
22           <p>\r
23             What follows is seed content for the dictionary-lookup\r
24             demo (taken from <a href=""\r
25                                 >the Wikipedia page for "computer"</a>).\r
26             Select any region of text on this page (for example, by\r
27             double-clicking a word) and that word will be looked up,\r
28             with the results displayed in the sidebar on the right.\r
29           </p>\r
30           <p>\r
31             Click this introduction to dismiss it.\r
32           </p>\r
33         </div>\r
34         <p>A <b>computer</b> is a general purpose device that can be <a href="" title="Computer program">programmed</a> to carry out a set of arithmetic or logical operations. Since a sequence of operations can be readily changed, the computer can solve more than one kind of problem.</p>\r
35         <p>Conventionally, a computer consists of at least one processing element, typically a <a href="" title="Central processing unit">central processing unit</a> (CPU) and some form of <a href="" title="Memory (computers)" class="mw-redirect">memory</a>. The processing element carries out arithmetic and logic operations, and a sequencing and control unit that can change the order of operations based on stored information. Peripheral devices allow information to be retrieved from an external source, and the result of operations saved and retrieved.</p>\r
36         <p>In <a href="" title="World War II">World War II</a>, <a href="" title="Mechanical computer">mechanical</a> <a href="" title="Analog computers" class="mw-redirect">analog computers</a> were used for specialized military applications. During this time the first electronic <a href="" title="Digital data">digital</a> computers were developed. Originally they were the size of a large room, consuming as much power as several hundred modern <a href="" title="Personal computer">personal computers</a> (PCs).<sup id="cite_ref-1" class="reference"><a href=""><span>[</span>1<span>]</span></a></sup></p>\r
37         <p>Modern computers based on <a href="" title="Integrated circuit">integrated circuits</a> are millions to billions of times more capable than the early machines, and occupy a fraction of the space.<sup id="cite_ref-2" class="reference"><a href=""><span>[</span>2<span>]</span></a></sup> Simple computers are small enough to fit into <a href="" title="Mobile device">mobile devices</a>, and <a href="" title="Mobile computing">mobile computers</a> can be powered by small <a href="" title="Battery (electricity)">batteries</a>. Personal computers in their various forms are <a href="" title="Icon">icons</a> of the <a href="" title="Information Age">Information Age</a> and are what most people think of as “computers.” However, the <a href="" title="Embedded system">embedded computers</a> found in many devices from <a href="" title="Digital audio player" class="mw-redirect">MP3 players</a> to <a href="" title="Fighter aircraft">fighter aircraft</a> and from toys to <a href="" title="Industrial robot">industrial robots</a> are the most numerous.</p>\r
38       </td>\r
39       <td width="40%" align="top">\r
40         <div class="mkws-search"></div>\r
41         <div class="mkws-reference"></div>\r
42       </td>\r
43     </tr>\r
44   </table>\r
45     <script type="text/javascript">\r
46       $(".mkws-search").hide();\r
47       $(".mkws-reference").hide();\r
48 \r
49       document.onclick = clickfunc;\r
50       var selectedtext="";\r
51       var clicking = false;\r
52       function clickfunc(e) {\r
53         // may not work on older Browsers, as IE8\r
54         var sel = window.getSelection();\r
55         //console.log("click: " + sel + "  clicking=" + clicking );\r
56         if ( sel != "" && ! clicking ) {\r
57           clicking  = true;\r
58           $(".mkws-reference").show();\r
59           $("input.mkws-query").val(sel);\r
60           //console.log("click: Set value " + sel + "  clicking=" + clicking );\r
61           $("input.mkws-button").trigger("click");\r
62           clicking = false;\r
63         }\r
64       }\r
65     </script>\r
66   </body>\r
67 </html>\r