|
|
|
|
Like this code?
Show the author your appreciation.
|
|
| |
A background image scroller in Javascript. The background of the image scrolls like a marquee. The direction of scrolling and the speed of scrolling can be set. More than one scrollers are prossible with different direction of scrolling and speed.
Examples are provided in the HTML file.
|
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> Scrolling Background </title>
<script>
<!--
var DefScrollSpeed = 10;
var DefScrollDirection = 'horizontal'; // (horizontal, vertical)
function BGScroller(ID, SD, SS, BG)
{
Elem = GetElem(ID);
if(!Elem)
{
return false;
}
else
{
if(BG)
{
Elem.style.backgroundImage = 'url("' + BG + '")';
}
SS = SS ? SS : DefScrollSpeed;
SD = SD ? SD : DefScrollDirection;
BGScroll(ID, SD, SS, 0);
}
}
function BGScroll(ID, SD, SS, Pos)
{
Elem = GetElem(ID);
Elem.style.backgroundPosition = (SD == 'horizontal') ? Pos++ : '0 ' + Pos++;
window.setTimeout('BGScroll("' + ID + '", "' + SD + '", ' + SS + ', ' + Pos + ' )', SS);
}
function BGScrollerInit()
{
// Creating background scroller
// Parameters are
// 1. Element Id
// 2. Scrolling Direction (horizontal, vertical)
// 3. Scrolling Delay (Smaller means faster)
// 4. Background Image
// Except (1) all other parameters are optional
BGScroller("Elem1", "vertical");
BGScroller("Elem2");
BGScroller("Elem3", "vertical");
BGScroller("Elem4", 'horizontal', 30, 'scrolling_horizontal.gif');
}
function GetElem(ID)
{
return document.all ? document.all[ID] : (document.getElementById(ID) ? document.getElementById(ID) : false);
}
//-->
</script>
<style type="text/css">
<!--
body{background:#F2F2F2;}
.tblScrolling{width:500px;height:500px;border:1px #C0C0C0 solid;font:bold 12px Arial;color:#333333;}
.tblScrolling td{vertical-align:middle;text-align:center;width:50%;height:50%;}
//-->
</style>
</head>
<body onLoad="BGScrollerInit()">
<table style="width:100%;height:100%;">
<tr><td>
<center><table cellspacing="0" class="tblScrolling">
<tr>
<td id="Elem1" style="background-image:url('scrolling_vertical.gif');">First Cell</td>
<td id="Elem2" style="background-image:url('scrolling_horizontal.gif');">Second Cell</td>
</tr>
<tr>
<td id="Elem3" style="background-image:url('scrolling_vertical.gif');">Third Cell</td>
<td id="Elem4" style="background-image:url('scrolling_horizontal.gif');">Fourth Cell</td>
</tr>
</table></center>
</td>
</tr>
</table>
</body>
</html> | |
|
|
| Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | Changing the Style of form objects using the JavaScript OnClick method.
Categories : Java Script, Form Processing, Beginner Guides, CSS | | | CSS Container BOX , with cool CSS Design
Categories : CSS, HTML, Web Design | | | An example of how to place elements on the footer of a page with CSS/HTML so that the elements are always on the bottom, regardless of the client resolution.
Categories : HTML, CSS, Interfaces | | | CSS Buttons Styles
Categories : CSS, HTML, Beginner Guides | | | How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML | | | Javascript linked dropdowns
Categories : Java Script, HTML, Classes and Objects | | | Bouncing Marquee at Status Bar
Categories : Java Script, HTML, Browsers | | | How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides | | | Prevent Right Mouse steal your graphics
Categories : HTML, Java Script, Security | | | Check if Javascript is Enabled or Disabled - Works in all Browsers
Categories : Java Script, HTML, Web Browsers | |
|
|
