[Javascript] Auto scrolling
BEKIM BACAJ
trojani2000 at hotmail.com
Mon Feb 17 10:41:07 CST 2003
Yes, there are several ways of achieving just that. But of course there is
always a better way. One of the better wais is keeping the page as simple as
posible and doing the right thing. Escape from nonsense scripts, styles and
commands and keep it clean with this f.i.:
<A href="#HERE" name='HERE'>EXPAND AND STAY HERE</A>
[The # (hash caracter is a pointer to the page itself, -just mouse over the
link with htref='#' and you will see the exact location of the current page.
The clicking on it will make the page jump to the top as it was the first
time loaded, but if you give the name it will scroll you up/down to that
element instantly.
And this is how you control the apearence of your A Tags in style section:
<STYLE>
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited link */
A:hover { color: red } /* user hovers */
A:active { color: lime } /* active link */
</style>
Take care with the order of this statements it must be as shown above,
because of the cascading logic they can override each other.
Regards!
>From: Larry Cotton <laurence.cotton at ntlworld.com>
>Reply-To: javascript at LaTech.edu
>To: javascript at LaTech.edu
>Subject: Re: [Javascript] Auto scrolling
>Date: Mon, 17 Feb 2003 11:31:39 +0000
>
>Hi
>
>Thanks very much for this prompt and exacting reply!!
>Changing the href="#" to a name="" and calling scrollintoview() seems to
>work.
>
>The problem with a name="" the mouse link pointer is not displayed
>automatically when it hovers over the link. i don't suppose you know
>whether it's possible to make this so ? (using onMouseOver() and calling a
>handy function like setMousePointer() ??).
>
>Thanks again for your help.
>
>Larry
>
>At 16:42 13/02/2003 +0100, you wrote:
>
>>No time to go through all the contents, but (this scroll to top; every
>>time you expando- the content, is happening because of the href = #),
>>using <A name="" ... instead of hyper refference might change a lot, but
>>in any other case, you can overrinde this behavior with
>>[expandColapseobject].scrollintoview command, this will always bring the
>>referenced tag to the view even if it is out of the page margins and the
>>scroll page disabled.
>>
>>I think that the above will solve your problem for good.
>>
>>Cheers
>>
>> >From: Larry Cotton
>> >Reply-To: javascript at LaTech.edu
>> >To: Javascript at LaTech.edu
>> >Subject: [Javascript] Auto scrolling
>> >Date: Thu, 13 Feb 2003 11:19:44 +0000
>> >
>> >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).
>> >
>> >
>> >
>> > Contents
>> > Page Link
>> >
>> >
>> >
>> >
>> >onClick="controlExpand(this,
>>2)"><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>Introduction
>> >
>>
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="color:
>>white; font-size: 20pt;">Five Kingdoms
>> >System
>> >
>>
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="color:
>>white; font-size: 20pt;">Three Domains
>> >System
>> >
>> >
>> >
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/polIntro.htm>>style="font-size:
>>24pt;">Introduction
>> >
>> >href="polIntroWhit.htm" style="font-size: 20pt;">Five Kingdoms
>> >Intro
>> >
>> >href="#" style="font-size: 20pt;">Three Domains Intro
>> >
>> >
>> >
>> >
>> >
>> >onClick="controlExpand(this,
>>1)"><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>Five
>>Kingdoms
>> >
>> >onClick="controlExpand(this, 1)">
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="color:
>> white; font-size: 20pt;">Superkingdom:
>> >Prokarya
>> >
>> >onClick="controlExpand(this, 2)">
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="color:
>> white; font-size: 18pt;">Kingdom: Bacteria
>> >
>> >onClick="controlExpand(this, 1)"> >href="#" style="color: white;
>>font-size: 16pt;">Subkingdom:
>> >Archaea
>> >
>> >onClick="controlExpand(this,
>> >2)">
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="color:
>> white; font-size: 14pt;">Division:
>> >Mendosicutes
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B1
>> >Euryarchaeota
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B2
>> >Crenarchaeota
>> >
>> >onClick="controlExpand(this, 3)"> >href="#" style="color: white;
>>font-size: 16pt;">Subkingdom:
>> >Eubacteria
>> >
>> >onClick="controlExpand(this,
>> >6)">
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="color:
>> white; font-size: 14pt;">Division:
>> >Gracilutes
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B3
>> >Proteobacteria
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B4
>> >Spirochaetae
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B5
>> >Cyanobacteria
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B6
>> >Saprospirae
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B7
>> >Chloroflexa
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B8
>> >Chlorobia
>> >
>> >onClick="controlExpand(this,
>> >1)">
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="color:
>> white; font-size: 14pt;">Division:
>> >Tenericutes
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B9
>> >Aphragmabacteria
>> >
>> >onClick="controlExpand(this,
>> >5)">
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="color:
>> white; font-size: 14pt;">Division:
>> >Fermicutes
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B10
>> >Endospora
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B11
>> >Pirellulae
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B12
>> >Actinobacteria
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B13
>> >Deinococci
>> >
>> >href="#" style="color: white; font-size: 14pt;">Phylum: B14
>> >Thermoatogae
>> >
>> >
>> >
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="font-size:
>>24pt;">Five Kingdoms
>> >
>> >href="#" style="font-size: 20pt;">Superkingdom: Prokarya
>> >
>> <http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>Kingdom:
>>Bacteria
>> >
>>
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="font-size:
>>16pt;">Subkingdom: Archaea
>> >
>>
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="font-size:
>>14pt;">Division: Mendosicutes
>> >
>>
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="font-size:
>>14pt;">Phylum: B1 Euryarchaeota
>> >
>>
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="font-size:
>>14pt;">Phylum: B2 Crenarchaeota
>> >
>>
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="font-size:
>>16pt;">Subkingdom: Eubacteria
>> >
>>
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="font-size:
>>14pt;">Division: Gracilutes
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B3
>> >Proteobacteria
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B4 Spirochaetae
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B5 Cyanobacteria
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B6 Saprospirae
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B7 Tenericutes
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B8 Firmicutes
>> >
>>
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="font-size:
>>14pt;">Division: Tenericutes
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B9
>> >Aphragmabacteria
>> >
>>
>><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>>style="font-size:
>>14pt;">Division: Fermicutes
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B10 Endospora
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B11 Pirellulae
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B12
>> >Actinobacteria
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B13 Deinococci
>> >
>> >href="#" style="font-size: 14pt;">Phylum: B14 Thermoatogae
>> >
>> >
>> >
>> >
>> >
>> >onClick="controlExpand(this,
>>0)"><http://pv1fd.pav1.hotmail.msn.com/cgi-bin/dasp/EN/rte.asp#>Three
>>Domains
>> >
>> >
>> >
>> >
>> >
>> >
>> >
>> >
>> >Javascript :
>> >
>> >function controlExpand(obj, noOfKids)
>> >{
>> > var i = 0;
>> > var idRoot = obj.id;
>> >
>> > for(i=0; 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
>> >
>> >_______________________________________________
>> >Javascript mailing list
>> >Javascript at LaTech.edu
>> >https://lists.LaTech.edu/mailman/listinfo/javascript
>>
>>
>>----------
>>MSN 8 helps <http://g.msn.com/8HMJEN/2743>ELIMINATE E-MAIL VIRUSES. Get 2
>>months FREE*. _______________________________________________ Javascript
>>mailing list Javascript at LaTech.edu
>>https://lists.LaTech.edu/mailman/listinfo/javascript
_________________________________________________________________
MSN 8 helps eliminate e-mail viruses. Get 2 months FREE*.
http://join.msn.com/?page=features/virus
More information about the Javascript
mailing list