Wednesday, August 24, 2005

Scripting: show/hide content script update

I've made some major changes to the show/hide content script. I've been trying to write or rewrite much of the client-side code we use with the ideals of progressive enhancement in mind. The show/hide code pretty much went the opposite direction when I created it, but now I think it's more aligned with the goals of PE. Read on for a quick summary of the changes.

Simpler implementation

I was able to change the implementation process so that only three steps are required:
  • Create the show/hide content inside an element or surround the desired content with a div or span. Place an anchor inside the element and give it a class of shContent.
  • Attach the script file.
  • Attach the default stylesheet. Made any additional style declarations as desired.
A complex system of divs and classes is no longer needed to indicate what text is part of the show/hide routine. The script now looks for the anchor and then performs all actions on the container tag. Not only does this simplify implementation, but it also fixes some of the problems I noted in a previous post regarding structure vs. compatibility.

Updated anchor linking

Links coming into a page can now use the show/hide content anchor rather than having to create an extra anchor on the show/hide action link. The script will then determine where the action link is, activate it, then scroll to that position.

The exception being browsers that don't run the code (such as Nav4). These browsers lands at the show/hide content rather than the action link. This is not the preferred action but I think it's acceptable. I'll continue to investigate to see if I can get it to land on the action link.

I also added a "scroll to" action to the script for non-show/hide anchors accessed when first entering a page. This addition was necessary because Firefox jumps to an anchor prior to running the script, causing the page to shift after the final scroll position has been set. This is a problem since the page can shift significantly when more than a few show/hide sections are present on the page.

Bug fixes

Links to other pages with the an anchor matching that of a show/hide content anchor on the current page was broken with the current update. This bug was caused by the removal of the shLink class, which was previously used to determine the action link. I now have the script check the page each link points to in order to determine if a link is supposed to affect the show/hide content display.