[thelist] Javascript on the fly ... not flying

.jeff jeff at members.evolt.org
Mon Aug 12 02:48:00 CDT 2002


sharon,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Sharon F. Malone
>
> My revised page is at:
> http://www.sur-sys.com/newhtml/services_new.html
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

the first step to debugging this setup is to view the source of the document in the popup.  if you're using ie, also check the properties for the image and the properties for the document.  this will give you an idea of whether or not things are being setup like you expect.  clicking the top image, here's what i get:

view-source:

<html> <head> <title> Survey Systems, Inc. - Form Sample </title> </head><body> <center> <p> <img src='images/formdesign_l.gif' name='sample' border='0'> <br><a href='javascript:opener.closeImgWindow()'>Close this window</a> </p> </center></body> </html>

image properties:

http://www.sur-sys.com/newhtml/images/formdesign_l.gif

page properties:

http://www.sur-sys.com/newhtml/services_new.html

i can't view the contents of the /newhtml/images directory so i can't tell if that image actually exists, but with a different name, or not.

you could save yourself a lot of headache by using root relative references instead.  simply precede the src path with a leading slash.  that'll force the browser to look in the /images directory instead.

now, some general comments about the site and the scripting.

you need to class the links around the images or remove any transparency placed on the images wrapped with links.  the way it is now there's an ugly background color change when hovering over the images for the popup links.

the scripting for the popups is needlessly keeping non-javascript users from viewing the large images.  take a look at the following article to some ideas on how to avoid this.

Links & JavaScript Living Together in Harmony
http://www.evolt.org/article/thelist/17/20938/

now, to apply the concepts in the article above to your specific situation, this is what i'd do.

1)  move the makeImgWindow() function call from
    the href attribute to the onclick event
    handler.

2)  add a "return false" to the onclick event
    handler after the makeImgWindow() function
    call to cancel the href for javascript
    enabled browsers.

3)  add a target attribute to the <a> tag.

4)  change the href attribute value to the
    path to the image that will be shown in the
    popup.

5)  change the makeImgWindow() function call
    so the image name isn't hardcoded, instead
    using this.href.

6)  alter the makeImgWindow() function so it
    doesn't have a partially hardcoded path to
    the image to be displayed in the popup.

the result will be a more flexible function, a link that non-javascript users can use to view the large image, and a function call in the <a> tag that'll be easier to maintain later on.

the altered makeImgWindow() function:

function makeImgWindow(imgPath, heading)
{
  // Assemble content for the new window.
  content = '<html><head><title>Survey Systems, Inc. - '
          + heading + '</title></head><body><center><p>'
          + '<img src="' + imgPath + '" name="sample"'
          + ' border="0"><br><a'
          + ' href="javascript:opener.closeImgWindow()"'
          + '>Close this window</a></p></center>'
          + '</body></html>';
  // If imgWindow does not exist or is closed, define
  // imgWindow as a new window.
  if(!imgWindow || imgWindow.closed)
  {
    imgWindow = window.open('', '', 'width=525,height=700');
  }
  else
  {
    // If the imgWindow already exists, bring it to
    // the front.
    imgWindow.focus();
  }
  // Write the content to the new window.
  imgWindow.document.write(content)
  // End writing content.
  imgWindow.document.close();
}

an example altered <a> tag:

<a href="/images/formdesign_l.gif"
   target="_blank"
   onclick="makeImgWindow(this.href, 'Form Design'); return false"
>

the following tip will also prove useful i hope.

<tip type="JavaScript" author=".jeff">

when building strings in javascript, force yourself to wrap them with single-quotes.  when you end up writing out long strings of html you'll be glad you did.  so, instead of this:

content = "<a href='javascript:opener.closeImgWindow()'>Close this window</a>"

you'll end up with this:

content = '<a href="javascript:opener.closeImgWindow()">Close this window</a>';

now the html will be more recognizable and you won't have to bother with nearly as much quote escaping.

</tip>

good luck,

.jeff

http://evolt.org/
jeff at members.evolt.org
http://members.evolt.org/jeff/




More information about the thelist mailing list