Tech notes

  1. Avoid Quirks Mode Always use a DOCTYPE declaration to avoid sending Internet Explorer into Quirks Mode.
  2. SVG issues
    1. Serving SVG(z):Anything bigger than husky_dog_gerald needs to be gzipped pic.svg.gz; it does not seem to be necessary to rename it pic.svgz. For Apache servers: needs an AddType:
      AddType image/svg+xml .svg
      AddType image/svg+xml .svgz
      AddEncoding gzip .svgz
      You could add the following lines in .htaccess which would be useful if the server was gzipping everything it sent (but ours doesn't).
      <FilesMatch \.svgz$>
        <IfModule mod_gzip.c>
          mod_gzip_on No
        </IfModule>
      </FilesMatch>
      	 
      This keeps Apache from double-zipping the file if mod_gzip is on--which it seems not to be on Dante/Homer.
    2. Note that the svg files are xml compliant and must have an xmlns in second line as attribute of the element SVG:
      xmlns="http://www.w3.org/2000/svg"
  3. popup windows:
    For opening windows to display an image, use (a), which auto-sizes the window to the dimensions of the image. 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. the q element: CSS2 includes an element q for marking quotations. Firefox supports this as it should by displaying <q> as “ and the </q> tag as ”. Also, elegantly, it will automatically display a q' inside another one as a singly curly (or slanted--if sanserif) ‘. Unfortunately IE, even IE7, does not support this, and simply ignores q. Not a good idea to use q; if you want curly ("smart") quotes, put 'em by hand (double opening quotes are "ldquo", double closing ones are "rdquo", single opening are lsquo, and so on. --these are character entities). Test for support: She said, Eggplant! quite loudly.

    Or, you can brute-force ldquo and rdquo with &#8220 and &#8221: “If anyone cares,” she muttered wearily.

    Stephen Poley has a nice little sed script for converting the inch and aspostrophe quotation marks into the smart pairs.

  6. 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.

  7. 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>
  8. The target attribute is not legal in XHTML1.1 (or in HTML 4 strict). [It is back in business in HTML5] What to do? Use a version of winpop:

      <a href="filename.html" 
       onclick="window.open(this.href); return false;"
       onkeypress="window.open(this.href); return false;">
    

    This does not handle the use of target with base, which is used, for example, on the Calendar page. In any case, if you go to this much trouble, why not at least locate it with an offset on x and y?