Jump to content

on hover stop scroll effect


deepson2

Recommended Posts

Hello,

 

I have given automatic scrolling effect for my recently updated feeds. this is the exact code which i have taken from the tutorial.

 

but now i want on mouse hover the scrolling should stop moving.

because sometimes its to fast so sometimes one can not read the

content.

 

here is the demo for it.

 

http://woorktuts.110mb.com/newsticker/index.html

 

now its not stopping on mouse hover. so i hv add onmousehover method into my js . here is my new JS(which is not working)

 

var Ticker = new Class({
		       Implements : [Options],

                                options : {
					speed: 1500,
					delay: 5000,
					direction: 'vertical'
				},

			initialize: function(el,options){
				this.setOptions(options);
				this.el = $(el).addEvents({
				   'mouseover' : this.over.bind(this),
				   'mouseout' : this.out.bind(this)
				});

				this.items = this.el.getElements('li');
				var w = 0;
				var h = 0;
				if(this.options.direction.toLowerCase()=='horizontal') {
					h = this.el.getSize().y;
					this.items.each(function(li,index) {
						w += li.getSize().x;
					});
				} else {
					w = this.el.getSize().x;
					this.items.each(function(li,index) {
						h += li.getSize().y;
					});
				}
				this.el.setStyles({
					position: 'absolute',
					top: 0,
					left: 0,
					width: w,
					height: h
				});

				this.fx = new Fx.Morph(this.el,{duration:this.options.speed,onComplete:function() {
					var i = (this.current==0)?this.items.length:this.current;
					this.items[i-1].injectInside(this.el);
					this.el.setStyles({
						left:0,
						top:0
					});
				}.bind(this)});
				this.current = 0;
				this.next();
			},
			next: function() {
				this.current++;
				if (this.current >= this.items.length) this.current = 0;
				var pos = this.items[this.current];
				this.fx.start({
					top: -pos.offsetTop,
					left: -pos.offsetLeft
				});
				this.timeoutId = this.next.bind(this).delay(this.options.delay+this.options.speed);
			},

			over : function(){
			    this.fx.pause();
			    $clear(this.timeoutId);
			},

			out : function(){
			   this.fx.resume();
			   this.next();
			}

		});

window.addEvent('domready',function(){
		var vert = new Ticker('TickerVertical',{speed:1000,delay:2000,direction:'vertical'});

})

 

can anyone plese  tell me why its not working and how can i get my effect to be done?

 

Thnaks in advance

Link to comment
https://forums.phpfreaks.com/topic/172791-on-hover-stop-scroll-effect/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.