free smooth javascript scroller for the bestsellers scroll infobox

The HTML ‘marquee’ tag is used to make the product images scroll vertically in the bestsellers_scroll infobox. It works, but creates a choppy display (as this horizontal example of the tag shows):

Hello! This is an example of a horizontal marquee plus image marquee scroll effect using wordpress icon

—————————————————————————————————————

The following code is for a vertical scroll effect that is much smoother. There are some user editable settings in the jscript file defining delay, speed and mouse over actions. Colours are set in the #marqueecontainer css script.

This is a fairly easy mod to do – 1 new file, 3 small modifications to existing files.

Create this new file from the code below: /includes/javascript/marquee.js

<?php
/*
  $Id: marquee.js
*/
?>
/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee

Add this line into: /templates/your template/mainpage.tpl.php

<script type="text/javascript" src="<?php echo DIR_WS_JAVASCRIPT;?>marquee.js"></script>
</head>

Modify your file: templates/your template/boxes/best_sellers_scroll.php

$info_box_contents[] = array('align' => 'center',
                             'text' => '<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"><div id="vmarquee" style="position: absolute; width: 98%;">' . $bestsellers_list . '</div></div>');
      new $infobox_template($info_box_contents, true, true, $column_location);

Add this at the end of the file: template/your template/stylesheet.css

#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 100px; /*marquee height */
background-color: white;
overflow: hidden;
border: 1px solid orange;
padding: 2px;
padding-left: 4px;
}