|
The Best Surf, Skate and MX Clothing! 
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Brian Huisman | http://www.greywyvern.com/ */
/* ********************************************************************
* HTML Block Scroller & Marquee JavaScript - v2.0
* - Copyright 2008 - Licenced for free distribution under the BSDL
* - http://www.opensource.org/licenses/bsd-license.php
*
* Have one or more scrolling blocks of HTML anywhere on your webpages.
* The scroller will even pause on mouseover and resume on mouseout.
*
* Version 2.0
* - Uses DOM-only methods (compatible with application/xhtml+xml)
* - Blocks are created in the HTML page, rather than as JS variables
* - Automatic startup on page load
***********************************************************************
*** Instructions ******************************************************
***********************************************************************
* 1. Create the container for the scroller in the body of your HTML:
*
*
*
* Where "scr1" is any name you choose. You don't have to use a
* either. You may use any block level element that can be pixel
* resized; such as a element to which the display:block; CSS
* property has been applied.
*
***********************************************************************
* 2. Fill the scroller container with child blocks:
*
*
*
* The contents of this block will be displayed if the browser does
* not support the scroller.
* It will be overwritten if the scroller is supported.
*
* Block 2
* Block 3
*
* ...
*
*
*
* Assign the class "default" to the first block, the one which you
* would like displayed if javascript is disabled.
*
***********************************************************************
* 3. Add the following rule(s) to your CSS stylesheet:
*
* #scr1 div {
* visibility:hidden;
* }
* #scr1, #scr1 div.default {
* width:160px;
* height:120px;
* overflow:hidden;
* visibility:visible;
* }
* #scr1 table tr td div {
* visibility:visible;
* }
*
* Change both "scr1" to the id you gave to the scroller container. The
* width and height properties should match those you will use in step 4.
*
* To further style the scroller container, assign CSS properties to the
* scroller target id:
*
* #scr1 {
* background-color:#f6f6f6;
* margin:0px auto;
* }
*
* The script will replace each block you add to the container with a
* single-celled . So to style the blocks of your scroller, you
* can style these table cells as if they were actually part of your
* document source:
*
* #scr1 table tr td {
* padding:10px;
* color:#ff0000;
* text-align:center;
* vertical-align:middle;
* }
*
***********************************************************************
* 4. Create a new scrollObject:
*
* new scrollObject("scr1", 120, 120, "up", 5000, 1.4);
*
* The arguments for this object are as follows:
* a. - ID of the target tag (from step 1)
* b. - Width (in pixels) of your scroller
* c. - Height (in pixels) of your scroller
* d. - Scroll direction: one of "up", "down", "left" or "right"
* e. - Amount of time to pause before next scroll begins (ms)
* f. - Slide-in speed of your scroller (1.001 up to width or height)
*
***********************************************************************
*** To add more scrollers to the same page: ***************************
***********************************************************************
* 1. Create additional containers - with different ID's - and blocks in
* the body of your HTML
*
*
* HTML is allowed too!
*
*
* As long as it fits within the dimensions above
*
* Block 1
* Block 2
* Block 3
* Block 4
* |
