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):
—————————————————————————————————————
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
/*********************************************** * 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
Modify your file: templates/your template/boxes/best_sellers_scroll.php
$info_box_contents[] = array('align' => 'center', 'text' => ''); new $infobox_template($info_box_contents, true, true, $column_location);' . $bestsellers_list . '
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; }