PDA

View Full Version : 2 Conveyor Belts on 1 website



azsupergirl
10-22-2010, 12:28 AM
1) Conveyor Belt slideshow script


2) http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm


3) I have been searching for hours now and cannot find any information on this topic. Is it possible to have 2 conveyor belts on one website? I have a table with 2 columns and 2 conveyor belts in both columns but only one side works. How can I make them both work?

Please help!

jscheuer1
10-22-2010, 03:41 AM
http://home.comcast.net/~jscheuer1/side/files/conveyor_oo.htm

Use your browser's 'view source' to get the code.

vwphillips
10-22-2010, 08:42 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;
overflow:hidden;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
background-color:#FFFFCC;
border: 1px solid black;
padding: 2px;
padding-left: 4px;
}


</style>

<script type="text/javascript">
/*<![CDATA[*/
// Simple Marquee (21-October-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// A simple lightweight Marquee to scroll a DIV content within a parent DIV.
// The scroll is continious with no gaps between the scroll content.
// The scroll may be 'Vertical' or 'Horizontal' and there may be as many applications on a page as required.
// The script is light weight with a functioam code size of just 1.11K.

//****** Application Notes

// **** The HTML and CSS Code.
//
// The scroll content must be nested in a DIV element.
// This scroll content DIV must be nested within a parent DIV.
// This parent DIV must be assigned a unique ID name
// and CSS style position of 'relative' or 'absolute' and width and height
// defined by CSS class rule or inline style.
// The scroll content DIV may have its width and or height specified
// by a CSS class rule or inline style.
// The parent DIV is assigned a style overflow of 'hidden'
// and the scroll content DIV style a position of 'absolute' by the script.
// e.g.
// <div id="tst2" class="marquee" onMouseover="M2.Speed=0" onMouseout="M2.Speed=2">
// <div style="width: 98%;">
// <h4>Your scroller contents 1</h4>
// <h4>Your scroller contents 2</h4>
// <h4>Your scroller contents 3</h4>
// <h4>Your scroller contents 4</h4>
// <h4>Your scroller contents 5</h4>
// </div>
// </div>
//

// **** Initialising the Script.
//
// The script is initialised by assigning a new instance of the script to a global variable.
// Script options are passed as an object to function 'zxcMarquee' by the initisation call after the page has loaded.
// e.g.
// var M1=new zxcMarquee({
// ID:'tst1', // the unique ID name of the parent DIV. (string)
// Mode:'V', //(optional) the mode of execution, Horizontal' or 'Vertical'. (string, default = 'Vertical')
// Speed:2, //(optional) the speed of execution, 1 = slow, 10 = fast, 0 = stop. (digits, default = -1)
// DelayStart:2000 //(optional) the auto start in milli seconds. (digits, default = 10)
// });
//

// **** Controlling the Scoll.
//
// The scroll is controlled by changing the scroll speed by inline event calls.
// Changing the speed to 0 will stop the scroll,
// a speed greater than 0 will scroll clockwise,
// a speed less than than 0 will scroll anticlockwise.
// e.g
// <div id="tst1" class="marqueecontainer" onMouseover="M1.Speed=0" onMouseout="M1.Speed=2">
// where M1 is the global variable which has been assigned the script instance.
//

// ****** Functional Code(1.11K) - NO NEED to Change

function zxcMarquee(o){
this.mde=typeof(o.Mode)=='string'&&o.Mode.charAt(0)=='H'?'left':'top';
var p=document.getElementById(o.ID),oop=this,os=this.mde=='top'?'Height':'Width',dly=typeof(o.DelayStart)=='number'?o.DelayStart:10;
p.style.overflow='hidden';
this.divs=[p.getElementsByTagName('DIV')[0]];
this.divs[0].style.position='absolute';
this.sz=this.divs[0]['offset'+os];
this.divs[0].style[this.mde]=-this.sz+'px';
for (var nu=Math.ceil(p['offset'+os]/this.divs[0]['offset'+os])+1,z0=0;z0<nu;z0++){
this.divs[z0+1]=this.divs[0].cloneNode(true);
p.appendChild(this.divs[z0+1]);
this.divs[z0+1].style[this.mde]=this.sz*z0+'px';
}
this.nu=this.divs.length;
this.Speed=o.Speed||-1;
setTimeout(function(){ oop.scroll(); },dly);
}

zxcMarquee.prototype.scroll=function(){
for (var oop=this,pos,z0=0;z0<this.nu;z0++){
pos=parseInt(this.divs[z0].style[this.mde]);
if ((this.Speed<0&&pos<-this.sz)||(this.Speed>0&&pos>this.sz*(this.nu-2))){
pos+=this.sz*this.nu*(this.Speed<0?1:-1);
}
this.divs[z0].style[this.mde]=pos+this.Speed+'px';
}
setTimeout(function(){ oop.scroll(); },50);
}


/*]]>*/
</script>

</head>

<body>

<div id="tst1" class="marquee" onMouseover="M1.Speed=0" onMouseout="M1.Speed=2" style="width:110px;">
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook2.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook3.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook4.gif" />
</div>
</div>
<br />
<div id="tst2" class="marquee" onMouseover="M2.Speed=0" onMouseout="M2.Speed=2" style="height:140px;">
<div style="width:450px;">
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook2.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook3.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook4.gif" />
</div>
</div>



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

var M1=new zxcMarquee({
ID:'tst1', // the unique ID name of the parent DIV. (string)
Mode:'V', //(optional) the mode of execution, Horizontal' or 'Vertical'. (string, default = 'Vertical')
Speed:2, //(optional) the speed of execution, 1 = slow, 10 = fast, 0 = stop. (digits, default = -1)
DelayStart:2000 //(optional) the auto start in milli seconds. (digits, default = 10)
});

var M2=new zxcMarquee({
ID:'tst2',
Mode:'H',
Speed:-2 //(optional) the speed of execution, 1 = slow, 10 = fast, 0 = stop. (digits, default = -1)
});

/*]]>*/
</script>
</body>

</html>

jdittber
11-10-2010, 01:35 AM
http://home.comcast.net/~jscheuer1/side/files/conveyor_oo.htm

Use your browser's 'view source' to get the code.

This is a HUGE lifesaver to me. Thank you so much. How do I make it so both scroll at the same speed? Setting both to 1 (or any number) makes the bottom one faster.

jscheuer1
11-10-2010, 03:53 AM
Well, if I edit the demo so both are 1:


<script type="text/javascript">
/* array_name - name of array of images for this show (unquoted variable name)
* width - show pixel width (unquoted integer)
* height - show pixel height (unquoted integer)
* speed - show speed - larger is faster ex:3 (unquoted integer) (range: 1-10)
* 'bgcolor' - show background-color, ex:'white' or '#eaeaea' (quoted string)
* 'image_gap' - gap between each image, use HTML, or space character (quoted string)
* slide_gap - pixels gap between each slideshow rotation (unquoted integer) */

//Usage:
//new cbelt(array_name, width, height, speed, 'bgcolor', 'image_gap', slide_gap)
new cbelt(slider, 300, 225, 1, '#eaeaea', ' ', 4);
</script>
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
<script type="text/javascript">
new cbelt(slider2, 300, 225, 1, '#eaeaea', ' ', 4);
</script>

They both move at the same speed for me. What browser are you using? I tested in Firefox 3 and IE 8.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.