[thelist] Re: JS: formatting onclick and onfocus

Joshua Olson joshua at waetech.com
Wed Nov 12 14:37:45 CST 2003


----- Original Message ----- 
From: "Dunstan Orchard" <dunstan at 1976design.com>
Sent: Wednesday, November 12, 2003 2:32 PM


> Well, first off, I wanted the onfocus even to run if people clicked on a
> relative link from another comment. Clicking on a 'view this related
comment'
> link takes you (unsuprisingly) to the <li> that contains that comment.
It's the
> <li>s that have the IDs, and so it's them that gain focus when these
relative,
> inter-comment links are clicked.

Your thought process makes sense here.  Another approach may be to put an
actual anchor at the top of the LI and link to the anchor instead of the LI.
This also serves to give the viewer a way to know the link straight to that
comment if they get to it through scrolling and want to know the shortcut.

> The other occasion when I want the onfocus to run is when links are tabbed
> through. I was thinking that the <li> is a container for a comment, and
each
> comment contains links. If any of these links received focus (through
tabbing)
> then (in essence) the <li> is also receiving focus, the onfocus event
would
> trigger and the <li> would display the 'I'm in focus' behaviour.

This is what I was anticipating you'd mention.  I tested setting the onfocus
behavior dynamically via JS and the focusing on a contained anchor and found
(as you did) that it did not work in IE.  I'd venture to say that this
simply won't work.

I came up with something that simulates what you are trying to do:

<html>
  <head>
    <script language="JavaScript" type="text/javascript">
      function dosomething(li) {
        document.forms['info'].elements['info'].value = 'I am now focused
and my li\'s id is ' + li;
      }

      function findParentTag(src, tagname)
      {
        tagname = tagname.toLowerCase();
        el = src;
        while (el.tagName.toLowerCase() != 'html')
        {
          if (el.tagName.toLowerCase() == tagname)
            return el;
          el = el.parentNode;
        }
        return el;
      }

      function setFocusHandlers()
      {
        links = document.links;
        for (i = 0; i < links.length; i++)
        {
          li = findParentTag(links[i], 'li');
          if (li)
            links[i].onfocus = new Function('dosomething(\'' + li.id +
'\');');
        }
      }
    </script>
  </head>
  <body onload="setFocusHandlers()">
    <p><a href="" onclick="return false;" tabindex="1">Start here and then
tab through...</a></p>
    <li id="li1">
      this id is li1
      <a href="#" tabindex="2">test1</a>
      <a href="#" tabindex="3">test2</a>
      <a href="#" tabindex="4">test3</a>
      <a href="#" tabindex="5">test4</a>
    </li>
    <li id="li2">
      this id is li2
      <a href="#" tabindex="6">test1</a>
      <a href="#" tabindex="7">test2</a>
      <a href="#" tabindex="8">test3</a>
      <a href="#" tabindex="9">test4</a>
    </li>

    <form name="info" action="" method="post">
    <input type="text" name="info" value="" size="100" tabindex="10" />
    </form>
  </body>
</html>

HTH,

<><><><><><><><><><>
Joshua Olson
Web Application Engineer
WAE Tech Inc.
http://www.waetech.com
706.210.0168



More information about the thelist mailing list