topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-js-tool-man-examples-junkdrawer-toolbars.htm / htm



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
  <!-- Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) -->
  <html>
  <head>
  <title>Toolbars</title>
  <link rel="stylesheet" type="text/css" href="lib-js-tool-man-examples-common-common.css"/>
  <link rel="stylesheet" type="text/css" href="lib-js-tool-man-examples-toolbar-toolbar.css"/>
  <style type="text/css">
          b {
                  font-weight: normal;
          }
          b.bold {
                  font-weight: bold;
          }
          b.underline {
                  text-decoration: underline;
          }
          b.italic {
                  font-variant: italic;
          }
  </style>
  
  <script language="JavaScript"><!--
  window.onload = function() {
          document.getElementById("button-bold").onclick = toggle;
          document.getElementById("button-underline").onclick = toggle;
          document.getElementById("button-italics").onclick = toggle;
  };
  
  function toggle(event) {
          var target = event.target.nodeType != 3 
                          ? event.target : event.target.parentNode;
          
          var cssClass = target.getAttribute("class");
          if (cssClass == null) {
                  target.setAttribute("class", "active");
          } else if (cssClass.indexOf("active") < 0) {
                  target.setAttribute("class", cssClass + " active");
          } else {
                  if (cssClass.match(/^active/)) {
                          target.removeAttribute("class");
                  } else {
                          var cssClass = cssClass.replace(/^active /, "");
                          var cssClass = cssClass.replace(/ active/, "");
                          var cssClass = cssClass.replace(/ active /g, " ");
                          target.setAttribute("class", cssClass);
                  }
          }
  }
-> </script> </head> <body> <h1>Toolbars</h1> <ul class="breadcrumb"> <li class="first"><a href="http://tool-man.org/">Home</a></li> <li><a href="../index.html">Other Examples</a></li> </ul> <h2>Toolbars</h2> <div class="sidebar"> <p>This example is broken in Internet Explorer</p> </div> <p>Go ahead, re-arrange the buttons.</p> <table> <tr> <td style="vertical-align: top"> <div id="vboop" class="statusbox">&nbsp;</div> <ul id="verticaltoolbar" class="toolbar verticaltoolbar"> <li class="button"><a href="#" onclick="speak('vboop', 'New'); return false;"><img src="lib-js-tool-man-examples-toolbar-filenew.png" border="0"/></a></li> <li class="button"><a href="#" onclick="speak('vboop', 'Open'); return false;"><img src="lib-js-tool-man-examples-toolbar-fileopen.png" border="0"/></a></li> <li class="space"></li> <li class="button"><a href="#" onclick="speak('vboop', 'Print'); return false;"><img src="lib-js-tool-man-examples-toolbar-fileprint.png" border="0"/></a></li> <li class="separator"></li> <li class="button"><a href="#" onclick="speak('vboop', 'Copy'); return false;"><img src="lib-js-tool-man-examples-toolbar-editcopy.png" border="0"/></a></li> <li class="button"><a href="#" onclick="speak('vboop', 'Cut'); return false;"><img src="lib-js-tool-man-examples-toolbar-editcut.png" border="0"/></a></li> <li class="button"><a href="#" onclick="speak('vboop', 'Paste'); return false;"><img src="lib-js-tool-man-examples-toolbar-editpaste.png" border="0"/></a></li> </ul> </td> <td style="vertical-align: top"> <div id="hboop" class="statusbox">&nbsp;</div> <ul id="horizontaltoolbar" class="toolbar horizontaltoolbar"> <li class="button"><a href="#" onclick="speak('hboop', 'New'); return false;"><img src="toolbar/filenew.png" border="0"/></a></li> <li class="button"><a href="#" onclick="speak('hboop', 'Open'); return false;"><img src="toolbar/fileopen.png" border="0"/></a></li> <li class="space"></li> <li class="button"><a href="#" onclick="speak('hboop', 'Print'); return false;"><img src="toolbar/fileprint.png" border="0"/></a></li> <li class="separator"></li> <li class="button"><a href="#" onclick="speak('hboop', 'Copy'); return false;"><img src="toolbar/editcopy.png" border="0"/></a></li> <li class="button"><a href="#" onclick="speak('hboop', 'Cut'); return false;"><img src="toolbar/editcut.png" border="0"/></a></li> <li class="button"><a href="#" onclick="speak('hboop', 'Paste'); return false;"><img src="toolbar/editpaste.png" border="0"/></a></li> </ul> <br class="clear"/> </td> </tr> </table> <br/> <p>The horizontal toolbar is built from an identical list as the vertical toolbar. Different CSS and a horizontally contrained drag script make the difference.</p> <p>Firefox isn't respecting the ":active" pseudo-selector on the list elements. When you mousedown on a button it should look pressed in. This is because we capture "onmousedown" to initiate a drag. Returning true from the onmousedown handler gives the right behavior for ":active", but breaks the dragging script. It's possible to work around this with more JavaScript, I just haven't gotten to it yet.</p> <ul class="toolbar verticaltoolbar"> <li class="button"><a href="#"><img src="../toolbar/filenew.png"/></a></li> <li class="button"><a href="#"><img src="../toolbar/fileopen.png"/></a></li> <li class="space"></li> <li class="button"><a href="#"><img src="../toolbar/print_preview.png"/></a></li> <li class="button"><a href="#"><img src="../toolbar/fileprint.png"/></a></li> <li class="separator"></li> <li class="button"><a href="#"><img src="../toolbar/editcopy.png"/></a></li> <li class="button"><a href="#"><img src="../toolbar/editcut.png"/></a></li> <li class="button"><a href="#"><img src="../toolbar/editpaste.png"/></a></li> </ul> <br/> <br/> <ul class="toolbar horizontaltoolbar"> <li class="button"><a href="#"><img src="../toolbar/filenew.png"/></a></li> <li class="button"><a href="#"><img src="../toolbar/fileopen.png"/></a></li> <li class="button"><a href="#"><img src="../toolbar/filefloppy.png"/></a></li> <li class="separator"></li> <li class="button"><a href="#"><img src="../toolbar/fileprint.png"/></a></li> <li class="button"><a href="#"><img src="../toolbar/print_preview.png"/></a></li> <li class="separator"></li> <li class="button"><a href="#"><img src="../toolbar/editcut.png"/></a></li> <li class="button"><a href="#"><img src="../toolbar/editcopy.png"/></a></li> <li class="button"><a href="#"><img src="../toolbar/editpaste.png"/></a></li> <li class="separator"></li> <li class="button"><a href="#"><img src="../toolbar/undo.png"/></a></li> <li class="button"><a href="#"><img src="../toolbar/redo.png"/></a></li> <li class="separator"></li> <li id="button-bold" class="button"><a href="#"><b class="bold">B</b></a></li> <li id="button-underline" class="button"><a href="#"><b class="underline">U</b></a></li> <li id="button-italics" class="button"><a href="#"><b class="italic">I</b></a></li> <li> <select> <option>Arial</option> <option>Times New Roman</option> <option>Verdana</option> </select><select> <option>8pt</option> <option>9pt</option> <option>10pt</option> <option>12pt</option> <option>14pt</option> </select> </li> <li class="space"></li> <li> <select> <option>200%</option> <option>150%</option> <option>125%</option> <option>100%</option> <option>75%</option> <option>50%</option> <option>Selection</option> <option>Page Width</option> <option>Whole Page</option> </select> </li> <li class="space"></li> <li><label>Find <input/></label></li> </ul> </body> </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-2780434-1"; urchinTracker(); </script>