Home Explore Help
Sign In
bachir
/
ola4doc
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
ola4doc
/
sys
/
js
/
jquery.line
/
demo.html

demo.html 22 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358 
  1. <!DOCTYPE HTML>
    2. 

  2. <html lang="en-US">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>jQuery.line by Szymon Działowski</title>
    6. 

  6.     <meta name="description" content="jQuery.line plugin to draw lines in HTML5 using pure CSS3 by Szymon Działowski">
    7. 

  7.     <meta name="keywords" content="jQuery.line plugin draw lines html5 css3">
    8. 

  8.     
    9. 

  9.     <script type="text/javascript" src="../../js/jquery.min.js"></script>
    10. 

  10.     <link rel="stylesheet" type="text/css" href="../../js/bootstrap/css/bootstrap-rewrite.css" media="all" />    
    11. 

  11.     
    12. 

  12.     <script type="text/javascript" src="../../js/jquery.minicolors/jquery.minicolors.js"></script>
    13. 

  13.     <link rel="stylesheet" type="text/css" href="../../js/jquery.minicolors/jquery.minicolors.css" media="all" />
    14. 

  14.     
    15. 

  15.     
    16. 

  16. <!--    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    17. 

  17.     <script>window.jQuery || document.write(unescape('%3Cscript src="http://jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script>
    18. 

  18.     <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="all" />
    19. 

  19.     <script type="text/javascript" src="http://httpd.pl/poligon/jquery.line/jquery.minicolors/jquery.minicolors.js"></script>
    20. 

  20.     <link rel="stylesheet" type="text/css" href="http://httpd.pl/poligon/jquery.line/jquery.minicolors/jquery.minicolors.css" media="all" />
    21. 

  21.     
    22. 

  22.     <link rel="stylesheet" type="text/css" href="http://stopsopa.bitbucket.org/js/bootstrap/css/bootstrap-rewrite.css" media="all" />   -->
    23. 

  23.     
    24. 

  24.     
    25. 

  25.     
    26. 

  26.     <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,cyrillic-ext,latin-ext,cyrillic" rel="stylesheet" type="text/css">
    27. 

  27.     <script type="text/javascript" src="jquery.line.js"></script>
    28. 

  28.     
    29. 

  29.     <style type="text/css">        
    30. 

  30.         body {
    31. 

  31.             margin: 0;
    32. 

  32.             padding: 0;
    33. 

  33.             -webkit-user-select: none;
    34. 

  34.             -moz-user-select: -moz-none;
    35. 

  35.              -ms-user-select: none;
    36. 

  36.                  user-select: none;
    37. 

  37.         font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
    38. 

  38.         }
    39. 

  39.         #cont {
    40. 

  40.             width: 500px;
    41. 

  41.         margin: auto;
    42. 

  42.         /*border: 1px solid gray;*/
    43. 

  43.         height: 617px;
    44. 

  44.         }
    45. 

  45.     td {
    46. 

  46.         vertical-align: top;
    47. 

  47.     }
    48. 

  48.     #width {
    49. 

  49.         margin-right: 10px;
    50. 

  50.     }
    51. 

  51.     #color {
    52. 

  52.         width:  250px;
    53. 

  53.         padding-left: 36px;
    54. 

  54.     }
    55. 

  55.     #width,
    56. 

  56.     #correct {
    57. 

  57.         width: 50px;
    58. 

  58.         display: inline-block;
    59. 

  59.         text-align: center;
    60. 

  60.     }
    61. 

  61.         .clear {
    62. 

  62.             clear: both;
    63. 

  63.         }
    64. 

  64.     
    65. 

  65. /* http://httpd.pl/cssmedia#InQiOiIxMCIsIm8iOiIwIiwiYSI6IjEwMCIsInoiOiIxMDAwIiwicyI6IiNjb250IiwiZCI6ImhlaWdodCIsImMiOiJoZWlnaHRfIiwiciI6Im1hcmdpbi10b3A6IDwlPSBtYXgvMiAtIDIwMCAlPnB4OyI= */
    66. 

  66. @media (min-height: 101px) and (max-height: 110px) { #cont {margin-top: -145px;} }@media (min-height: 111px) and (max-height: 120px) { #cont {margin-top: -140px;} }@media (min-height: 121px) and (max-height: 130px) { #cont {margin-top: -135px;} }@media (min-height: 131px) and (max-height: 140px) { #cont {margin-top: -130px;} }@media (min-height: 141px) and (max-height: 150px) { #cont {margin-top: -125px;} }@media (min-height: 151px) and (max-height: 160px) { #cont {margin-top: -120px;} }@media (min-height: 161px) and (max-height: 170px) { #cont {margin-top: -115px;} }@media (min-height: 171px) and (max-height: 180px) { #cont {margin-top: -110px;} }@media (min-height: 181px) and (max-height: 190px) { #cont {margin-top: -105px;} }@media (min-height: 191px) and (max-height: 200px) { #cont {margin-top: -100px;} }@media (min-height: 201px) and (max-height: 210px) { #cont {margin-top: -95px;} }@media (min-height: 211px) and (max-height: 220px) { #cont {margin-top: -90px;} }@media (min-height: 221px) and (max-height: 230px) { #cont {margin-top: -85px;} }@media (min-height: 231px) and (max-height: 240px) { #cont {margin-top: -80px;} }@media (min-height: 241px) and (max-height: 250px) { #cont {margin-top: -75px;} }@media (min-height: 251px) and (max-height: 260px) { #cont {margin-top: -70px;} }@media (min-height: 261px) and (max-height: 270px) { #cont {margin-top: -65px;} }@media (min-height: 271px) and (max-height: 280px) { #cont {margin-top: -60px;} }@media (min-height: 281px) and (max-height: 290px) { #cont {margin-top: -55px;} }@media (min-height: 291px) and (max-height: 300px) { #cont {margin-top: -50px;} }@media (min-height: 301px) and (max-height: 310px) { #cont {margin-top: -45px;} }@media (min-height: 311px) and (max-height: 320px) { #cont {margin-top: -40px;} }@media (min-height: 321px) and (max-height: 330px) { #cont {margin-top: -35px;} }@media (min-height: 331px) and (max-height: 340px) { #cont {margin-top: -30px;} }@media (min-height: 341px) and (max-height: 350px) { #cont {margin-top: -25px;} }@media (min-height: 351px) and (max-height: 360px) { #cont {margin-top: -20px;} }@media (min-height: 361px) and (max-height: 370px) { #cont {margin-top: -15px;} }@media (min-height: 371px) and (max-height: 380px) { #cont {margin-top: -10px;} }@media (min-height: 381px) and (max-height: 390px) { #cont {margin-top: -5px;} }@media (min-height: 391px) and (max-height: 400px) { #cont {margin-top: 0px;} }@media (min-height: 401px) and (max-height: 410px) { #cont {margin-top: 5px;} }@media (min-height: 411px) and (max-height: 420px) { #cont {margin-top: 10px;} }@media (min-height: 421px) and (max-height: 430px) { #cont {margin-top: 15px;} }@media (min-height: 431px) and (max-height: 440px) { #cont {margin-top: 20px;} }@media (min-height: 441px) and (max-height: 450px) { #cont {margin-top: 25px;} }@media (min-height: 451px) and (max-height: 460px) { #cont {margin-top: 30px;} }@media (min-height: 461px) and (max-height: 470px) { #cont {margin-top: 35px;} }@media (min-height: 471px) and (max-height: 480px) { #cont {margin-top: 40px;} }@media (min-height: 481px) and (max-height: 490px) { #cont {margin-top: 45px;} }@media (min-height: 491px) and (max-height: 500px) { #cont {margin-top: 50px;} }@media (min-height: 501px) and (max-height: 510px) { #cont {margin-top: 55px;} }@media (min-height: 511px) and (max-height: 520px) { #cont {margin-top: 60px;} }@media (min-height: 521px) and (max-height: 530px) { #cont {margin-top: 65px;} }@media (min-height: 531px) and (max-height: 540px) { #cont {margin-top: 70px;} }@media (min-height: 541px) and (max-height: 550px) { #cont {margin-top: 75px;} }@media (min-height: 551px) and (max-height: 560px) { #cont {margin-top: 80px;} }@media (min-height: 561px) and (max-height: 570px) { #cont {margin-top: 85px;} }@media (min-height: 571px) and (max-height: 580px) { #cont {margin-top: 90px;} }@media (min-height: 581px) and (max-height: 590px) { #cont {margin-top: 95px;} }@media (min-height: 591px) and (max-height: 600px) { #cont {margin-top: 100px;} }@media (min-height: 601px) and (max-height: 610px) { #cont {margin-top: 105px;} }@media (min-height: 611px) and (max-height: 620px) { #cont {margin-top: 110px;} }@media (min-height: 621px) and (max-height: 630px) { #cont {margin-top: 115px;} }@media (min-height: 631px) and (max-height: 640px) { #cont {margin-top: 120px;} }@media (min-height: 641px) and (max-height: 650px) { #cont {margin-top: 125px;} }@media (min-height: 651px) and (max-height: 660px) { #cont {margin-top: 130px;} }@media (min-height: 661px) and (max-height: 670px) { #cont {margin-top: 135px;} }@media (min-height: 671px) and (max-height: 680px) { #cont {margin-top: 140px;} }@media (min-height: 681px) and (max-height: 690px) { #cont {margin-top: 145px;} }@media (min-height: 691px) and (max-height: 700px) { #cont {margin-top: 150px;} }@media (min-height: 701px) and (max-height: 710px) { #cont {margin-top: 155px;} }@media (min-height: 711px) and (max-height: 720px) { #cont {margin-top: 160px;} }@media (min-height: 721px) and (max-height: 730px) { #cont {margin-top: 165px;} }@media (min-height: 731px) and (max-height: 740px) { #cont {margin-top: 170px;} }@media (min-height: 741px) and (max-height: 750px) { #cont {margin-top: 175px;} }@media (min-height: 751px) and (max-height: 760px) { #cont {margin-top: 180px;} }@media (min-height: 761px) and (max-height: 770px) { #cont {margin-top: 185px;} }@media (min-height: 771px) and (max-height: 780px) { #cont {margin-top: 190px;} }@media (min-height: 781px) and (max-height: 790px) { #cont {margin-top: 195px;} }@media (min-height: 791px) and (max-height: 800px) { #cont {margin-top: 200px;} }@media (min-height: 801px) and (max-height: 810px) { #cont {margin-top: 205px;} }@media (min-height: 811px) and (max-height: 820px) { #cont {margin-top: 210px;} }@media (min-height: 821px) and (max-height: 830px) { #cont {margin-top: 215px;} }@media (min-height: 831px) and (max-height: 840px) { #cont {margin-top: 220px;} }@media (min-height: 841px) and (max-height: 850px) { #cont {margin-top: 225px;} }@media (min-height: 851px) and (max-height: 860px) { #cont {margin-top: 230px;} }@media (min-height: 861px) and (max-height: 870px) { #cont {margin-top: 235px;} }@media (min-height: 871px) and (max-height: 880px) { #cont {margin-top: 240px;} }@media (min-height: 881px) and (max-height: 890px) { #cont {margin-top: 245px;} }@media (min-height: 891px) and (max-height: 900px) { #cont {margin-top: 250px;} }@media (min-height: 901px) and (max-height: 910px) { #cont {margin-top: 255px;} }@media (min-height: 911px) and (max-height: 920px) { #cont {margin-top: 260px;} }@media (min-height: 921px) and (max-height: 930px) { #cont {margin-top: 265px;} }@media (min-height: 931px) and (max-height: 940px) { #cont {margin-top: 270px;} }@media (min-height: 941px) and (max-height: 950px) { #cont {margin-top: 275px;} }@media (min-height: 951px) and (max-height: 960px) { #cont {margin-top: 280px;} }@media (min-height: 961px) and (max-height: 970px) { #cont {margin-top: 285px;} }@media (min-height: 971px) and (max-height: 980px) { #cont {margin-top: 290px;} }@media (min-height: 981px) and (max-height: 990px) { #cont {margin-top: 295px;} }
    67. 

  67. 

  68.     </style>
    69. 

  69.     
    70. 

  70.     <script type="text/javascript">
    71. 

  71.     function log(l) {try {console.log(l);}catch (e) {}}
    72. 

  72.         function track(style, action) {
    73. 

  73.             style || (style = 'unknown');
    74. 

  74.             action || (action = 'DrawLine');
    75. 

  75.             try {
    76. 

  76.                 //_gaq.push(['_trackEvent', 'Events', 'DrawLine', style]); // https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide?hl=pl#SettingUpEventTracking
    77. 

  77.                 ga('send', 'event', 'Events', action, style); // https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=pl
    78. 

  78.             }
    79. 

  79.             catch (e) {}
    80. 

  80.         }
    81. 

  81.         
    82. 

  82.         $(function () {
    83. 

  83.             var width = $('#width');
    84. 

  84.             var color = $('#color');
    85. 

  85.             $('#up, #down').click(function () {
    86. 

  86.                 var t = $(this);
    87. 

  87.                 var v = parseInt(width.html());
    88. 

  88.                 if (t.is('#up')) {
    89. 

  89.                     ++v
    90. 

  90.                 }
    91. 

  91.                 else {
    92. 

  92.                     --v;
    93. 

  93.                     if (v < 1) {
    94. 

  94.                         v = 1;
    95. 

  95.                     }
    96. 

  96.                 }
    97. 

  97.                 width.html(v);
    98. 

  98.             });
    99. 

  99. 

  100. 

  101.             function Correct() {
    102. 

  102.                 var correct = $('#correct');
    103. 

  103.                 var that = this;
    104. 

  104.                 var step = 10;
    105. 

  105.                 var box = $('#switch');
    106. 

  106.                 this.states = function () {
    107. 

  107.                     var v = this.get();
    108. 

  108. 

  109.                     if (v !== false && v !== true) 
    110. 

  110.                         return box.find('input').removeAttr('disabled');
    111. 

  111. 

  112.                     box.find('input').attr('disabled', 'disabled');
    113. 

  113.                     return this;
    114. 

  114.                 };
    115. 

  115.                 $('#cup').click(function () {
    116. 

  116.                     var v = that.get();
    117. 

  117.                     var v = that.get();
    118. 

  118.                     if (v === true) {
    119. 

  119.                         correct.html(step+'');
    120. 

  120.                         return that.states();
    121. 

  121.                     }
    122. 

  122.                     if (v === false) {
    123. 

  123.                         correct.html('true');
    124. 

  124.                         return that.states();
    125. 

  125.                     }
    126. 

  126.                     if (v === 0-step) {
    127. 

  127.                         correct.html('false');
    128. 

  128.                         return that.states();
    129. 

  129.                     }
    130. 

  130.                     correct.html(v+step);
    131. 

  131.                     that.states();
    132. 

  132.                 });
    133. 

  133.                 $('#cdown').click(function () {
    134. 

  134.                     var v = that.get();
    135. 

  135.                     if (v === true) {
    136. 

  136.                         correct.html('false');
    137. 

  137.                         return that.states();
    138. 

  138.                     }
    139. 

  139.                     if (v === false) {
    140. 

  140.                         correct.html('-'+(step+''));
    141. 

  141.                         return that.states();
    142. 

  142.                     }
    143. 

  143.                     if (v === step) {
    144. 

  144.                         correct.html('true');
    145. 

  145.                         return that.states();
    146. 

  146.                     }
    147. 

  147.                     correct.html(v-step);
    148. 

  148.                     that.states();
    149. 

  149.                 });
    150. 

  150.                 this.get = function () {
    151. 

  151.                     var v = correct.html();
    152. 

  152.                     if (v == 'true') {
    153. 

  153.                         return true;
    154. 

  154.                     }
    155. 

  155.                     if (v == 'false') {
    156. 

  156.                         return false;
    157. 

  157.                     }
    158. 

  158.                     return parseInt(v);
    159. 

  159.                 };
    160. 

  160.             }
    161. 

  161.             var correct = (new Correct()).states();
    162. 

  162. 

  163.             $('.minicolors').minicolors({
    164. 

  164.                 control: 'hue',
    165. 

  165.                 inline: false,
    166. 

  166.                 letterCase: 'uppercase',
    167. 

  167.                 theme: 'bootstrap'
    168. 

  168.             });
    169. 

  169. 

  170.             function opt() {
    171. 

  171.                 return {
    172. 

  172.                     width: width.html(),
    173. 

  173.                     color: color.val(),
    174. 

  174.                     style: $('[name="style"]:checked').val(),
    175. 

  175.                     correct: correct.get(),
    176. 

  176.                     correctpos: $('[name="correctpos"]:checked').val(),
    177. 

  177.                     css : {
    178. 

  178.                     height: '0',
    179. 

  179.                     zIndex: '999',
    180. 

  180.                     zoom: 1
    181. 

  181.                     }
    182. 

  182.                 };
    183. 

  183.             }
    184. 

  184. 

  185.             var a, b, hopt = {
    186. 

  186.                 color: 'red',
    187. 

  187.                 css : {
    188. 

  188.                     zIndex: '1000'
    189. 

  189.                 }
    190. 

  190.             };
    191. 

  191. 

  192.             var mesure = $('#mesure');
    193. 

  193.             function callback(div, o, c, leave) {
    194. 

  194.                 if (mesure.is(':checked') && o.correct !== false && o.correct !== true) {
    195. 

  195.                     a = $.line(c.x1, c.y1, c.bx, c.by, hopt);
    196. 

  196.                     b = $.line(c.x2, c.y2, c.dx, c.dy, $.extend({}, hopt, {color: 'green'}));
    197. 

  197.                     if (leave) {
    198. 

  198.                         a = b = null;
    199. 

  199.                     }
    200. 

  200.                 }
    201. 

  201.             }
    202. 

  202. 

  203.             var x1, y1, x2, y2, run = false, t = $();
    204. 

  204.             $(window)
    205. 

  205.                 .mousemove(function(e) {
    206. 

  206.                     if (run) {
    207. 

  207.                     t && t.remove();
    208. 

  208.                     a && a.remove();
    209. 

  209.                     b && b.remove();
    210. 

  210.                     t = $.line(x1, y1, e.pageX, e.pageY, opt(), callback);
    211. 

  211.                     }
    212. 

  212.                 })
    213. 

  213.                 .mousedown(function (e) {
    214. 

  214.                     x1 = e.pageX;
    215. 

  215.                     y1 = e.pageY;
    216. 

  216.                     t = false;
    217. 

  217.                     run = true;                                        
    218. 

  218.                 })
    219. 

  219.                 .mouseup(function (e) {
    220. 

  220.                     if ( (x1 - e.pageX) < 4 && (y1 - e.pageY) < 4 ) {
    221. 

  221.                         return run = false;            
    222. 

  222.                     }
    223. 

  223.                     run = false;
    224. 

  224.                     t && t.remove();
    225. 

  225.                     a && a.remove();
    226. 

  226.                     b && b.remove();
    227. 

  227.                     $.line(x1, y1, e.pageX, e.pageY, opt(), function (div, o, c) {
    228. 

  228.                         callback(div, o, c, true);
    229. 

  229.                         track(JSON.stringify({
    230. 

  230.                             s: o.style, 
    231. 

  231.                             w: parseInt(o.width),
    232. 

  232.                             c: o.color
    233. 

  233.                         }));
    234. 

  234.                     });
    235. 

  235.                 });
    236. 

  236.                 
    237. 

  237.                 
    238. 

  238.                 (function () {                    
    239. 

  239.                     var go = false;
    240. 

  240.                     $('#home').click(function (e) {
    241. 

  241.                         e.preventDefault();
    242. 

  242.                         var h = $(this).attr('href');
    243. 

  243.                         if (!go) {
    244. 

  244.                             go = true;
    245. 

  245.                             track('home', 'redirect');
    246. 

  246.                             setTimeout(function () {
    247. 

  247.                                 location.href = h;
    248. 

  248.                             },1000);
    249. 

  249.                         }
    250. 

  250.                     });
    251. 

  251.                 })();
    252. 

  252.         
    253. 

  253.         });
    254. 

  254.     </script>
    255. 

  255. </head>
    256. 

  256. <body>
    257. 

  257.     <div id="cont"> 
    258. 

  258.     <div class="btspa">  
    259. 

  259.         <div>
    260. 

  260.         <a href="https://bitbucket.org/stopsopa/jquery.line" class="btn btn-link"><img src="favicon.png" alt="" /> manual/download</a>          
    261. 

  261.         </div>
    262. 

  262.             <div class="alert alert-info">
    263. 

  263.                 <i class="glyphicon glyphicon-info-sign"></i> Use your mouse to draw lines on screen
    264. 

  264.             </div> 
    265. 

  265.         <table>
    266. 

  266.             <tbody>
    267. 

  267.                 <tr>
    268. 

  268.                 <td>
    269. 

  269.                 width:
    270. 

  270.                 </td>
    271. 

  271.                 <td>
    272. 

  272.                 <span id="width">3</span><button class="btn btn-primary btn-xs" id="up"><i class="glyphicon glyphicon-chevron-up"></i></button> <button class="btn btn-primary btn-xs" id="down"><i class="glyphicon glyphicon-chevron-down"></i></button>
    273. 

  273.                 </td>
    274. 

  274.                 </tr>
    275. 

  275.                 <tr>
    276. 

  276.                 <td colspan="2"> 
    277. 

  277.                 <br />
    278. 

  278.                 <br />
    279. 

  279.                 </td>
    280. 

  280.                 </tr>
    281. 

  281.                 <tr>
    282. 

  282.                 <td>
    283. 

  283.                 color:
    284. 

  284.                 </td>
    285. 

  285.                 <td>
    286. 

  286.                 <input type="text" class="form-control minicolors" value="#383838" id="color" autocomplete="off"/>
    287. 

  287.                 </td>
    288. 

  288.                 </tr>
    289. 

  289.                 <tr>
    290. 

  290.                 <td>
    291. 

  291.                 style:
    292. 

  292.                 </td>
    293. 

  293.                 <td>
    294. 

  294.                 <label><input type="radio" name="style" value="solid" autocomplete="off" checked="checked"/>solid</label>
    295. 

  295.                 <label><input type="radio" name="style" value="dotted" autocomplete="off"/>dotted</label>
    296. 

  296.                 <label><input type="radio" name="style" value="dashed" autocomplete="off"/>dashed</label>
    297. 

  297.                 <label><input type="radio" name="style" value="double" autocomplete="off"/>double</label>
    298. 

  298.                 <br />
    299. 

  299.                 <label><input type="radio" name="style" value="groove" autocomplete="off"/>groove</label>
    300. 

  300.                 <label><input type="radio" name="style" value="ridge"  autocomplete="off"/>ridge</label>
    301. 

  301.                 <label><input type="radio" name="style" value="inset"  autocomplete="off"/>inset</label>
    302. 

  302.                 <label><input type="radio" name="style" value="outset" autocomplete="off"/>outset</label>
    303. 

  303.                 </td>
    304. 

  304.                 </tr>
    305. 

  305.                 <tr>
    306. 

  306.                 <td>
    307. 

  307.                 correct:
    308. 

  308.                 </td>
    309. 

  309.                 <td>
    310. 

  310.                 <span id="correct">true</span><button class="btn btn-primary btn-xs" id="cup"><i class="glyphicon glyphicon-chevron-up"></i></button> <button class="btn btn-primary btn-xs" id="cdown"><i class="glyphicon glyphicon-chevron-down"></i></button>
    311. 

  311.                 </td>
    312. 

  312.                 </tr>
    313. 

  313.                 <tr>
    314. 

  314.                 <td>
    315. 

  315.                 always on:
    316. 

  316.                 </td>
    317. 

  317.                 <td id="switch">
    318. 

  318.                 <label><input type="radio" name="correctpos" value="normal" autocomplete="off" checked="checked"/>normal</label>
    319. 

  319.                 <label><input type="radio" name="correctpos" value="top" autocomplete="off"/>top</label>
    320. 

  320.                 <label><input type="radio" name="correctpos" value="bottom" autocomplete="off"/>bottom</label>
    321. 

  321.                 <label><input type="radio" name="correctpos" value="left" autocomplete="off"/>left</label>
    322. 

  322.                 <label><input type="radio" name="correctpos" value="right" autocomplete="off"/>right</label>
    323. 

  323.                 <br />
    324. 

  324.                 <label><input type="checkbox" id="mesure" autocomplete="off"/> mesure</label>
    325. 

  325.                 </td>
    326. 

  326.                 </tr>
    327. 

  327.             </tbody>
    328. 

  328.         </table>
    329. 

  329.     </div>
    330. 

  330.     </div>
    331. 

  331.     
    332. 

  332.     <div class="clear"></div>
    333. 

  333.     
    334. 

  334.     <div id="disqus_thread"></div>
    335. 

  335.     <script type="text/javascript">
    336. 

  336.         /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    337. 

  337.         var disqus_shortname = 'stopsopabitbucket'; // required: replace example with your forum shortname
    338. 

  338. 

  339.         /* * * DON'T EDIT BELOW THIS LINE * * */
    340. 

  340.         (function() {
    341. 

  341.             var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    342. 

  342.             dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    343. 

  343.             (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    344. 

  344.         })();
    345. 

  345.     </script>
    346. 

  346.     <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    347. 

  347.     <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
    348. 

  348.     <script>
    349. 

  349.         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    350. 

  350.         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    351. 

  351.         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    352. 

  352.         })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    353. 

  353. 

  354.         ga('create', 'UA-52657901-1', 'auto');
    355. 

  355.         ga('send', 'pageview');
    356. 

  356.     </script>
    357. 

  357. </body>
    358. 

  358. </html>
    359.