...

View Full Version : :: need help adding to this script ::



babelfish
10-23-2003, 01:49 PM
http://www.simonsgroup.com/kamtoolbox/index.html is a dummy page im working on (the ral thing is behind an intranet)

basically i want the foldout menu on the left to have some kind of collapse all and expand all button (probably used from a button somewhere on the nav)

any ideas? any help appreciated...

btw it is for an IE 5+ intranet so no need to worry about (shudders) netscape etc

Willy Duitt
10-23-2003, 03:58 PM
Does something like this help you?

<!--

NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;

if (ver4) {
with (document) {
write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent {position:absolute; visibility:visible}");
write(".child {position:absolute; visibility:visible}");
write(".regular {position:absolute; visibility:visible}")
}
else {
write(".child {display:none}")
}
write("</STYLE>");
}
}

isExpanded = false;

function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}

function arrange() {
nextY = document.layers[firstInd].pageY + document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}

function initIt(){
if (!ver4) return;
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
}
else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
whichEl = divColl(i);
if (whichEl.className == "child") whichEl.style.display = "none";
}
}
}

function expandIt(el) {
if (!ver4) return;
if (IE4) {
whichEl = eval(el + "Child");
whichIm = event.srcElement;
if (whichEl.style.display == "none") {
whichEl.style.display = "block";
whichIm.src = "triUp.gif";
}
else {
whichEl.style.display = "none";
whichIm.src = "triDown.gif";
}
}
else {
whichEl = eval("document." + el + "Child");
whichIm = eval("document." + el + "Parent.document.images['imEx']");
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
whichIm.src = "triUp.gif";
}
else {
whichEl.visibility = "hide";
whichIm.src = "triDown.gif";
}
arrange();
}
}

function expandAll() {
if (!ver4) return;
newSrc = (isExpanded) ? "triDown.gif" : "triUp.gif";

if (NS4) {
document.images["imEx"].src = newSrc;
for (i=firstInd; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Parent") != -1) {
whichEl.document.images["imEx"].src = newSrc;
}
if (whichEl.id.indexOf("Child") != -1) {
whichEl.visibility = (isExpanded) ? "hide" : "show";
}
}

arrange();
if (isExpanded) scrollTo(0,document.layers[firstInd].pageY);
}
else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
if (divColl(i).className == "child") {
divColl(i).style.display = (isExpanded) ? "none" : "block";
}
}
imColl = document.images.item("imEx");
for (i=0; i<imColl.length; i++) {
imColl(i).src = newSrc;
}
}

isExpanded = !isExpanded;
}

onload = initIt;

//-->
</SCRIPT>

<SCR IPT type="text/javascript">
<!--
if (NS4) {
firstEl = "elOneParent";
firstInd = getIndex(firstEl);
arrange();
}
//-->
</SCRIPT>
</HEAD>

<BODY>


<DIV ID="elOneParent" CLASS="parent">
Expand Menu1
</DIV>

<DIV ID="elOneChild" CLASS="child">
...1a
</DIV>

<DIV ID="elOneChild" CLASS="child">
...1b
</DIV>

<DIV ID="elOneChild" CLASS="child">
...1c
</DIV>

<DIV ID="elTwoParent" CLASS="parent">
Expand Menu2
</DIV>

<DIV ID="elTwoChild" CLASS="child">
...2a
</DIV>

<DIV ID="elTwoChild" CLASS="child">
...2b
</DIV>

<DIV ID="elTwoChild" CLASS="child">
...2c
</DIV>

<DIV ID="elTwoChild" CLASS="child">
...2d
</DIV>

<DIV ID="elTwoChild" CLASS="child">
...2e
</DIV>

<DIV ID="elTwoChild" CLASS="child">
...2f
</DIV>

.<br />
.<br />
.<br />
. continue parent/child groupings until end of outline,<br />
. then enclose bottom "ALL" link in DIV<br />
. remaining page elements in DIVs<br />
.<br />
.<br />
.<br />
<br /><br />
<DIV ID="elEndParent" CLASS="parent">
<A HREF="#"
onClick="expandAll(); return false">
<IMG NAME="imEx" SRC="triDown.gif"
WIDTH=16 HEIGHT=16 BORDER=0
ALT="Expand/Collapse All">
</A>
Display/Hide All
</DIV>

