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.
- Tutorial Introduction
- Vertical Content Scroller script