Scroll down content script

Put this into your <HEAD> section

	<style type="text/css">
	/* Start of css that is not needed for the script */
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		margin-top:0px;
		background-image:url('../../images/heading3.gif');
		background-repeat:no-repeat;
		padding-top:100px;
	}
	p{
		margin-top:0px;
	}
	a{
		color:#660000;
		text-decoration:none;

	}	
	/* End of css that is not needed for the script */
	
	/* Don't delete anything below here */
	.dhtmlgoodies_contentBox{
		border:1px solid #317082;
		height:0px;
		visibility:hidden;
		position:absolute;
		background-color:#E2EBED;
		overflow:hidden;
		padding:2px;
		width:250px;
				
	}
	.dhtmlgoodies_content{
		position:relative;		
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		width:100%;
		font-size:0.8em;
		
	}


	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, September 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	See http://www.dhtmlgoodies.com/index.html?page=termsOfUse
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/		
	
	var slideDownInitHeight = new Array();
	var slidedown_direction = new Array();

	var slidedownActive = false;
	var contentHeight = false;
	var slidedownSpeed = 3; 	// Higher value = faster script
	var slidedownTimer = 7;	// Lower value = faster script
	function slidedown_showHide(boxId)
	{
		if(!slidedown_direction[boxId])slidedown_direction[boxId] = 1;
		if(!slideDownInitHeight[boxId])slideDownInitHeight[boxId] = 0;
		
		if(slideDownInitHeight[boxId]==0)slidedown_direction[boxId]=slidedownSpeed; else slidedown_direction[boxId] = slidedownSpeed*-1;
		
		slidedownContentBox = document.getElementById(boxId);
		var subDivs = slidedownContentBox.getElementsByTagName('DIV');
		for(var no=0;no<subDivs.length;no++){
			if(subDivs[no].className=='dhtmlgoodies_content')slidedownContent = subDivs[no];	
		}

		contentHeight = slidedownContent.offsetHeight;
	
		slidedownContentBox.style.visibility='visible';
		slidedownActive = true;
		slidedown_showHide_start(slidedownContentBox,slidedownContent);
	}
	function slidedown_showHide_start(slidedownContentBox,slidedownContent)
	{

		if(!slidedownActive)return;
		slideDownInitHeight[slidedownContentBox.id] = slideDownInitHeight[slidedownContentBox.id]/1 + slidedown_direction[slidedownContentBox.id];
		if(slideDownInitHeight[slidedownContentBox.id] <= 0){
			slidedownActive = false;	
			slidedownContentBox.style.visibility='hidden';
			slideDownInitHeight[slidedownContentBox.id] = 0;
		}
		if(slideDownInitHeight[slidedownContentBox.id]>contentHeight){
			slidedownActive = false;	
		}
		slidedownContentBox.style.height = slideDownInitHeight[slidedownContentBox.id] + 'px';
		slidedownContent.style.top = slideDownInitHeight[slidedownContentBox.id] - contentHeight + 'px';

		setTimeout('slidedown_showHide_start(document.getElementById("' + slidedownContentBox.id + '"),document.getElementById("' + slidedownContent.id + '"))',slidedownTimer);	// Choose a lower value than 10 to make the script move faster
	}
	
	function setSlideDownSpeed(newSpeed)
	{
		slidedownSpeed = newSpeed;
		
	}
	</script>

Put this into your <BODY> section

Put the code in the textarea below where you want the pulldown to appear.

<div>
	<div id="dhtmlgoodies_control"><a href="#" onclick="slidedown_showHide('box1');return false;">Try it</a></div>
	<div class="dhtmlgoodies_contentBox" id="box1">
		<div class="dhtmlgoodies_content" id="subBox1">
			<!-- slide down content goes here -->
			This is the content we want to show<br>
			This is the content we want to show<br>
			This is the content we want to show<br>
			This is the content we want to show<br>
			This is the content we want to show<br>
			This is the content we want to show
			<!-- End slide down content -->
		</div>
	</div>
</div>
<div>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
Other content<br>
<div>
	<div id="dhtmlgoodies_control"><a href="#" onclick="slidedown_showHide('box2');return false;">Try another box</a></div>
	<div class="dhtmlgoodies_contentBox" id="box2">
		<div class="dhtmlgoodies_content" id="subBox2">
			<!-- slide down content goes here -->
			This is the content of another box<br>
			This is the content of another box<br>
			This is the content of another box<br>
	
			<!-- End slide down content -->
		</div>
	</div>
</div>
<script type="text/javascript">
setSlideDownSpeed(4);
</script>

Implementation

Content

Put the slide down content right below the line  in the code

This is the typical code used to show the content:

"box1" is the id of the slide down box.

Configuration

This javascript function is optional. Use it to modify the animation speed.:

setSlideDownSpeed(newSpeed) - Set slide down speed

The speed and width could also be adjusted manually in the javascript and css code if you don't want to use the javascript functions.

By modifying the cascading style sheet(CSS) of the .dhtmlgoodies_contentBox, you can change the appearance of the slide down content.

border:1px solid #317082; /* Border color and style */
background-color:#E2EBED; /* Background color */

For further information, see how these functions and CSS are used in the code.

Update log

December, 13th, 2006 - Supporting more than one box per page

Comments

Post your comment

Please wait...

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.