Some Useful Javascripts

1. dragdrop images: [This is now superseded by drag-drop in HTML5.] You need the file dragdrop.js and the following script somewhere in your file. This one assumes you have seven images with the id's "ringone", "ringtwo" etc.

   <script language="JavaScript" type="text/javascript" src="dragdrop.js"></script>
   <script language="JavaScript" type="text/javascript">
   <!-- SET_DRAGGABLE(CURSOR_MOVE, "ringone","ringtwo","ring3","ring4","ring5","ring6","ring7"); //--> </script>

   You probably want to position the seven movable files initially. See source of this file for a complete working example of this scripts with the rings. Any .gif or .png image you list as an argument of SET-DRAGGABLE will be movable. Crossbrowser IE5+, not NS4. Only works for images, but "drag any object" scripts have problems cross browser. Here is a second working example, where the individual sentences are images and can be reordered.
2. Enable Full alpha-channel transparency:
   
   1. For IE6:
      All you need for this is the sleight.js and a 1px clear gif along with it in the same directory (and a properly translucent png). Load sleight.js in the usual way. For working example, see Three sources of good web writing→
   2. IE 7 and Mozilla Firefox:These browsers natively support png alpha transparency. All you need to do is make a png with the alpha channel values you want. See Use the Gimp→. The background to the fixed menu on the right side of this page is tiled with such a semi-transparent little image. For IE 7, DO NOT USE sleight.js.
3. popup windows:
   For opening windows to display an image, use (a). To open, size, and locate a window, use (b).
   1. As with the previous cases, in the head or somewhere, insert this SCRIPT to load the external autowin.js (with relative path to it):

      <script language="JavaScript" type="text/javascript" src="../autowin.js" ></script>

      and then this A anchor where you want it in the text:

      <a href="javascript:popImage('corbislouvre.jpg','Image of Gallery in the Louvre, property of Corbis'>

      assuming corbislouvre.jpg is the path to the image file and "Image Gallery "etc. is the title you want to appear over the window.
   2. You can use this script as an anchor, filling in the popup's name, width, height, and whatever you want in scrollbars, toolbars, or location). You can import this as a snippet into HTMLKit (or a macro into emacs).

      <a href="corbislouvre.jpg" onclick="window.open(this.href,'popup','position=relative,
      top=100,left=100,width=,height=, toolbar=no,scrollbars=yes,resizable=yes');return false">

      This should all be without any white space or line breaks, or the Javascript will break. (So don't copy-paste this code without cleaning up the breaks.)

4. self-sizing and locating page
   

   This bit of Javascript will reset the window it opens in to the location and size you choose:

   <script language="Javascript">
   <!-- hide from old browsers
   function SetWindow()
   {
   self.moveTo(5,10);
   self.resizeTo(660,530);
   self.scrollTo(0,0)
   }
   // stop hiding -->
   </script> 

   It needs a "onload="SetWindow()" added to the BODY tag to

   activate it.  I use this a lot in the Great Basin Project.→

5. custom tooltip: [This to is superseded by scripts in the library JQuery and by CSS2]

   If you want a bigger, customized "tooltip" window that that provided by the TITLE attribute, use infobox.js from Klaus Knopper. Include it as you would autowin.js or dragdrop.js and add lines in SCRIPT tags like this:

   <script language="JavaScript" type="text/javascript">
   <!--
           maketip('Index','Hauptseite','Zurück zu Knopper.Net');
           maketip('kurse','Kurse und Seminare','Betriebssystem Unix/Linux usw.');
      //  -->
   </script>

   where the first parameter is the name of the popup, the second is its title which appears, and the third is the content of the box. Then, at the place where you want the cursor to activate it, enclose the place in SPAN tags with the mouseOver and mouseOut events as follows:

   <a name="tip1" onMouseOver="tip('kurse'); return true;" onMouseOut="untip(); return true;">Kurse und Seminare</a>

   Then when you mouse over the words Kurse and Seminar in the text you will get the  tooltip called "Kurse und Seminare."  Obviously this only make sense if you are doing a good number of tooltip balloons.  See Knopper's Page→ for working examples.

   
   

   A much more useful and widely used script is overlib.js from Erik Bosrup. Two reasons why it is more useful:

   1. it is very customizable in look and behavior
   2. it can function as a multilink anchor. (An earlier and somewhat customized version is used by Larry Albert in Houston Wet and is central to discussions of juxtaposition in the work.)

   The overlib popup is very customizable. The one-stage pop-up is fairly simple iwth a couple of parameters set up in a script blok in the head and some set in the local link. In principle, they can be set either place, but I included two up in the head to show how that works. The popup requires a Javascript script link to its main package (overlib.js) and a single line at the top of the body, to wit: <div id="overDiv" style="position: absolute; visibility: hidden; z-index: 100;"><div>

   The more complex two-stage version is the one that Larry Albert used in Houston Wet. Here is a version of one page from Houston Wet that is stripped to focus just on the pop-up.

   Multilink anchors open up another level of thinking about what a hypertext link can be. The classic link gives you only one choice: to go or not go to the target page. Usually, upi decide without very much information, on a hunch about what you may find. The multilink gives considerable scope for classifying the connection. Albert's technique wit multilinks is worth some study: the general label "Related Ideas" does indicate the general kind of connection with the other pages and seems much less bound to the level of particular words or phrases than is the case with the standard link. It is helpful to know whether the connection is one of concept, or whether to search for another occurrence of the anchor word on the new page.

6. Row-striper for tables: [Superseded by JQuery and by elegant CSS3 one line of code – but the CSS3 is not supported in Explorer even 9, so beware of nasty surprises.]

   It is easy to automatically add alternating striped background to tables. You include the script stripedscript.js in the usual fashion, but here you edit it to give it a name/id which should match the id you give the table you want striped (default is "schedule").  Then, to get it to do its stuff, you either trigger it with an onLoad command or via a href:javascript command as I have done on the course calendar page.  When you edit the javascript, you can specify the colors as well.

7. Internal/external links:

   Sometimes it helps the user if you indicate which links keep you on site and which take you to another site. int/ext.js links is a bundle of Javascript functions that could be launced onLoad or from a button. For an example of the former, see top page of PhonResources where it is launched onLoad. It is also available as a bookmarklet at Squarefree, under the name int/ext links.

   Well, yes, you can use JS, but it is better and easier to use conditional CSS selectors, as illustrated on this course's pages and in the Archive of Student Writing. One problem: conditional selectors are not supported in IE6 or earlier.

8. rollovers:

   The simplest rollover method requires no Javascript definition of function; it identifies the image to be flipped by its ID and then changes its source:

   

   <a href="" onMouseOver=document.images.janee.src='janee2.jpg'
   onMouseOut=document.images.janee.src='janee1.jpg'>
   <img src="janee1.jpg" id="janee" border=0"> </a>

   You may find a useable rollover snippet in the Lab's HTMLKit. Or you could add this one as a snippet.  Bear in mind that rollovers are much the best when they are the same size. Otherwise the browser will automatically reformat--not a pretty sight.

   Not to be forgotten is Eric Meyer's hover-actuated text rollover→ and also image rollover is ingenious, but it toggles display rather than visibility and so requires some blank space in the layout when the item is not being displayed.

   A third way is to turn on the visibility of an image already present but hidden.  For a splendid example, see Ian Hawk's splash page→

   ---

   
   

   ©2012 George L. Dillon
   http://courses.washington.edu/englhtml/engl382/javascripts.html
   Last modified: Tuesday, 19-Jun-2012 22:39:57 PDT