Scroller Box
Display your content with scroll box amazing application for viewing your latest content on front page with scroll effect add as much as much as content in xml file and it will reflect on scroller instantly.
Screenshot
Installation
Extract [scroller.rar] file
After extracting you will get the scroller folder copy the folder to your htdocs folder on your web server
Add the below javascript line in head section
<script type="text/javascript" src="scroller/js/scroller.js"></script>
Scroller.insert({ 'idName':'scroller/xmlFiles/scrollerXML.xml' });
Scroller.insert({idName:xmlPath}); is the object which allow you to put xml contain inside specified id
Example 1 with default style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroller</title>
<script type="text/javascript" src="scroller/js/scroller.js"></script>
<script type="text/javascript">
window.onload = function(){
Scroller.insert({'scroller':'scroller/xmlFiles/scrollerXML.xml'});
}
</script>
</head>
<body>
<div id='scroller'>
<!-- xml contain insert in this block -->
</div>
</body>
</html>
Example 2 with custom style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroller</title>
<script type="text/javascript" src="scroller/js/scroller.js"></script>
<script type="text/javascript">
window.onload = function(){
Scroller.insert({'scroller2':'scroller/xmlFiles/scrollerXML.xml'}, {
'height':'700',
'move':'down',
'box':{
'border':'20px solid #515B5E',
'background':'#6D7E85'
},
'title':{
'background':'#515B5E',
'color':'#DDD',
'fontFamily':'verdana',
'fontSize':'12px'
},
'message':{
'fontFamily':'verdana',
'fontSize':'11px',
'background':'#333',
'color':'#EEE'
}
});
}
</script>
</head>
<body>
<div id='scroller2'>
<!-- xml contain insert in this block -->
</div>
</body>
</html>
Setting And Configuration
{'width':200} -> set the 200 width to scroller
{'height':400} -> set the 400 height to scroller
{'speed': 1} -> set the speed of scrolling
{'move': 'up'} -> this will allow you to set where to move scroller. three option 'up', 'down', 'upDown'
{'box': {'backgroundColor':'red'}} -> you can design the box using box object
{'title': {'backgroundColor':'red'}} -> you can design the title using title object
{'image': {'backgroundColor':'red'}} -> you can design the image using image object
{'message': {'backgroundColor':'red'}} -> you can design the message using message object