Expanding/Collaping all sections on a Domino web page... bwahahahaha!
Category IBM/Lotus
It's times like this that all the book reviewing pays off... :)
In a number of the Domino web apps I maintain, the user has the opportunity to create pages with sections in the Rich Text area. And of course, when displayed on the web, they can open and close each of the sections. But they wanted the ability to expand and collapse ALL the sections on the page at once. And for the life of me, I couldn't find a Notes formula command that would do that and that was supported on the web.
The prior solution (coded by a friendly runt who will remain unnamed here (joe)) was to use a JavaScript routine that would build a Domino URL using the ExpandSection parameter followed by a number of section numbers (1, 1.1, 1.1.1, etc.). It didn't matter if you named more sections than necessary... everything would still expand. Worked OK for smaller numbers of sections on a form, but it got ugly when you had sections in sections or a large number of sections. A URL can only be so long...
So... The user today had an example with 45 sections on the document. That pretty much destroyed the URL hack. I've been sticking my toe in the DOM scripting waters of late, and I wondered if I could, via JavaScript, get all the sections of a Domino web page (regardless of the number of them), and apply a CSS style to them to expand and collapse them. It's the same concept as the code that Domino automatically adds to the page when you have sections. I just wanted to do them all at once instead of a section at a time.
And I was able to!!! With my DOM Scripting book open, I was able to code the following expandAll and collapseAll functions for inclusion in a JavaScript library, and then I link to them on my web page...
function expandAll () {
sections = document.getElementsByTagName("span");
for (var i = 0; i < sections.length; i++) {
var idName = sections[i].getAttribute("id");
if (idName.substr(0,4) == "xSec") {
sections[i].style.display = "block";
} else if (idName.substr(0,4) == "cSec") {
sections[i].style.display = "none";
}
}
}
function collapseAll () {
sections = document.getElementsByTagName("span");
for (var i = 0; i < sections.length; i++) {
var idName = sections[i].getAttribute("id");
if (idName.substr(0,4) == "xSec") {
sections[i].style.display = "none";
} else if (idName.substr(0,4) == "cSec") {
sections[i].style.display = "block";
}
}
}
Yes, I probably could have made just one function and passed parameters, but I was flat out thrilled to get *this* much working! The collapseAll does leave a blank line between each section on the form, so I'll have to see if I can fix that. But the functionality works, regardless of how many sections you have on the form. I don't care *what* the user does now... :)
Now, I'll probably receive my first "why didn't you just use this command?" email/comment minutes after posting this, but for right now I'm feeling like a coding stud... And after all the documentation stuff I've been doing of late, I needed something like this.
It's times like this that all the book reviewing pays off... :)
In a number of the Domino web apps I maintain, the user has the opportunity to create pages with sections in the Rich Text area. And of course, when displayed on the web, they can open and close each of the sections. But they wanted the ability to expand and collapse ALL the sections on the page at once. And for the life of me, I couldn't find a Notes formula command that would do that and that was supported on the web.
The prior solution (coded by a friendly runt who will remain unnamed here (joe)) was to use a JavaScript routine that would build a Domino URL using the ExpandSection parameter followed by a number of section numbers (1, 1.1, 1.1.1, etc.). It didn't matter if you named more sections than necessary... everything would still expand. Worked OK for smaller numbers of sections on a form, but it got ugly when you had sections in sections or a large number of sections. A URL can only be so long...
So... The user today had an example with 45 sections on the document. That pretty much destroyed the URL hack. I've been sticking my toe in the DOM scripting waters of late, and I wondered if I could, via JavaScript, get all the sections of a Domino web page (regardless of the number of them), and apply a CSS style to them to expand and collapse them. It's the same concept as the code that Domino automatically adds to the page when you have sections. I just wanted to do them all at once instead of a section at a time.
And I was able to!!! With my DOM Scripting book open, I was able to code the following expandAll and collapseAll functions for inclusion in a JavaScript library, and then I link to them on my web page...
function expandAll () {
sections = document.getElementsByTagName("span");
for (var i = 0; i < sections.length; i++) {
var idName = sections[i].getAttribute("id");
if (idName.substr(0,4) == "xSec") {
sections[i].style.display = "block";
} else if (idName.substr(0,4) == "cSec") {
sections[i].style.display = "none";
}
}
}
function collapseAll () {
sections = document.getElementsByTagName("span");
for (var i = 0; i < sections.length; i++) {
var idName = sections[i].getAttribute("id");
if (idName.substr(0,4) == "xSec") {
sections[i].style.display = "none";
} else if (idName.substr(0,4) == "cSec") {
sections[i].style.display = "block";
}
}
}
Yes, I probably could have made just one function and passed parameters, but I was flat out thrilled to get *this* much working! The collapseAll does leave a blank line between each section on the form, so I'll have to see if I can fix that. But the functionality works, regardless of how many sections you have on the form. I don't care *what* the user does now... :)
Now, I'll probably receive my first "why didn't you just use this command?" email/comment minutes after posting this, but for right now I'm feeling like a coding stud... And after all the documentation stuff I've been doing of late, I needed something like this.
| Permalink |
Comments
Sean---
Posted by Sean Burgess At 21:45:53 On 25/07/2006 | - Website - |
Posted by Bruce Elgort At 06:46:31 On 26/07/2006 | - Website - |
Posted by Joe Litton At 05:56:07 On 26/07/2006 | - Website - |
And in case people are reading this and don't know the background... I took over from Joe when he left to move to Tampa. We both have been the "learn to avoid drowning" types, and we've learned a lot from each other over the years (me more from him, I feel). I bear no ill-will towards the URL hack. In fact, I expanded on it shortly after I took over...
Posted by Duffbert At 06:19:58 On 26/07/2006 | - Website - |
Posted by Duffbert At 11:27:10 On 26/07/2006 | - Website - |
Posted by Trina Munson At 11:11:56 On 26/07/2006 | - Website - |
Anyway, the workaround worked perfect for me, didn't have any subsections to worry about though, if I ever have to deal with a document that has some it might become a bit of a problem.
Thanks for the tip !
Posted by ChrisRoc At 00:46:06 On 29/07/2010 | - Website - |
Posted by Jan Krejcarek At 04:26:22 On 20/09/2011 | - Website - |