Javascript Essentials Part 4

by Hiroshi on November 2nd, 2008

Scrollers (marquee and advanced)

Scroll by an external js file control new

in this example images are in images folder with names product-1.jpg, product-2.jpg, product-3.jpg and in quantity 3. This method will preload images, call them and make them scroll with onmouseover stop event.

Create a folder in root, name it scripts, make a gallery.js file in it and write in that following code.

// preload images
var Gallery = new Array( ); for (var i = 0; i < 3; i++)
{
Gallery[i] = new Image( );
Gallery[i].src = ("images/product-" + (i + 1) + ".jpg");
}
document.write('<marquee style="width:140px; height:380px;" scrollamount="2" scrolldelay="20" direction="up" onmouseover="this.stop( ); return true;" onmouseout="this.start( ); return true;">');
for (var j = 1; j<= 3; j ++)
{
document.write(' <img src="images/product-' + j + '.jpg" width="120" height="120" alt="" title="">');
document.write(' <br><br>');
}
document.write('</marquee>');

Change the blue text according to requirement.

Where you want this scroll to appear , there in page call that js file by doing the following.

<script language="javascript" src="scripts/gallery.js"></script>

This is global method and you can call by this, any set of images in any sequence or direction at any page of the site.

Download Easy JS Scroll

Simple Scroll

Use this marquee for any table or any text with linkage on it and stop and play control.

<MARQUEE onmouseover=this.stop(); onmouseout=this.start(); scrollAmount=1 scrollDelay=5 direction=up width=140 height=100>text or content to be scrolled</MARQUEE>

Continuous Scroll – No breaks between data

This scroll is continuous scroll and does exactly what names is suggesting. If it is vertical and data elements aer 4 then it will add a chain kind of scroll and after 4 element you will see first one appearing and there will be no breaks in scroll. That… :) I love this script. Simple and easy to use, a useful and functional javascript scroll.

Download Continuous Scroll Script

essential, Javascript, most wanted, scripts

Pages: 1 2 3 4 5 6

Author

Hiroshi (published 95 Posts on Web Style Press, Best Practices from all the Web, Build Better Websites)

One Review

gain height says:

December 11, 2009 at 3:49 am

I definitely agree with you concerning this subject. Nice entry. Already bookmarked for future reference.
Reply

Reply