Menu
Hi,
I posted this before, but I think I was lacking in more details and a good example of what I’m doing.
My webpage is on [url]http://www.glisterbliss.com/prob1.html
I have this table of content (TOC )script that scrolls smoothly in place as you scroll down. The problem is that if there are is an overflow of headings, the lower headings will be cut off. That’s why I use a style of ” height:95%; position:absolute; overflow-y:auto” on DIV “generated-toc” which a script acts on.
However, a DIV that is at “height: 95%” is unattractive as users need to be able to hide the content if it’s not needed. So, I created an onclick function that toggles the height to auto and the default 95%.
But I lack a good understanding of Javascript, so please help me incorporate this “function changeheight” code to the toggling/hide-show TOC code that I think “function wrapOpenClose” is responsible for.
It would be great to if can just click “Show table of contents,” changing the height to 95% and on “Hide Toc” = height: auto, which makes it looks collapsed.
Please see the file generated_toc.js to get an overview of the whole script.
<input type=”button” value=”click here” onclick=”changeheight(‘generated-toc’)” />
function changeheight(objDivID)
{
var height= new String();
height= document.getElementById(objDivID).style.height;
if(height.toLowerCase()==’auto’)
{
document.getElementById(objDivID).style.height = ‘95%’;
}
else
{
document.getElementById(objDivID).style.height = ‘auto’;
}
}
wrapOpenClose: function(a, cur_list_el) {
// we return a function here so that it acts as a closure;
// in essence the inner function, which is the event handler
// for clicking on the toggle-toc link, remembers the a and cur_list_el
// elements as they are when they’re passed in to it.
// This is an explicit function rather than an anonymous function
// defined where it’s called so it’s easier to understand.
return function(e) {
d = cur_list_el.style.display;
a.firstChild.nodeValue = (d == ‘block’ ? ‘Show’ : ‘Hide’) + ‘ Table of Contents’;
a.className = (d == ‘block’ ? ‘toggle-closed’ : ‘toggle-open’);
cur_list_el.style.display = d == ‘block’ ? ‘none’ : ‘block’;
// set a cookie to “open” or “closed” to save the state of the TOC
if (cur_list_el.style.display == “block”) {
generated_toc.createCookie(“generated_toc_display”,”open”,21);
} else {
generated_toc.createCookie(“generated_toc_display”,”closed”,21);
}
if (window.event) {
window.event.returnValue = false;
window.event.cancelBubble = true;
} else {
e.preventDefault();
e.stopPropagation();
}
}
}
Thanks so much! Ken