I was trying to break down a script I have which was approaching 20k in size. This involved breaking it down to seven separate scripts:

shoppingcart.js
shoppingcart_cartdisplay.js
shoppingcart_cartediting.js
shoppingcart_catdisplay.js
shoppingcart_catediting.js
shoppingcart_itemdisplay.js
shoppingcart_itemediting.js

In shoppingcart.js, the other scripts are loaded through a function:

function addJS(name){
 if(window.addEventListener){
  var el=newEl('script');el.src='/admin/j/'+name;
  document.getElementsByTagName('head')[0].appendChild(el);
 }else document.write('');
}

addJS('shoppingcart_cartdisplay.js');

in the above, newEl() is just a shortcut to document.createElement()

The problem is in the following code:

if(window.attachEvent)window.attachEvent('onload',shoppingcart_init);
else if(window.addEventListener)window.addEventListener('load',shoppingcart_init,false);

shoppingcart_init() is defined in shoppingcart_cartdisplay.js.

IE runs the above fine, but Firefox has trouble with it. It looks like that Firefox replaces shoppingcart_init with a pointer to the actual function. This only seems to work if the function has either been defined already, or is in the local file (when you set something equal to something else, the something else must exist so its value can be read – this is different in IE, it seems).

The solution is to create a pseudofunction which will then call the initialisation function. The internal code of the function will not be parsed until it is called, so it doesn’t matter that the initialisation function does not exist yet.

if(window.attachEvent)window.attachEvent('onload',shoppingcart_init);
else if(window.addEventListener)window.addEventListener('load',function(){shoppingcart_init();},false);

Through the encouragement of “Helen” (full name, location, website etc – unknown), I’ve been prodded into reviving an old chestnut of mine called the Collapsible Menu.

The idea of this script was that it takes menus that you create in the form of unordered lists, then it dynamically converts them into a collapsible menu.

For instance, if you have the following menu:

  <ul>
   <li><a href="/">home</a>
    <ul>
     <li><a href="/aboutme">about me</a></li>
     <li><a href="/contact">contact me</a></li>
    </ul>
   </li>
   <li><a href="/gallery">photo gallery</a></li>
  </ul>

You can add in the script:

  <script type="text/javascript" src="cm.js"></script>

And, with no extra work, you have a collapsible menu (example).

Yes yes, I know its not new – there are many people that do that these days. But back in the day, I believe I was one of the first to do it.

Anyway – the request I had from Helen was to change the script so it was possible to remove the [+] links and instead use the entire parent link as the opener/closer.

After much tardiness on my part (been busy and sick, in turns), I’ve done that requested work.

To use the parent link as the opener/closer, you need to override a variable. After the tag which includes the JavaScript, place this line:

 <script type="text/javascript">parentLinkIsOpener=1;</script>

An example of that in action can be seen here.

That’s about it really. But, before I submit this article, here’s a nice goody – A while back, Nathan Young took the script and made a bookmarklet out of it. Try it out! Bookmark the ul collapser, go to this page, then click on the bookmark in your bookmarks list. Violin!

This one had me scratching my head for a few minutes.

Look at the code below, and tell me what’s wrong with it.

 <div id='testdiv'>test</div>
 <script type='text/javascript'>
  testdiv=document.getElementById('testdiv');
  testdiv.appendChild(document.createTextNode('. all is well'));
 </script>

There is nothing wrong with the above, in sane browsers, but IE is not known for its sanity.

Trying the above in IE will result in an “object does not support this method” error.

The reason for this seems to be that IE creates a global variable for each id that it comes across. In this case, that means that testdiv in the JavaScript above is predefined as the <div> in the HTML section.

IE’s error message system is hopelessly useless. The error applies to the ‘=‘ in the line, and not the getElementById, which is what I was scratching my head about.

So what’s the solution? There are two workarounds:

• use a unique variable name.
• pay attention to scope.

The unique variable name approach is not ideal, as it may make less readable in your code than you’d like, so the solution is to tell the browser that the variable name you’re using applies just to that local scope.

 <div id='testdiv'>test</div>
 <script type='text/javascript'>
  var testdiv=document.getElementById('testdiv');
  testdiv.appendChild(document.createTextNode('. all is well'));
 </script>

The above should work. Surprising, how simple a workaround can be…

Thanks to all the people who have tested and used the multiselect before. I’ve taken the improvements, suggestions, and bug-fixes and am now happy with a new version of it.

Multiselect takes a normal <select multiple="multiple"> and converts it dynamically into a more user-friendly interface.

An example of the new and improved version can be found here.

Points of note

• you can now “select all” and “select none”
• a new “reset” link brings the select box back to how it was originally
• the script works even if you have more than one multiselect box

caveats: the name of the <select> must end in ‘[]‘. While this is specifically against W3C rules, there does not seem to be any alternative method to pass on multiple values for one variable.

To use, simple download the script and link to it in your webpage.

This script should work in all major browsers. If it doesn’t work in the one you’re testing in, then please alert me.