looking for vertical marquee

**mahnazm** · 07-11-2011, 06:31 AM

Hello guys...

I am looking for a link in "dynamic drive website" for this:
a vertical marquee for images or text that the user can stop only when mouse comes over image or text.
it is important that it has to move without any stop except the mouse comes over on it.
i can not find this here!

**vwphillips** · 07-11-2011, 10:14 AM

Code:

<!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">
/*<![CDATA[*/
.crawler {
  position:absolute;left:100px;top:100px;width:200px;height:400px;border:solid red 1px;
}

.inner {
  position:absolute;left:0px;top:0px;
}

.inner IMG{
  width:200px;height:150px;float:left;margin-Top:5px;
}

.inner2 {
  position:absolute;left:0px;top:0px;width:2000px;
}

.inner2 IMG {
  width:200px;height:150px;float:left;margin-Left:5px;
}

/*]]>*/
</style></head>

<body>

<div id="c1" class="crawler" onmouseover="C1.Speed=0" onmouseout="C1.Speed=-2" >
 <div class="inner" >
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/bonsai.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/beach.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/mountain.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/coco.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/water.jpg" />
 </div>
</div>

<div id="c2" class="crawler" onmouseover="C2.Speed=0" onmouseout="C2.Speed=-2" style="left:400px;width:400px;height:150px;">
 <div class="inner2" >
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/bonsai.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/beach.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/mountain.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/coco.jpg" />
  <img src="http://www.dynamicdrive.com/dynamicindex2/crawler/water.jpg" />
 </div>
</div>

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

function zxcCrawler(o){
 var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],psz=obj[mde[2]],clds=slide.getElementsByTagName('*'),lst=clds[clds.length-1],sz=lst[mde[1]]+lst[mde[2]],nu=Math.ceil(psz/sz)+1,slider=document.createElement('DIV'),z0=0,spd=o.Speed,ssz=o.ParentSize;
 obj.style.overflow='hidden';
 obj.style[mde[3]]=(isFinite(ssz)&&clds[ssz]?clds[ssz][mde[1]]:psz)+'px';
 slider.style.position='absolute';
 slider.style[mde[0]]='0px';
 obj.appendChild(slider);
 for (;z0<nu;z0++){
  slide=z0>0?slide.cloneNode(true):slide;
  slide.style[mde[0]]=sz*z0+'px';
  slider.appendChild(slide);
 }
 this.mde=mde;
 this.sz=sz;
 this.slider=slider;
 this.Speed=isFinite(spd)?spd:-1;
 this.spd=this.Speed;
 this.to=null;
 this.Scroll();
}

zxcCrawler.prototype.Scroll=function(){
  var oop=this,spd=this.Speed,spd=isFinite(spd)?spd:this.spd,slider=this.slider,sz=this.sz,mde=this.mde[0],pos=parseInt(slider.style[mde])+spd;
  if ((spd<0&&pos<-sz)||(spd>0&&pos>0)){
   pos+=sz*(spd<0?1:-1);
  }
  slider.style[mde]=pos+'px';
  this.to=setTimeout(function(){ oop.Scroll(); },20);
 }


var C1=new zxcCrawler({
 ID:'c1',         // the unique ID name of the parent DIV.                           (string)
 Mode:'Vertical', //(optional) the mode of execution, 'Horizontal' or 'Vertical'.    (string, default = 'Horizontal')
 Speed:-2,        //(optional) the scroll speed, >0 = clockwise, <0 = anticlockwise. (number, default = -1)
 ParentSize:3     //(optional) the number of images to display.                      (number, default = the current size of the parent DIV)
});

var C2=new zxcCrawler({
 ID:'c2',
 Speed:-2
});

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

</html>

**mahnazm** · 07-11-2011, 10:30 AM

thanks sooooooo much!

**mahnazm** · 07-11-2011, 10:48 AM

but it does not work in firefox 3.6.18

**vwphillips** · 07-11-2011, 12:49 PM

I have just tested it with 3.6.18 and it works for me

please provide a link to your page

**ajfmrf** · 07-11-2011, 06:10 PM

http://www.dynamicdrive.com/dynamici.../carousel2.htm

There are both horizontal and vertical versions available

**jscheuer1** · 07-12-2011, 03:20 AM

I'm working on a script in jQuery that will combine crawler with a vertical option. But this thread inspired me to make a simple jQuery vertical marquee:

http://home.comcast.net/~jscheuer1/s...tical_crawler/

Usage is simple. The two on the above linked demo page are good examples:

Code:

<script type="text/javascript">
jQuery(function($){
	$('#mymarquee').verticalMarq();
	$('#imageone').verticalMarq({down: true});
});
</script>

The second one uses the down option to reverse the direction. Other options available are:

speed: defaults to 1, higher is faster. Must be an integer greater than 0.
loaded: defaults to false - only matters if images are involved. If set to true and you specify the dimensions for the images and any immediate containers for images, the marquee can skip preloading the images to determine their dimensions.
copyspeed: defaults to speed - set it to 0 to start out stopped. Then mousing over and out will start the scrolling.

You need to set the width and height in ordinary style.

Any questions, feel free to ask.

Thread: looking for vertical marquee

Thread Tools

Search Thread

looking for vertical marquee

The Following User Says Thank You to vwphillips For This Useful Post:

check this one out

Bookmarks

Bookmarks

Posting Permissions