Store
Community Documentation

v3 Knowledgebase

Scrolling Block with a Background image

Make a scroller which supports a background image for your site. You can place any text or link in the scroller that you want. This scroller also has mouse over phase and easy to install in a block.
You can customize the CSS in the htm file. The Font color on the scroller can be changed to meet your needs. The scroller can also be adjusted in size.
You can place it in any block on your site. This scroller runs smooth, is clean looking and easy to setup.First:Make a htm file using the Code below.
<html><head>

<title>My Scroller</title>



<style type="text/css">
<!--
BODY         { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }


 /* FONT COLORS */


TABLE        { COLOR: #FFFFFF; FONT: 11px arial, sans-serif; font-weight: normal }

.title        { COLOR: #0033FF; FONT: 12px arial, sans-serif; font-weight: bold; }

#NewsDiv    { position: absolute; left: 0; top: 0; width: 100% }

 /* PAGE LINK COLORS */

a:link        { color: #0033FF; text-decoration: underline; }

a:visited    { color: #6633FF; text-decoration: underline; }

a:active    { color: #0033FF; text-decoration: underline; }

a:hover        { color: #6699FF; text-decoration: none; }

-->
</style>



</head>

<BODY background="[COLOR=Red]scroller_bg1.jpg[/COLOR]" behavior="fixed" TEXT="#FFFFFF" onMouseover="scrollspeed=0" onMouseout="scrollspeed=current" OnLoad="NewsScrollStart();">

<div id="NewsDiv">
<table cellpadding="5" cellspacing="0" border="0" width="100%"><tr><td>






<!-- SCROLLER CONTENT STARTS HERE -->


<span class="title">
[COLOR=red]Title[/COLOR]<br>
</span>
[COLOR=red]Your Text Here.[/COLOR]

<br><br><br>



<span class="title">
[COLOR=red]Title[/COLOR]<br>
</span>
[COLOR=red]Your Text Here.[/COLOR]

<br><br><br>





<span class="title">
[COLOR=red]Title[/COLOR]<br>
</span>
[COLOR=red]Your Text Here.[/COLOR]

<br><br><br>



<span class="title">
[COLOR=red]Title[/COLOR]<br>
</span>
[COLOR=red]Your Text Here.[/COLOR]

<br><br><br>




<span class="title">
[COLOR=red]Title[/COLOR]<br>
</span>
[COLOR=red]Your Text Here.[/COLOR]


<br><br><br>


<span class="title">
[COLOR=red]Title[/COLOR]<br>
</span>
[COLOR=red]Your Text Here.  <a href="http://www.yoursite.com/" target="_top">Your Text Here.</[/COLOR]a>



<br><br><br>




<!-- SCROLLER CONTENT ENDS HERE -->






</td></tr></table>
</div>




<!-- YOU DO NOT NEED TO EDIT BELOW THIS LINE -->




<script language="JavaScript" type="text/javascript">
<!-- HIDE CODE

var scrollspeed        = "1"        // SET SCROLLER SPEED 1 = SLOWEST
var speedjump        = "30"        // ADJUST SCROLL JUMPING = RANGE 20 TO 40
var startdelay         = "2"         // START SCROLLING DELAY IN SECONDS
var nextdelay        = "0"         // SECOND SCROLL DELAY IN SECONDS 0 = QUICKEST
var topspace        = "2px"        // TOP SPACING FIRST TIME SCROLLING
var frameheight    = "200px"    // IF YOU RESIZE THE WINDOW EDIT THIS HEIGHT TO MATCH



current = (scrollspeed)


function HeightData(){
AreaHeight=dataobj.offsetHeight
if (AreaHeight==0){
setTimeout("HeightData()",( startdelay * 1000 ))
}
else {
ScrollNewsDiv()
}}

function NewsScrollStart(){
dataobj=document.all? document.all.NewsDiv : document.getElementById("NewsDiv")
dataobj.style.top=topspace
setTimeout("HeightData()",( startdelay * 1000 ))
}

function ScrollNewsDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-(scrollspeed)
if (parseInt(dataobj.style.top)<AreaHeight*(-1)) {
dataobj.style.top=frameheight
setTimeout("ScrollNewsDiv()",( nextdelay * 1000 ))
}
else {
setTimeout("ScrollNewsDiv()",speedjump)
}}



// END HIDE CODE -->
</script>


</body>
</html>

Next:
Make a new Folder in your Root Directory and upload the htm file and if you want to use a backgound image upload this image into this Folder also.NOTE:
You can edit the css to match your site. You can add or delete the

Title


Your Text Here.



marked in RED as you need. Hyper links can be placed into this script as the example below.
DO NOT edit the javacript in the htm file unless you are comfortable with javascript code.With that done you will now need to add a new block.Go to your adminCP >> CMS >> Add New BlockBlock Details:
Product: phpFox
Module: Core
Title: Your Block Name
Controller: --core.index-visitor
Placement: Choose a Block PHP/HTML Code:
<script type="text/javascript">//specify path to your external page:
var iframesrc="yourfolder/your htm file name.htm"//You may change most attributes of iframe tag below, such as width and height:
document.write('<iframe id="datamain" src="'+iframesrc+'" width="250px" height="250px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"></iframe>')</script>
That's it your finished.You can see a working demo of this scroller at http://www.zuitty.com

Have fun and enjoy smile
____________________