Expand/collapse sections – a clientside cross-browser solution

In this article I posted a solution to collapse/expand all sections on a Domino web page. However, there was one issue with it: it doesn’t work in Firefox, because Domino renders different html for sections in non-IE browsers.

In non-IE environments, expanding a section means that a request is send to the server to retrieve the section data. This is silly, because the code for this to happen clientside shouldn’t be that different from the IE javascript.

This post is about how to create collapse/expand sections that work in all browsers (as long as JavaScript is enabled). It’s an alternative for this solution, for people who are wanting to put a little more effort in it.

Let’s start with a demonstration before explanation.

Expand/collapse sections demo page

A little warning: the little twisty icons don’t show up in my demo page, because I cannot put the default Domino twisties where they should belong. This shouldn’t be a concern for you: if you copy/paste the source of that page in a Domino page and mark the page as html, this should work for you.

Why I made it

Apart from the IE-only restriction, it happens to be that yesterday I read another post on Notes.Net where somebody also had a problem with sections: (with his version of Domino) he couldn’t manage to create a section with a pass-thru table in it: the content of the section couldn’t be pass-thru-milized (is that a word? :-)).

At first, I wanted to help him by trying to reproduce the problem, but I didn’t have the issue overhere. So, as an alternative, I suggested to create his own pass-thru sections. And it perfectly matches the article of yesterday, so yesterday evening I started coding a cross-browser solution for it.

How to use it

You’ll need the source of the demo page for the following procedure.

  1. Paste the expandCollapseSection function to your JS Header. Detection if a section is expanded is by looking at the used source file for the twisty. The expand twisty means the section is collapsed (Domino can be funny ;-) – they probably meant with the naming: with this icon you can expand stuff) and vice versa.
  2. Optionally also paste the expandAllSections and collapseAllSections functions if you want to be able to expand or collapse all sections with a button.
  3. Your content must be included in divs with “secx” as id, where x stands for number 1,2,3,… and an initial style=”display: none;” to hide the content.
  4. If you want the “expand/collapse all” buttons to work, the images require “twistyiconx” as id.
  5. I also used some make-up (styles) to put everything in the right position and style the divs, see for yourself if this suits your needs or change it.

Pfjew! This started as a little comment in a Notes.Net post and ended up to be a lot bigger. I hope you do the cross-browser twist from now one!

7 Comments

  1. >>In non-IE environments, expanding a section means that a request is send to the server to retrieve the section data.

    The behavior for non-IE browser can be controlled through the browser.cnf file at your Domino Data directory. Just remove the hash for the firefox browser:

    Rule Legacy MSIE [4-9]
    Rule Legacy Mozilla/5

    Reply
  2. Wow – I didn’t realise people still used Domino server!

    Reply
  3. :-) I think you might be surprised if you see the number of people that still use it…

    Reply
  4. Martin,

    I had a look at the numbers. They are what I expected.
    http://www.thewhir.com/marketwatch/mic032604.cfm
    Based on the Fortune 1000 (enterprise users, surely Domino’s primary market), we get these figures:
    “According to the survey’s results, 53.4 percent of the sites surveyed ran Microsoft IIS, just slightly above last month’s 53.3 percent. The percentage of sites running Apache was 19.5 percent, up 0.2 percent from February. Netscape Enterprise ran 16.5 percent of the sites while the remaining 10.6 percent ran Lotus Domino, Weblogic, Websphere, IBM, SunOne, Zeus and others.”
    Domino is right down in the ‘others’ section

    If you look at Netcraft’s April 2008 survey, which looks at all web servers (not just enterprise), it’s even worse.
    http://survey.netcraft.com/Reports/200804/
    Domino comes in with just 0.052% of web sites.

    You said I might be surprised – I’m not.

    Regards

    Adam

    Reply
  5. Adam,
    You’re right, Domino is almost not used as a web platform on the internet. On the other hand, the companies that use Domino as their mail platform often use it as a web platform for intranet/extranet applications. But I’m sure now you’re gonna throw some extra figures at my head and I’m not good at that kind of debates. I can only say I like Domino as a webform, but I’m sure there are other interesting platforms as well. It’s all a matter of where to use what.

    Regards,
    Martin

    Reply
  6. Martin & Adam

    I agree with Adam, however I also agree with Martin. This being that while Domino isn’t the one we take to dinner at the web, we do talk to Domino while at dinner at the web.
    In simpler terms, often times we may use the application for the web or intranet/extranet, while using it inside/as our mail program. Similarly, think of application integrating inside Lotus Notes for example, and being able to move documents into a web environment through a plug-in inside the mail program…just a thought. Or think of opening a web-based application inside Lotus Notes…

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

17 − = 13

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>