Scrolling & Expanding List

Steve Chipman Aug 29, 2008

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://www.javascriptsource.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

Leave a Response

(3 comments)

I like how you do things guys. continue the great work.

Ariza Aug 29, 2008

This article is really useful and its a very simple code to understand

yogendra Aug 29, 2008

This is an awesome script! It is very easy to put in my code, and it works like a pro! Great Job!

-- Aug 29, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details