Icontem

File: example.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Marquee  >  example.html  >  Download  
File: example.html
Role: Example script
Content type: text/plain
Description: Example of vertical and horizontal scrollers
Class: Marquee
Display a marquee that scrolls automatically
Author: By
Last change: credits changed
Date: 8 years ago
Size: 2,051 bytes
 

Contents

Class file image Download
<!--
/*************************************************************
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * Fee free to distribute and modify code, but keep reference to its creator
 *
 * Marquee class can be used to create horizontal or vertical marquee elements in websites
 * This class rotates all provided html elements, so marquee will never be empty
 * Marquee div element can be customized using css styles
 * There are also customizations for rotating speed and separator, etc
 *
 * For more information, examples and online documentation visit: 
 * http://webcodingeasy.com/JS-classes/Javascript-marquee
**************************************************************/
-->
<html>
<head>
<style>
#marqueehor
{
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 60px;
	border: 1px solid black;
}
#marqueehor div
{
	border: 1px solid red;
	padding: 20px;
	height: 60px;
	position: absolute;
	top: 0;
}
#marqueever
{
	position: absolute;
	left:0;
	top: 0;
	border: 1px solid black; 
	width: 100px; 
	height: 100%;
}
#marqueever div
{
	border: 1px solid red;
	padding: 20px;
	width: 60px;
	position: absolute;
	left: 0;
}
.wop
{
	padding: 0;
	margin: 0;
}
</style>
</head>
<body style='text-align: center;'>
<div style='width:1000px; margin: 0 auto 0 auto; height:500px; border: 3px solid black;'>
somecontent
<p>somecontent here</p>
<div> and here </div>
</div>
<div id='marqueehor'>
	<p class='wop'><a href=''>Some text</a></p>
	<p class='wop'><a href=''>More text</a></p>
</div>
<div id='marqueever'>
	<p class='wop'><a href=''>Some text</a></p>
	<p class='wop'><a href=''>More text</a></p>
</div>
<script type="text/javascript" src="./marquee.packed.js" ></script>
<script type="text/javascript">
//create rating instance
//parameter json with configuration values
var horizontal = new marquee("marqueehor").horizontal();
var vertical = new marquee("marqueever").vertical();
</script>
</body>
</html>