I'm attaching a text file in the event
the script becomes corrupted while posting.

.....Willy

Ooops;
It did :eek:

babelfish
10-23-2003, 04:04 PM
hmmm kind of there - problem is that primarily they need to collapse/expand each section but would be nice to see them all - they way you have it then can only see all or nothing

hope im making myself clear

i just wondered if there was a way to get what i had working with just a separate +all and -all button

Willy Duitt
10-23-2003, 04:12 PM
Heh Bablefish;

Yeah, I understand.
I started to integrate that script I had lying around with
yours. But I soon realized I didn't have the time right now.

I downloaded your external script and grabbed your function
from it. I'll check back later, and if you haven't work out another
solution. I'll have another crack at it.

.....Willy

babelfish
10-23-2003, 04:13 PM
nice one :D :thumbsup:

Willy Duitt
10-24-2003, 05:49 AM
Bablefish;

How did you make out?

....Willy

babelfish
10-24-2003, 09:47 AM
not yet - im pretty much busy with other stuff all day (meetings etc) so if anyone wants to help :thumbsup: :thumbsup: :thumbsup:

babelfish
10-31-2003, 04:21 PM
still looking for easy way to make collapse/expand all buttons

any ideas?

adios
10-31-2003, 09:32 PM
function showHideAll()
{
var el, i = 0;
var legend = document.getElementById('showall'), bWhich = (legend.innerHTML == 'Show all');
while (el = document.links[i++])
if (el.className == 'expandable')
el.parentElement.all[2].style.display = (bWhich) ? '' : 'none';
toggleAll(bWhich);
legend.innerHTML = (bWhich) ? 'Hide all' : 'Show all';
return false;
}

function toggleAll(bWhich)
{
var el, i = 0;
while (el = document.images[i++])
if (/(plus|minus)Image/.test(el.src))
el.src = (bWhich) ? minus.src : plus.src;
}

function checkAll()
{
var el, i = 0, num_links = num_open = 0, allclosed = true;
while (el = document.links[i++])
if (el.className == 'expandable')
{
num_links++;
if (el.parentElement.all[2].style.display != 'none')
{
allclosed = false;
num_open++;
}
}
if (allclosed)
{
document.getElementById('showall').innerHTML = 'Show all';
toggleAll(false);
}
else if (num_open == num_links)
{
document.getElementById('showall').innerHTML = 'Hide all';
toggleAll(true);
}
}

Add this to change() :


x.all[2].style.display='';
}
else {
x.all[2].style.display="none"
}
}
checkAll();
}

And:

<!-- ################################################### content start ######################################################## -->
<table width="100%" border="0" cellspacing="0" cellpadding="7">
<tr><td class="navtitle">Account Planning Process</td></tr></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="http://www.simonsgroup.com/kamtoolbox/images/grayline.gif" width="100%" height="1"></td></tr></table>
<table width="100%" border="0" cellspacing="0" cellpadding="7"><tr><td>

<table width="100%" border="0" cellspacing="0" cellpadding="1"><tr><td width="18" valign="top" background="http://www.simonsgroup.com/kamtoolbox/images/dotTile.gif"><img src="http://www.simonsgroup.com/kamtoolbox/images/plusImage.gif" border="0" align="absmiddle" name="abcdefg"></td><td class="mainsection" onMouseOut="tableOut(this)" onMouseOver="tableOver(this)">
<a href="javascript&#58;;" onClick="return showHideAll(this)"><span id="showall">Show all</span></a></td></tr></table>


<table width="100%" border="0" cellspacing="0" cellpadding="1"><tr><td width="18" valign="top" background="http://www.simonsgroup.com/kamtoolbox/images/dotTile.gif"><img............

babelfish
11-07-2003, 06:00 PM
:thumbsup: :thumbsup: :thumbsup:

thanks m8e :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum