more than one vertical scrollbox on a page
1) Script Title: Cross Browser marquee II
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm
3) Describe problem: I would like to use more than one on a page, this page:
http://www.prose-n-poetry.com/author/6438
I've made the javascript & CSS into a php function:
function js_scroll() { ?>
<style type="text/css">
#marqueecontainer{
position: relative;
width: 200px; /*marquee width */
height: 400px; /*marquee height */
overflow: hidden;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
/***********************************************
* 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=2000 //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)) //if scroller hasn't reached the end of its height
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px" //move scroller upwards
else //else, reset to original position
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 //height of marquee content (much of which is hidden from view)
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
</script>
<? } // end of js_scroll()
I call that from another php function:
function do_marquee($title,$height) {
global $VBrowser ;
global $dbname, $link ;
js_scroll() ; ?>
<center><span class="head3"><?php echo $title ?></span></center>
<font size="2">
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<!--<marquee id="recent_topics" behavior="scroll" direction="up" height="<?php echo $height ?>"
scrolldelay="10" scrollamount="2" onMouseOver="this.stop();" onMouseOut="this.start();">-->
<?php if($title == "My Contests") {
my_contests() ;
}elseif($title == "My Awards") {
my_awards() ;
}elseif($title == "My Subscribers") {
my_subscribers() ;
}elseif($title == "I Subscribe To") {
my_subscriptions() ;
}elseif($title == "My Favorite Works") {
my_favorite_works() ;
} ?>
</div>
</div>
<!--</marquee>-->
<?php } // end of do_marquee()
I believe the problem is in <div id="vmarquee" I need to be able to define 5 different <div
The php functions my_contests() ; my_awards() ; etc go to the mySQL database and gather the data to populate the scrollbox.
I was using <marquee> but found onMouseOver="this.stop();" to be erratic.
I've heard some complaints that this is a rather antiquated way to do this so is there a better way to do this?
thanks
bob
CSS Codes
Reply With Quote
Bookmarks