Help with collapsible list

T

Tony Strazzeri

Repeat posting.

I found some help to create a collapsible list in the group a while
back which I used.

-------------------------------------------------------
see:
http://groups.google.co.uk/group/mi...ders"+frontpage&rnum=2&hl=en#bded950612b53956
-------------------------------------------------------

I am wondering if someone could help me with a couple of small
enhancements.

I am a competent programmer in general but do not have any experience
in web
scripting (Javasrcipt?). I have worked out how to have one of the
sections
start in expanded mode.

Now I want to modify the code do the following two things
1. I would like to scroll the page so that the newly expanded text is
at the
top of the page. Is this possible?
I think this may be possible by passing a bookmark to the procedure and
have it go to the specified bookmark. Alternatively (simpler?) would
be to scroll the page so the start of the expanded list item is at the
top.

2. I will be adding additional sections in the future. From what I see,
the
selected section is expanded and each of the other sections is called
at each
point to un-expand it. This makes the code rather unwieldily for large
numbers of sections/points. Is it possible to define an array with all
of the
section names so that the FP_changeProp only needs to be sent the name
of the
section to be expanded and have it traverse the array to un-expand all
of the
others?

It seems to me that both of these features should be fairly simple but
beyond me at the moment. I hope someone can help me with this.

Cheers
TonyS.

---------
The function is called with:
<a href="#"
onclick="FP_changeProp(/*id*/'sub_Present',1,'style.display','block','bm_Present');
FP_changeProp(/*id*/'sub_FutureSoon',1,'style.display','none');

FP_changeProp(/*id*/'sub_FutureLong',1,'style.display','none')">

---------

The modified function is:

function FP_changeProp()
{ //v1.0
var
args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array();
if(o)
for(i=2; i<args.length; i+=2)
{ v=args[i+1]; s="o";
ao=args.split(".");
for(j=0; j<ao.length; j++)
{
s+="."+ao[j];
if(null==eval(s))
{
s=null; break;
}
}
x=new Object;
x.o=o;
x.n=new Array();
x.v=new Array();
x.n[x.n.length]=s; // Why is this different to below (ie not
using
eval)?
eval("x.v[x.v.length]="+s); //Is this clearing the x.v array
because s
is null?
d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v");
}
}
 
M

Murray

1. I would like to scroll the page so that the newly expanded text is
at the
top of the page. Is this possible?
I think this may be possible by passing a bookmark to the procedure and
have it go to the specified bookmark. Alternatively (simpler?) would
be to scroll the page so the start of the expanded list item is at the
top.
Click to expand...

It just might be possible to just add a named anchor to the link that
triggers the expanded section to appear.

Try this -

<a href="#sub_Present"
onclick="FP_changeProp(/*id*/'sub_Present',1,'style.display','block','bm_Present');
FP_changeProp(/*id*/'sub_FutureSoon',1,'style.display','none');
FP_changeProp(/*id*/'sub_FutureLong',1,'style.display','none')">

with the expand region like this -

<div id="sub_Present"
Is it possible to define an array with all
of the
section names so that the FP_changeProp only needs to be sent the name
of the
section to be expanded and have it traverse the array to un-expand all
of the
others?
Click to expand...

Yes, that would be possible, but it would rely on better js coders than me.
Sorry.

--
Murray
--------------
MVP FrontPage


Tony Strazzeri said:
Repeat posting.

I found some help to create a collapsible list in the group a while
back which I used.

-------------------------------------------------------
see:
http://groups.google.co.uk/group/mi...ders"+frontpage&rnum=2&hl=en#bded950612b53956
-------------------------------------------------------

I am wondering if someone could help me with a couple of small
enhancements.

I am a competent programmer in general but do not have any experience
in web
scripting (Javasrcipt?). I have worked out how to have one of the
sections
start in expanded mode.

Now I want to modify the code do the following two things
1. I would like to scroll the page so that the newly expanded text is
at the
top of the page. Is this possible?
I think this may be possible by passing a bookmark to the procedure and
have it go to the specified bookmark. Alternatively (simpler?) would
be to scroll the page so the start of the expanded list item is at the
top.

2. I will be adding additional sections in the future. From what I see,
the
selected section is expanded and each of the other sections is called
at each
point to un-expand it. This makes the code rather unwieldily for large
numbers of sections/points. Is it possible to define an array with all
of the
section names so that the FP_changeProp only needs to be sent the name
of the
section to be expanded and have it traverse the array to un-expand all
of the
others?

It seems to me that both of these features should be fairly simple but
beyond me at the moment. I hope someone can help me with this.

Cheers
TonyS.

---------
The function is called with:
<a href="#"
onclick="FP_changeProp(/*id*/'sub_Present',1,'style.display','block','bm_Present');
FP_changeProp(/*id*/'sub_FutureSoon',1,'style.display','none');

FP_changeProp(/*id*/'sub_FutureLong',1,'style.display','none')">

---------

The modified function is:

function FP_changeProp()
{ //v1.0
var
args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array();
if(o)
for(i=2; i<args.length; i+=2)
{ v=args[i+1]; s="o";
ao=args.split(".");
for(j=0; j<ao.length; j++)
{
s+="."+ao[j];
if(null==eval(s))
{
s=null; break;
}
}
x=new Object;
x.o=o;
x.n=new Array();
x.v=new Array();
x.n[x.n.length]=s; // Why is this different to below (ie not
using
eval)?
eval("x.v[x.v.length]="+s); //Is this clearing the x.v array
because s
is null?
d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v");
}
}
Click to expand...
 
J

Jon Spivey

