Miscellaneous : Scrolling & Expanding List / The JavaScript Source

General

This list scrolls within a DIV, and also fully expands. East to implement. Can be used in many different ways.

View the script demo here.

Notes

Created by: Steve Chipman
Web Site: http://slayeroffice.com/
Posted: August 29, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: scrollExpand.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Steve Chipman | http://slayeroffice.com/ */

/********************************

	Scrolling/Expanding List
	Version 1.0
	last revision: 04.26.2004
	steve@slayeroffice.com

	http://slayeroffice.com/code/scroll_menu/

	Please notify me of any improvments you make on this
	code so that I can update the version hosted on
	slayeroffice

	please leave this notice intact.

********************************/

window.onload=init;

var d=document;
var expander; 			// object reference for the plus/minus div
var lContainer; 			// object reference for the UL

var currentTop=0;			// the current Y position of the UL
var zInterval = null;		// animation thread interval
var direction;			// direction we're scrolling the UL. 0==up, 1==down
var startTop=0;			// the starting top of the UL

var scrollRate=6;			// initial rate of scrolling
var scrollTick=0;			// keeps track of long we've scrolled so we can slow it down accordingly

var listExpand=true;		// boolean to tell us if we're expanding or contracting the list
var listHeight=60;			// the current height of the UL
var isExpanded=false;		// boolean to denote if the list is expanded or not. initiliazed to true as it will be set to false as soon as the expand control is clicked.

var MAX_SCROLL_TICK=4;		// the maximum value of scrollTick before it's reset
var LI_PADDING=2;		// the LI's padding value. used to compensate for overall dimensions
var LI_HEIGHT=10;		// the height of the LI
var MAX_LIST_HEIGHT=300;		// maximum height of the list when fully expanded
var MIN_LIST_HEIGHT=60;		// contracted height of the list
var REBOUND = -4;		// the value of scrollRate when we stop scrolling
var FAST_EXPAND=5;		// the initial rate of list expansion
var SLOW_EXPAND=1;		// the end rate of expansion
var SPEED_TRANSITION=20;	// when this value + the MAX or MIN list height is reached, we set scrollRate to its slower rate

function init() {
	if(!d.getElementById)return; // bail out if this is an older browser

	up=d.getElementById("upArrow");
	down=d.getElementById("downArrow");

	// apply onclick behaviors to the up arrow, down arrow and expansion control elements
	down.onclick=function(){scrollObjects(0);}
	up.onclick=function(){scrollObjects(1);}
	expander=d.getElementById("changeSize");
	expander.onclick=function(){if(!isExpanded)isExpanded=true;changeListSize(); }

	lContainer = d.getElementById("listContainer");

	d.getElementById("nContainer").style.height=MIN_LIST_HEIGHT+"px";
}

function scrollObjects(dir) {
	if(zInterval)return; // already scrolling.
	if(isExpanded)return; // list is expanded. no need to scroll.
	if((!dir && currentTop<=-240) || (dir && currentTop==0))return; // dont scroll up if we're at the top or down if at the bottom of the list
	direction=dir;
	zInterval=setInterval("animate()",20);
}

function animate() {
	// increment or decrement currentTop based on direction
	if(!direction) {
		currentTop-=scrollRate;
	} else {
		currentTop+=scrollRate;
	}
	scrollTick++;
	if(scrollTick>=MAX_SCROLL_TICK) {
		scrollRate--; // slow the scroll rate down for a little style
		scrollTick=0;
	}

	lContainer.style.top=currentTop+"px";
	if(scrollRate<=REBOUND) {
		// scroll is finished. clear the interval and reset vars for the next scroll
		clearInterval(zInterval);
		zInterval=null;
		startTop=currentTop;
		scrollTick=0;
		scrollRate=6;
	}
}

function changeListSize() {
	listExpand=listExpand?false:true;
	clearInterval(zInterval);
	zInterval=setInterval("expandList()",20);
}

