Scripts

Javascript Text Collapse

Door Zero XT -20-10-2009 00:00 -6.626 views

Ik zie een heleboel sites die gewoon wisselt tussen de display none en block eigenschappen waardoor tekst en afbeeldingen uit het niets verschijnen en weer verwijderen. Ik wilde dit oplossen door het langzaam te laten verschijnen of te laten verdwijnen. Met dit eenvoudig stukje JavaScript heb je die mogelijkheid. Je kan ook de snelheid aan passen. Hoe hoger het getal, hoe langzamer het gaat.

Download alle bestanden als ZIP

javascript-text-collapse

uitklap.js:
[code]
var snelheid = 35;
var eindhoogte;
var interval;

function slide(div)
{
	var id = document.getElementById(div);
	id.style.overflow = 'hidden';
	
	if(id.style.display == "none")
	{
		clearInterval(interval);
		id.style.display = 'block';
		eindhoogte = (id.offsetHeight - 5);
		id.style.height = '1px';
		
		interval = setInterval('verhoog(\'' + div + '\');', 0001);
	}
	else
	{
		clearInterval(interval);
		id.style.height = id.offsetHeight + 'px';
		interval = setInterval('verlaag(\'' + div + '\');', 0001);
	}
}

function verhoog(id)
{
	id = document.getElementById(id);
	var px = parseInt(id.style.height);
	
	if(px < eindhoogte)
	{
		id.style.height = px + Math.ceil(eindhoogte / snelheid) + 'px';
	}
	else
	{
		id.style.height = '100%';
		clearInterval(interval);
	}
}

function verlaag(id)
{
	id = document.getElementById(id);
	var hoogte = (parseInt(id.style.height) - Math.ceil(eindhoogte / snelheid));
	
	if(hoogte < 1)
	{
		id.style.display = 'none';
		id.style.height = '100%';
		clearInterval(interval);
	}
	else
	{
		id.style.height = hoogte + 'px';
	}
}
[/code]


html:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript Slider</title>


<script type="text/javascript" src="uitklap.js"></script>
</head>
<body>


<div id="id" style="display:none; border: 1px solid red;">Dit is een test om te kijken of het werkt<br />Testing<br /><br />Still testing..<br /><br /><br /><br />Klaar.</div>

<br /><br />

<a href="#" onclick="slide('id'); return false">Klik</a>

</body>
</html>
[/code]