Categories:
Partners

Creating a vertical content scroller using DHTML

This tutorial written and contributed by John at Dynamicdrive.com

In this tutorial, I'll show you how to create a vertical content scroller using DHTML. A content scroller is a little different from traditional JavaScript scrollers in that the content to scroll is simply regular HTML on the page. The advantage of this is obvioius- ease of customization, and also, search engine friendly. Below's a demonstration of what I'll be building:

Example:

Dynamic PHP Picture Viewer
This script combines PHP with JavaScript to let you easily display all pictures within a directory without having to input their file names into the script! An external PHP file takes care of all the manual labour, by retrieving the list of images inside the directory and passing it onto the viewer script. Spiffy!

External JavaScript and PHP
External JavaScript can reference not just .js files, but PHP scripts as well. See how this is done, and the wonderful possibilities linking PHP to JavaScript bring.

Changing external style sheets using the DOM
Using the DOM, you can access and manipulate external style sheets on the page, from adding/deleting rules to modifying existing ones. This comprehensive tutorial shows you how.

Comprehensive guide to .htaccess
I've updated this tutorial with two new sections- blocking bad bots and users by referrer.

Applying border & opacity to images onMouseover in CSS
Learn how to spruce up images on your webpage with a border or opacity effect onMouseover, using CSS only.

Changing Select element content on the fly
This tutorial explains how to change a select element's content using JavaScript, from adding new options to modifying and deleting them. It also shows how to create a 2 level interdependent select list.

The HTML

Lets first see the CSS and HTML that make up the foundation of the scroller, before seeing the script itself:

<style type="text/css">

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

</style>

<body>

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<!--YOUR SCROLL CONTENT HERE-->

<h4>Your scroller contents</h4>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>

Here I define an outer DIV (ID="marqueecontainer") and set its position to "relative" inside the CSS. A relative positioned element defines a new coordinates system for anything contained inside, with the upper left corner of the element being (0, 0). This makes it easy to then define an absolutely positioned DIV (ID="vmarquee"), and scroll it upwards relative to the outer DIV.

With the basic framework of the scroller created, lets now see the script that will scroll the DIV (ID="vmarquee") upwards to create a vertical content scroller.

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.