more than one vertical scrollbox on a page [Archive]

View Full Version : more than one vertical scrollbox on a page

Usagi

04-04-2014, 02:21 AM

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%;">



<?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>


<?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

vwphillips

04-04-2014, 11:36 AM

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

.marquee{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color: white;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

</style>

<script type="text/javascript">
/*<![CDATA[*/

function zxcMarquee(id,spd,c){
var spd=typeof(spd)=='number'?spd:0,m=document.getElementById(id),o=zxcMarquee['zxc'+id],s=m?m.getElementsByTagName('DIV')[0]:null;
if (s&&!o){
m.style.overflow='hidden';
s.style.position='absolute';
s.style.top=s.style.left='0px';
zxcMarquee['zxc'+id]=o={
mh:m.offsetHeight,
sh:s.offsetHeight,
c:false,
p:0,
spd:spd
}
if (c){
o.c=s.cloneNode(true);
o.c.style.top=o.sh*(spd>0?-1:1)+'px';
s.appendChild(o.c);
}
}
if (o&&spd!=0){
clearTimeout(o.to);
spd<0!=o.spd<0&&o.c?o.c.style.top=o.sh*(spd>0?-1:1)+'px':null;
o.p+=spd;
o.p+=(o.c?spd<0&&o.p<-o.sh?o.sh:spd>0&&o.p>o.mh?-o.sh:0:spd<0&&o.p<-o.sh?o.sh+o.mh:spd>0&&o.p>o.mh?-(o.sh+o.mh):0);
s.style.top=o.p+'px';
o.spd=spd;
o.to=setTimeout(function(){ zxcMarquee(id,spd); },50);
}

}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){

zxcMarquee('marquee1',-4,true);
zxcMarquee('marquee2',2);
zxcMarquee('marquee3',-2);
zxcMarquee('marquee4',4,true);

}

if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}

/*]]>*/
</script>

</head>

<body>

<div id="marquee1" class="marquee" onmouseover="zxcMarquee('marquee1',0);" onmouseout="zxcMarquee('marquee1',-4);">
<div style="position: absolute; width: 98%;">



<h4>Your scroller contents</h4>
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />


</div>
</div>

<div id="marquee2" class="marquee" onmouseover="zxcMarquee('marquee2',0);" onmouseout="zxcMarquee('marquee2',2);">
<div style="position: absolute; width: 98%;">



<h4>Your scroller contents</h4>
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />


</div>
</div>

<div id="marquee3" class="marquee" onmouseover="zxcMarquee('marquee3',0);" onmouseout="zxcMarquee('marquee3',-2);">
<div style="position: absolute; width: 98%;">



<h4>Your scroller contents</h4>
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />


</div>
</div>

<div id="marquee4" class="marquee" onmouseover="zxcMarquee('marquee4',0);" onmouseout="zxcMarquee('marquee4',3);">
<div style="position: absolute; width: 98%;">



<h4>Your scroller contents</h4>
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />


</div>
</div>

</body>

</html>

vwphillips

04-04-2014, 01:54 PM

with vertical or horizontal scroll +continious scroll

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">

.marquee {
position:absolute;top:20px;background-color:white;border: 1px solid orange;
width: 100px; /*marquee width */
height: 100px; /*marquee height */
}

.marquee IMG{
width:100px;height:100px;float:left;margin-Left:0px;
}

</style>

<script type="text/javascript">
/*<![CDATA[*/

function zxcMarquee(id,spd,c,m){
var spd=typeof(spd)=='number'?spd:0,p=document.getElementById(id),o=zxcMarquee['zxc'+id],s=p?p.getElementsByTagName('DIV')[0]:null,l,t,z0=0;
if (s&&!o){
m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='H'?'H':'V';
if (m=='H'){
s.style.width='30000px';
l=s.lastChild;
l=l.nodeType==3?l.previousSibling:l;
t=l.getElementsByTagName('*')[0];
l=t&&t.offsetLeft>l.offsetLeft?t:l;
}
p.style.overflow='hidden';
s.style.position='absolute';
zxcMarquee['zxc'+id]=o={
id:id,
m:[s,m=='V'?'top':'left',0],
psz:m=='V'?p.offsetHeight:p.offsetWidth,
ssz:m=='V'?s.offsetHeight:l.offsetLeft+l.offsetWidth,
c:false
}
s.style[o.m[1]]='0px';
m=='H'?s.style.width=o.ssz+5+'px':null;
if (c){
c=s.cloneNode(true);
c.style[m=='V'?'left':'top']='0px';
o.c=c.cloneNode(true);
for (;z0<Math.floor(o.psz/o.ssz);z0++){
c=c.cloneNode(true);
c.style[o.m[1]]=o.ssz*(z0+1)+'px';
o.c.appendChild(c);
}
o.c.style[o.m[1]]=o.ssz+'px';
s.appendChild(o.c);
}
}
if (o){
clearTimeout(o.m[4]);
o.spd=spd;
t=spd<0?-o.ssz:o.c?0:o.psz;
spd!=0?this.animate(o,o.m,o.m[2],t,new Date(),Math.abs(spd*1000*(t-o.m[2])/(o.ssz+(o.c?0:o.psz)))):null;
}
}

function animate(o,a,f,t,srt,mS){
clearTimeout(a[4]);
var ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[2]=n;
a[0].style[a[1]]=n+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ animate(o,a,f,t,srt,mS); },10);
}
else {
a[2]=o.spd>0?-o.ssz:o.c?0:o.psz;
a[0].style[a[1]]=a[2]+'px';
zxcMarquee(o.id,o.spd);
}
}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function Init(){
// parameter 0 = the parent DIV ID name (string)
// parameter 1 = (optional) the initial speed. (number, default = 0)
// parameter 2 = (optional) true = continious scroll. (boolean, default = false = single scroll)
// parameter 3 = (optional) 'H' = horizontal scroll. (string, default = 'V' = vertical scroll)
zxcMarquee('marquee1',7,true);
zxcMarquee('marquee2',4);
zxcMarquee('marquee3',-4);
zxcMarquee('marquee4',-4,true);
zxcMarquee('marquee5',3,true,'h');
zxcMarquee('marquee6',-3,false,'h');

}

if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}

/*]]>*/
</script>

</head>

<body>

<div id="marquee1" class="marquee" onmouseover="zxcMarquee('marquee1',0);" onmouseout="zxcMarquee('marquee1',7);" style="left:100px;height:320px;" >
<div>
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
</div>
</div>

<div id="marquee2" class="marquee" onmouseover="zxcMarquee('marquee2',0);" onmouseout="zxcMarquee('marquee2',4);" style="left:210px;" >
<div>
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
</div>
</div>

<div id="marquee3" class="marquee" onmouseover="zxcMarquee('marquee3',0);" onmouseout="zxcMarquee('marquee3',-4);" style="left:320px;" >
<div>
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
</div>
</div>

<div id="marquee4" class="marquee" onmouseover="zxcMarquee('marquee4',0);" onmouseout="zxcMarquee('marquee4',-4);" style="left:430px;" >
<div>
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
</div>
</div>

<div id="marquee5" class="marquee" onmouseover="zxcMarquee('marquee5',0);" onmouseout="zxcMarquee('marquee5',3);" style="left:210px;top:130px;width:300px;">
<div>
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
</div>
</div>
<div id="marquee6" class="marquee" onmouseover="zxcMarquee('marquee6',0);" onmouseout="zxcMarquee('marquee6',-3);" style="left:210px;top:240px;width:200px;" >
<div>
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
</div>
</div>

</body>

</html>