Hi Tony,
Try out Murrays idea for the bookmarks if that doesn't work post back and we
can probably figure something with window.scrollTo. For the second part a
function try something like this
<script type="text/javascript">
function doList(){
var a=arguments, b, c; if(a[0] &&
a[0].parentNode.children[1]){b=a[0].parentNode;c=b.children[1].className};
var l = document.getElementById('theList').getElementsByTagName('LI');
for(i=0;i<l.length;
i++)if(l.children[1])l.children[1].className='hide';
if(b && b.children[1])b.children[1].className=(c=='show')?'hide':'show';}
function setList(){
var l = document.getElementById('theList').getElementsByTagName('LI');
for(i=0;i<l.length;
i++)if(l.children[0])l.children[0].onclick=function(){doList(this);};
doList();}
onload=setList;
</script>
<ul id="theList">
<li><a href="#">item one</a><ul>
<li>1a</li>
<li>1b</li>
<li>1c</li>
<li>1d</li>
</ul>
</li>
<li><a href="#">item two</a><ul>
<li>2a</li>
<li>2b</li>
<li>2c</li>
</ul>
</li>
</ul>

--
Cheers,
Jon
Microsoft MVP


Tony Strazzeri said:
Repeat posting.

I found some help to create a collapsible list in the group a while
back which I used.

-------------------------------------------------------
see:
http://groups.google.co.uk/group/mi...ders"+frontpage&rnum=2&hl=en#bded950612b53956
-------------------------------------------------------

I am wondering if someone could help me with a couple of small
enhancements.

I am a competent programmer in general but do not have any experience
in web
scripting (Javasrcipt?). I have worked out how to have one of the
sections
start in expanded mode.

Now I want to modify the code do the following two things
1. I would like to scroll the page so that the newly expanded text is
at the
top of the page. Is this possible?
I think this may be possible by passing a bookmark to the procedure and
have it go to the specified bookmark. Alternatively (simpler?) would
be to scroll the page so the start of the expanded list item is at the
top.

2. I will be adding additional sections in the future. From what I see,
the
selected section is expanded and each of the other sections is called
at each
point to un-expand it. This makes the code rather unwieldily for large
numbers of sections/points. Is it possible to define an array with all
of the
section names so that the FP_changeProp only needs to be sent the name
of the
section to be expanded and have it traverse the array to un-expand all
of the
others?

It seems to me that both of these features should be fairly simple but
beyond me at the moment. I hope someone can help me with this.

Cheers
TonyS.

---------
The function is called with:
<a href="#"
onclick="FP_changeProp(/*id*/'sub_Present',1,'style.display','block','bm_Present');
FP_changeProp(/*id*/'sub_FutureSoon',1,'style.display','none');

FP_changeProp(/*id*/'sub_FutureLong',1,'style.display','none')">

---------

The modified function is:

function FP_changeProp()
{ //v1.0
var
args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array();
if(o)
for(i=2; i<args.length; i+=2)
{ v=args[i+1]; s="o";
ao=args.split(".");
for(j=0; j<ao.length; j++)
{
s+="."+ao[j];
if(null==eval(s))
{
s=null; break;
}
}
x=new Object;
x.o=o;
x.n=new Array();
x.v=new Array();
x.n[x.n.length]=s; // Why is this different to below (ie not
using
eval)?
eval("x.v[x.v.length]="+s); //Is this clearing the x.v array
because s
is null?
d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v");
}
}
Click to expand...
 
T

Tony Strazzeri

OK Thanks for the effort, but I can't get this to work.

Both items in the list appear expanded and nothing happens when I click
either item in preview.

I am having trouble trying to understand what all the code is trying to
do.

In trying to simplify things this is my approach.

Pass a single parameter to the function to tell it which item is
calling it.
By definition all other items must be collapsed.
Create an array in the function and store all the item names in that.
Then for each call traverse the array and hide all of the items (or all
except the one we want expanded) then expand the one we want.

This is what I come up with. I have put comments (//*) where I need
help with the code .

Thanks for any help.

TonyS.

<html>
<head>
<script language="JavaScript">
<!--
function FP_changeProp() {
var
args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
var List_ay=new
Array("sub_Present","sub_FutureSoon","sub_FutureLong");
var ShowThisOne;
for (i=0; i<List_ay.length; i++)
{
//* Here I need to collapse each item
if(List_ay==id) ShowThisOne=i; //This remembers the one we want
expanded

}

//* Now all I need to do is expand the specified item
//* Not sure what all the stuff below does. But surely I only need to
create one object and set its display properties.

d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) {
v=args[i+1]; s="o";
ao=args.split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j];
if(null==eval(s)) {
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new
Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s);
d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById)
el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el)
return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes;
if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el)
return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el)
return el; } }
return null;
}
</script>
</head>

<body> <h3><a href="#bm_Present"
onclick="FP_changeProp(/*id*/'sub_Present',1,'style.display','block','bm_Present')">The
Present</a></h3>
<span id="sub_Present" style="display: block">This is the text I have
in the 'Present' item</span>
<h3><a href="#bm_FutureSoon"
onclick="FP_changeProp(/*id*/'sub_FutureSoon',1,'style.display','block')">The
Immediate Future</a></h3>
<span id="sub_FutureSoon" style="display: none">This is the text
under the 'Immediate Future' item.</span>
<h3><a href="#bm_FutureSoon"
onclick="FP_changeProp(/*id*/'sub_FutureLong',1,'style.display','block')">The
Long Term Future</a> </h3>
<span id="sub_FutureLong" style="display: none">This is the text
under the 'Long Term Future' item.</span>


</body>

</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

why does content repeat? 2
Collapsible List 0
Help With Typing Russian Letters On Microsoft Word Mac 0
Help with multi-level list 0
Active-x browser message caused by what in my FP site 2
VBA works in orignal but fails in copy of database 1
Lower "var" speeds up code ?? 6
Mystery Source Code 5

Top