[Javascript] Auto scrolling
Larry Cotton
laurence.cotton at ntlworld.com
Thu Feb 13 05:19:44 CST 2003
Hi
I've written a contents page that displays/hides sub-section titles when
you click on a section title. This is done by using the 'display' style
property. The problem is whenever you 'open up' a list of sub sections the
browser automatically scrolls to the top of the screen, so you have to
scroll down to see the newly displayed sub sections.
Does anyone know how to prevent this scrolling to the top ?
The code looks somthing like :
HTML code : consists of a series of divs containing the text for the title
of each section. Each div has an onClick() handler that calls
controlExpand(). This functions hides or displays the sub sections as
appropriate. (Note 1)The top-level sections are put in a table, so the
section expansion occurs within a table cell, 2) the second column in the
table consists of standard href links).
<table align="center" style="width: 100%; border-style: outset;
border-width: 2;">
<tr>
<th style="border-style: outset; border-width: 2; font-size:
24pt;">Contents</th>
<th style="border-style: outset; border-width: 2; font-size: 24pt;">Page
Link</th>
</tr>
<tr>
<td style="border-style: outset; border-width: 2;">
<div id="Intro" style="display: '';" onClick="controlExpand(this,
2)"><a href="#" style="color: white; font-size: 24pt;">Introduction</a></div>
<div id="Intro_0" style="display: 'none';">   <a href="#"
style="color: white; font-size: 20pt;">Five Kingdoms System</a></div>
<div id="Intro_1" style="display: 'none';">   <a href="#"
style="color: white; font-size: 20pt;">Three Domains System</a></div>
</td>
<td style="border-style: outset; border-width: 2;">
<div id="L_Intro" style="display: '';"><a href="polIntro.htm"
style="font-size: 24pt;">Introduction</a></div>
<div id="L_Intro_0" style="display: 'none';">   <a
href="polIntroWhit.htm" style="font-size: 20pt;">Five Kingdoms Intro</a></div>
<div id="L_Intro_1" style="display: 'none';">   <a href="#"
style="font-size: 20pt;">Three Domains Intro</a></div>
</td>
</tr>
<tr>
<td style="border-style: outset; border-width: 2;">
<div id="FiveK" style="display: '';" onClick="controlExpand(this,
1)"><a href="#" style="color: white; font-size: 24pt;">Five Kingdoms</a></div>
<div id="FiveK_0" style="display: 'none';" onClick="controlExpand(this,
1)">   <a href="#" style="color: white; font-size:
20pt;">Superkingdom: Prokarya</a></div>
<div id="FiveK_0_0" style="display: 'none';"
onClick="controlExpand(this, 2)">     <a href="#"
style="color: white; font-size: 18pt;">Kingdom: Bacteria</a></div>
<div id="FiveK_0_0_0" style="display: 'none';"
onClick="controlExpand(this, 1)">       <a href="#"
style="color: white; font-size: 16pt;">Subkingdom: Archaea</a></div>
<div id="FiveK_0_0_0_0" style="display: 'none';"
onClick="controlExpand(this, 2)">        
<a href="#" style="color: white; font-size: 14pt;">Division:
Mendosicutes</a></div>
<div id="FiveK_0_0_0_0_0" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B1 Euryarchaeota</a></div>
<div id="FiveK_0_0_0_0_1" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B2 Crenarchaeota</a></div>
<div id="FiveK_0_0_1" style="display: 'none';"
onClick="controlExpand(this, 3)">       <a href="#"
style="color: white; font-size: 16pt;">Subkingdom: Eubacteria</a></div>
<div id="FiveK_0_0_1_0" style="display: 'none';"
onClick="controlExpand(this, 6)">        
<a href="#" style="color: white; font-size: 14pt;">Division:
Gracilutes</a></div>
<div id="FiveK_0_0_1_0_0" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B3 Proteobacteria</a></div>
<div id="FiveK_0_0_1_0_1" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B4 Spirochaetae</a></div>
<div id="FiveK_0_0_1_0_2" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B5 Cyanobacteria</a></div>
<div id="FiveK_0_0_1_0_3" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B6 Saprospirae</a></div>
<div id="FiveK_0_0_1_0_4" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B7 Chloroflexa</a></div>
<div id="FiveK_0_0_1_0_5" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B8 Chlorobia</a></div>
<div id="FiveK_0_0_1_1" style="display: 'none';"
onClick="controlExpand(this, 1)">        
<a href="#" style="color: white; font-size: 14pt;">Division:
Tenericutes</a></div>
<div id="FiveK_0_0_1_1_0" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B9 Aphragmabacteria</a></div>
<div id="FiveK_0_0_1_2" style="display: 'none';"
onClick="controlExpand(this, 5)">        
<a href="#" style="color: white; font-size: 14pt;">Division:
Fermicutes</a></div>
<div id="FiveK_0_0_1_2_0" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B10 Endospora</a></div>
<div id="FiveK_0_0_1_2_1" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B11 Pirellulae</a></div>
<div id="FiveK_0_0_1_3_2" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B12 Actinobacteria</a></div>
<div id="FiveK_0_0_1_2_3" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B13 Deinococci</a></div>
<div id="FiveK_0_0_1_2_4" style="display:
'none';">           <a href="#"
style="color: white; font-size: 14pt;">Phylum: B14 Thermoatogae</a></div>
</td>
<td style="border-style: outset; border-width: 2;">
<div id="L_FiveK" style="display: '';"><a href="#" style="font-size:
24pt;">Five Kingdoms</a></div>
<div id="L_FiveK_0" style="display: 'none';">   <a href="#"
style="font-size: 20pt;">Superkingdom: Prokarya</a></div>
<div id="L_FiveK_0_0" style="display: 'none';">     <a
href="#" style="font-size: 18pt;">Kingdom: Bacteria</a></div>
<div id="L_FiveK_0_0_0" style="display:
'none';">       <a href="#" style="font-size:
16pt;">Subkingdom: Archaea</a></div>
<div id="L_FiveK_0_0_0_0" style="display:
'none';">         <a href="#"
style="font-size: 14pt;">Division: Mendosicutes</a></div>
<div id="L_FiveK_0_0_0_0_0" style="display:
'none';">         <a href="#"
style="font-size: 14pt;">Phylum: B1 Euryarchaeota</a></div>
<div id="L_FiveK_0_0_0_0_1" style="display:
'none';">         <a href="#"
style="font-size: 14pt;">Phylum: B2 Crenarchaeota</a></div>
<div id="L_FiveK_0_0_1" style="display:
'none';">       <a href="#" style="font-size:
16pt;">Subkingdom: Eubacteria</a></div>
<div id="L_FiveK_0_0_1_0" style="display:
'none';">         <a href="#"
style="font-size: 14pt;">Division: Gracilutes</a></div>
<div id="L_FiveK_0_0_1_0_0" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B3 Proteobacteria</a></div>
<div id="L_FiveK_0_0_1_0_1" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B4 Spirochaetae</a></div>
<div id="L_FiveK_0_0_1_0_2" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B5 Cyanobacteria</a></div>
<div id="L_FiveK_0_0_1_0_3" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B6 Saprospirae</a></div>
<div id="L_FiveK_0_0_1_0_4" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B7 Tenericutes</a></div>
<div id="L_FiveK_0_0_1_0_5" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B8 Firmicutes</a></div>
<div id="L_FiveK_0_0_1_1" style="display:
'none';">         <a href="#"
style="font-size: 14pt;">Division: Tenericutes</a></div>
<div id="L_FiveK_0_0_1_1_0" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B9 Aphragmabacteria</a></div>
<div id="L_FiveK_0_0_1_2" style="display:
'none';">         <a href="#"
style="font-size: 14pt;">Division: Fermicutes</a></div>
<div id="L_FiveK_0_0_1_2_0" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B10 Endospora</a></div>
<div id="L_FiveK_0_0_1_2_1" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B11 Pirellulae</a></div>
<div id="L_FiveK_0_0_1_3_2" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B12 Actinobacteria</a></div>
<div id="L_FiveK_0_0_1_2_3" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B13 Deinococci</a></div>
<div id="L_FiveK_0_0_1_2_4" style="display:
'none';">           <a href="#"
style="font-size: 14pt;">Phylum: B14 Thermoatogae</a></div>
</td>
</tr>
<tr>
<td style="border-style: outset; border-width: 2;">
<div id="ThreeD" style="display: '';" onClick="controlExpand(this,
0)"><a href="#" style="color: white; font-size: 24pt;">Three Domains</a></div>
</td>
<td style="border-style: outset; border-width: 2;">
</td>
</tr>
</table>
<script language="javascript" type="text/javascript"><!--
bodyEnd();
//--></script>
</body>
Javascript :
function controlExpand(obj, noOfKids)
{
var i = 0;
var idRoot = obj.id;
for(i=0; i<noOfKids; i++)
{
var kid = pele(idRoot + "_" + i);
var linkKid = pele('L_' + idRoot + "_" + i);
if(kid)
{
if(kid.style.display == 'none')
{
kid.style.display = '';
linkKid.style.display = '';
}
else
{
hideChildren(idRoot + "_" + i);
kid.style.display = 'none';
linkKid.style.display = 'none';
}
}
}
}
function hideChildren(parentNm)
{
var i=0;
var obj;
var linkObj;
do
{
var cldNm = parentNm + '_' + i;
obj = pele(cldNm);
linkObj = pele('L_' + cldNm);
if(obj)
{
hideChildren(cldNm);
obj.style.display = 'none';
if(!linkObj) {
alert("child ref has no link mapping"); }
else {
linkObj.style.display = 'none'; }
i++;
}
} while(obj);
}
Cheer
Larry
More information about the Javascript
mailing list