Website - fleXcroll: Maak een schuifbalk op maat


Het komt wel eens voor dat in verband met een ontwerp je eigenlijk graag een op maat gemaakte schuifbalk zou willen toepassen met daarbij een eigen afbeelding. Nu is het opmaken van de standaard schuifbalk van de browser zeer beperkt maar er zijn oplossingen waaronder in de vorm van het script genaamd fleXcroll.

Met dit script kun je relatief eenvoudig een eigen schuifbalk maken die je toepast op een bepaald element zoals een div. Zodoende maak je een schuifbalk met een eigen afbeelding of alleen een achtergrondkleur. Er kan zowel een verticale als een horizontale schuifbalk gemaakt worden, een voorbeeldje zie je hieronder met een oranje schuifbalk.

Gebruiken

Om te beginnen download het script via de onderstaande link.

Het script bestaat uit een Javascript bestand en een CSS bestand. Plaats in de <head> van de website verwijzingen naar deze bestanden.

<link type="text/css" rel="stylesheet" href="flexcrollstyles.css" />
<script type="text/javascript" src="flexcroll.js"></script>


Daarna moet het element dat een schuifbalk moet krijgen hierop ingesteld worden. Dit doe je door het element de classnaam 'flexcroll' te geven.

<div id="example" class="flexcroll">Lorem Ipsum</div>


Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel libero. Phasellus convallis, dolor in bibendum ultrices, pede leo pellentesque enim, vel elementum felis pede vitae lectus. Fusce arcu lectus, congue ut, volutpat a, feugiat eget, sem. Etiam ac neque et sem pharetra sollicitudin. Nulla vel arcu a nunc vulputate ullamcorper. Maecenas sollicitudin metus id nisl. Maecenas sit amet mauris. Praesent suscipit. Etiam placerat, arcu nec consequat imperdiet, felis orci venenatis odio, eu volutpat erat lacus non enim. Quisque quis odio in dolor commodo pellentesque.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel libero. Phasellus convallis, dolor in bibendum ultrices, pede leo pellentesque enim, vel elementum felis pede vitae lectus. Fusce arcu lectus, congue ut, volutpat a, feugiat eget, sem. Etiam ac neque et sem pharetra sollicitudin. Nulla vel arcu a nunc vulputate ullamcorper. Maecenas sollicitudin metus id nisl. Maecenas sit amet mauris. Praesent suscipit. Etiam placerat, arcu nec consequat imperdiet, felis orci venenatis odio, eu volutpat erat lacus non enim. Quisque quis odio in dolor commodo pellentesque.