function expandList() {
	//if(zInterval)return; // already expanding or contracting.
	if(!listExpand) {
		if(listHeight<MAX_LIST_HEIGHT-SPEED_TRANSITION) {
			listHeight+=FAST_EXPAND;
		} else {
			listHeight+=SLOW_EXPAND;
		}
		if(currentTop<0) {
			currentTop+=3;
			lContainer.style.top=currentTop+"px";
		}
		if(listHeight<MAX_LIST_HEIGHT)document.getElementById("nContainer").style.height=listHeight+"px";

		if(listHeight>=MAX_LIST_HEIGHT && currentTop>=0) {
			clearInterval(zInterval);
			zInterval=null;
			expander.style.backgroundImage="url(minus.gif)";
			currentTop=0;
			isExpanded=true;
		}
	} else {
		if(listHeight>MIN_LIST_HEIGHT+SPEED_TRANSITION) {
			listHeight-=FAST_EXPAND;
		} else {
			listHeight-=SLOW_EXPAND;
		}
		document.getElementById("nContainer").style.height=listHeight+"px";
		if(listHeight<=MIN_LIST_HEIGHT) {
			clearInterval(zInterval);
			zInterval=null;
			expander.style.backgroundImage="url(plus.gif)";
			isExpanded=false;
		}
	}
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#mContainer {
	position:relative;
	width:100px;
	height:auto;
	margin:auto;
	border:2px solid #000;
	overflow:hidden;
}

#nContainer {
	position:relative;
	overflow:hidden;
	width:100px;
	border-style:none;
	background:#D8D8D8;
}

#listContainer {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	width:100px;
	padding:0px;
	margin:0px;
}

#listContainer li {
	position:relative;
	display:block;
	border-style:none;
	width:100px;
	height:10px;
	padding:2px;
	font:9px verdana;
	cursor:pointer;
	margin:0px;
	color:#638DA1;
	background-color:#D8D8D8;
	line-height:10px;
}

#listContainer>li {
	border-top:1px solid #311DF2; /* #638DA1; */
}

#listContainer li:hover {
	color:#000;
}

#upArrow,#downArrow {
	width:100px;
	height:10px;
	font:9px verdana;;
	text-align:center;
	color:#FFF;
	cursor:pointer;
}

#upArrow {
	background:#311DF2 url(up.gif) no-repeat center center;
}

#downArrow {
	background:#311DF2 url(down.gif) no-repeat center center;
}

#changeSize {
	width:10px;
	height:10px;
	position:relative;
	float:right;
	background:#311DF2 url(plus.gif) no-repeat center center;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="scrollExpand.js"></script>

Body

Paste this code into the BODY section of your HTML document


<p>
Click the up and down arrows to scroll the list. Click the "+" icon in the lower right corner to expand the list to it's full height. Click the "-" icon to contract the list again.</p>

<div id="mContainer">
	<div id="upArrow"></div>
	<div id="nContainer">
		<ul id="listContainer">
			<li>List Item 1</li>
			<li>List Item 2</li>
			<li>List Item 3</li>
			<li>List Item 4</li>
			<li>List Item 5</li>
			<li>List Item 6</li>
			<li>List Item 7</li>
			<li>List Item 8</li>
			<li>List Item 9</li>
			<li>List Item 10</li>
			<li>List Item 11</li>
			<li>List Item 12</li>
			<li>List Item 13</li>
			<li>List Item 14</li>
			<li>List Item 15</li>
			<li>List Item 16</li>
			<li>List Item 17</li>
			<li>List Item 18</li>
			<li>List Item 19</li>
			<li>List Item 20</li>
		</ul>
	</div>
	<div id="downArrow">
		<div id="changeSize"></div>
	</div>
</div>

Other

Download the images using the URL below:

Download the images here

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

3. From: yogendra
08/30/2008 00:20:04

2. From: --
08/29/2008 16:56:32

1. From: Ariza
This Company is very nice.
08/29/2008 15:08:39

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

3. From: yogendra08/30/2008 00:20:04

2. From: --08/29/2008 16:56:32

1. From: ArizaThis Company is very nice.08/29/2008 15:08:39

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

3. From: yogendra
08/30/2008 00:20:04

2. From: --
08/29/2008 16:56:32

1. From: Ariza
This Company is very nice.
08/29/2008 15:08:39