ChefMaha
asked on
I want to my javascript slider to spin automatically
Hi,
I have a js slider implemented in a way that it only moves left or right if you press on the arrows on the sides. Go to this link and scroll down to the bottom of the page to see how it works: http://216.18.196.2/~batteryl
what I want to achieve is to allow the slider to move by itself (without the user pressing on the side arrows). I want it to keep on spinning. And when the user hovers the mouse on a certain item, it will stop automatically.
How can I achieve this functionality, given the following js code:
I have a js slider implemented in a way that it only moves left or right if you press on the arrows on the sides. Go to this link and scroll down to the bottom of the page to see how it works: http://216.18.196.2/~batteryl
what I want to achieve is to allow the slider to move by itself (without the user pressing on the side arrows). I want it to keep on spinning. And when the user hovers the mouse on a certain item, it will stop automatically.
How can I achieve this functionality, given the following js code:
45446844685264525184468526var Slider = Class.create();
Slider.prototype = {
options: {
shift: 900
},
initialize: function(container, controlLeft, controlRight){
this.animating = false;
this.containerSize = {
width: $(container).offsetWidth,
height: $(container).offsetHeight
},
this.content = $(container).down();
this.controlLeft = $(controlLeft);
this.controlRight = $(controlRight);
this.initControls();
},
initControls: function(){
this.controlLeft.href = this.controlRight.href = 'javascript:void(0)';
Event.observe(this.controlLeft, 'click', this.shiftLeft.bind(this));
Event.observe(this.controlRight, 'click', this.shiftRight.bind(this));
this.updateControls(1, 0);
},
shiftRight: function(){
if (this.animating)
return;
var left = isNaN(parseInt(this.content.style.left)) ? 0 : parseInt(this.content.style.left);
if ((left + this.options.shift) < 0) {
var shift = this.options.shift;
this.updateControls(1, 1);
} else {
var shift = Math.abs(left);
this.updateControls(1, 0);
}
this.moveTo(shift);
},
shiftLeft: function(){
if (this.animating)
return;
var left = isNaN(parseInt(this.content.style.left)) ? 0 : parseInt(this.content.style.left);
var lastItemLeft = this.content.childElements().last().positionedOffset()[0];
var lastItemWidth = this.content.childElements().last().getWidth();
var contentWidth = lastItemLeft + lastItemWidth + 8;
if ((contentWidth + left - this.options.shift) > this.containerSize.width) {
var shift = this.options.shift;
this.updateControls(1, 1);
} else {
var shift = contentWidth + left - this.containerSize.width;
this.updateControls(0, 1);
}
this.moveTo(-shift);
},
moveTo: function(shift){
var scope = this;
this.animating = true;
new Effect.Move(this.content, {
x: shift,
duration: 0.4,
delay: 0,
afterFinish: function(){
scope.animating = false;
}
});
},
updateControls: function(left, right){
if (!left)
this.controlLeft.addClassName('disabled');
else
this.controlLeft.removeClassName('disabled');
if (!right)
this.controlRight.addClassName('disabled');
else
this.controlRight.removeClassName('disabled');
}
}
891258442807000
901258667984000
ASKER
thanks leakim.
Can you help me integrate it into my javascript code:
Can you help me integrate it into my javascript code:
var Slider = Class.create();
Slider.prototype = {
options: {
shift: 900
},
initialize: function(container, controlLeft, controlRight){
this.animating = false;
this.containerSize = {
width: $(container).offsetWidth,
height: $(container).offsetHeight
},
this.content = $(container).down();
this.controlLeft = $(controlLeft);
this.controlRight = $(controlRight);
this.initControls();
},
initControls: function(){
this.controlLeft.href = this.controlRight.href = 'javascript:void(0)';
Event.observe(this.controlLeft, 'click', this.shiftLeft.bind(this));
Event.observe(this.controlRight, 'click', this.shiftRight.bind(this));
this.updateControls(1, 0);
},
shiftRight: function(){
if (this.animating)
return;
var left = isNaN(parseInt(this.content.style.left)) ? 0 : parseInt(this.content.style.left);
if ((left + this.options.shift) < 0) {
var shift = this.options.shift;
this.updateControls(1, 1);
} else {
var shift = Math.abs(left);
this.updateControls(1, 0);
}
this.moveTo(shift);
},
shiftLeft: function(){
if (this.animating)
return;
var left = isNaN(parseInt(this.content.style.left)) ? 0 : parseInt(this.content.style.left);
var lastItemLeft = this.content.childElements().last().positionedOffset()[0];
var lastItemWidth = this.content.childElements().last().getWidth();
var contentWidth = lastItemLeft + lastItemWidth + 8;
if ((contentWidth + left - this.options.shift) > this.containerSize.width) {
var shift = this.options.shift;
this.updateControls(1, 1);
} else {
var shift = contentWidth + left - this.containerSize.width;
this.updateControls(0, 1);
}
this.moveTo(-shift);
},
moveTo: function(shift){
var scope = this;
this.animating = true;
new Effect.Move(this.content, {
x: shift,
duration: 0.4,
delay: 0,
afterFinish: function(){
scope.animating = false;
}
});
},
updateControls: function(left, right){
if (!left)
this.controlLeft.addClassName('disabled');
else
this.controlLeft.removeClassName('disabled');
if (!right)
this.controlRight.addClassName('disabled');
else
this.controlRight.removeClassName('disabled');
}
}
I look your code and it's not really JavaScript but JQuery using.
You should extend or update the zones of your post.
Forget the pure JavaScript timer and have a look here :
http://code.google.com/p/jquery-rotate/wiki/Reference
http://malsup.com/jquery/cycle/
You should extend or update the zones of your post.
Forget the pure JavaScript timer and have a look here :
http://code.google.com/p/jquery-rotate/wiki/Reference
http://malsup.com/jquery/cycle/
ASKER
ok cool. thanks for the links.
but actually what I was looking for - since I'm not an expert in js or jquery - is to help me slightly modify this code to make the images move by themselves. (I don't wanna change the code).
I couldn't figure out how to update the zones btw.. thanks for mentioning it
but actually what I was looking for - since I'm not an expert in js or jquery - is to help me slightly modify this code to make the images move by themselves. (I don't wanna change the code).
I couldn't figure out how to update the zones btw.. thanks for mentioning it
I'm not really familiar with JQuery & Co.
To change the zone, click on the "Request Attention" button of your original question.
To change the zone, click on the "Request Attention" button of your original question.
ASKER
thanks modus.. I appreciate that
ASKER
Hi Jquery experts.. I'd be thankful if you'd assist me with this..
thanks alot!
thanks alot!
ASKER
I have increased this question's points to 150..
Please experts.. I need your help! it's urgent!
Please experts.. I need your help! it's urgent!
ASKER
hey guys..
Here's a site that contains the functionality I would like to achieve: http://www.thamervend.com.sa/Home_ar.html
(look at the bottom of the page)
Here's a site that contains the functionality I would like to achieve: http://www.thamervend.com.sa/Home_ar.html
(look at the bottom of the page)
ASKER
Hey I found a "hard-coded" solution.. but it works.. take a look (bottom of page): www.batteryland.net
Here's the code for my /public_html/app/design/fr ontend/def ault/f001/ template/c atalog/pro duct/featu red.phtml:
Here's the code for my /public_html/app/design/fr
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You should use a Javascript Timer : http://www.mcfedries.com/JavaScript/timer.asp
Regards.