Icontem

File: config_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Marquee  >  config_example.html  >  Download  
File: config_example.html
Role: Example script
Content type: text/plain
Description: Example of configuration options
Class: Marquee
Display a marquee that scrolls automatically
Author: By
Last change: credits changed
Date: 8 years ago
Size: 2,139 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>
body
{
	text-align: center;
}
#container
{
	width:1000px; 
	margin: 0 auto 0 auto; 
	height:500px; 
	border: 3px solid black;
}
#marquee
{
	width: 600px;
	height: 60px;
	border: 1px solid black;
	margin: 0 auto 0 auto;
}
#marquee div
{
	border: 1px solid red;
	padding: 20px;
	height: 60px;
}
.wop
{
	padding: 0;
	margin: 0;
}
</style>
</head>
<body>
<div id='container'>
<div id='marquee'>
	<p class='wop'><a href=''>Some text</a></p>
	<p class='wop'><a href=''>More text</a></p>
	<p class='wop'><a href=''>more more more</a></p>
	<p class='wop'>end even more</p>
</div>
somecontent
<p>somecontent here</p>
<div> and here </div>
</div>
<script type="text/javascript" src="./marquee.packed.js" ></script>
<script type="text/javascript">
//create instance and call method horizontal for horizontal scrolling
var horizontal = new marquee("marquee").horizontal(
	{
		step:1, //how many pixels to move per interval (default: 1)
		interval: 15, //how often to move pixels in miliseconds (default: 10)
		stop_on_hover: false, //should marquee stop on mouse hover (default: true)
		backwards: true, //rotate elements in opposite direction (default: false)
		separator: "<img src='./sep.png' height='9px' width='9px' border='0'/>" 
		//separator to insert between html nodes (default: "")
	});
</script>
</body>
</html>