The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> JavaScript Development
|
Carousel judders
Discuss Carousel judders in the JavaScript Development forum on Dev Shed. Carousel judders JavaScript Development forum discussing JavaScript and DHTML, AJAX, and issues such as coding cross-browser JavaScript.
|
|
 |
|
|
|
|

Dev Shed Forums Sponsor:
|
|
|

September 14th, 2012, 04:17 PM
|
 |
JavaScript is not spelt java
|
|
Join Date: Feb 2011
Location: Landan, England
|
|
|
Carousel judders
My code below for an image carousel works fine. It scrolls a sequence of images to the left or right and I can specify the total duration (for all images to have scrolled) and an increment - the number of pixels to move each time.
However, there is a very slight judder or pause which seems to happen around every 10th movement. Does anyone have an idea why this might be? I'm not expecting anyone to study the code in detail, but am hoping that someone may have experienced something similar in the past.
Might it be related to my use of setTimeout rather than setInterval? Or perhaps I should make my calculations more efficient? Andy.
Code:
function Carousel(obj) {
if (!(this instanceof Carousel)) return new Carousel(obj);
// ..did they use "new"?
if ( !obj.objID ) {
throw new Error("Element id is required.");
}
this.theObj = adg.$(obj.objID);
if ( !this.theObj ) {
throw new Error("The element doesn\'t exist.");
}
if ( adg.GetStyle(this.theObj,'position').toLowerCase() == 'static' )
throw new Error("Must be a positioned element.");
this.objWidth = parseInt(adg.GetStyle(this.theObj,'width'),10);
this.conWidth = parseInt(adg.GetStyle(this.theObj.parentNode,'width'),10);
if ( this.objWidth <= this.conWidth ) {
throw new Error("Element must be wider than it\'s container.");
}
this.lft = parseInt(adg.GetStyle(this.theObj,'left'),10);
this.lft = isNaN(this.lft) ? 0 : this.lft; // IE/Chrome return 'auto'
this.inc = ( obj.inc ) ? obj.inc : 1; // pixels to move per interval
this.gap = ( obj.duration ) ? (obj.duration / (this.objWidth - this.conWidth)) : 30;
// ..defaults to 30ms intervals
var that = this; // preserve scope
if ( obj.bLeft ) adg.AddEvent(adg.$(obj.bLeft),'click',function(e) {
return that.MoveIt(true); // true = move to left
});
if ( obj.bRight ) adg.AddEvent(adg.$(obj.bRight),'click',function(e) {
return that.MoveIt(false); // false = move to right
});
if ( obj.bToggle ) adg.AddEvent(adg.$(obj.bToggle),'click',function(e) {
return that.ToggleMove();
});
return this;
}
Carousel.prototype = {
constructor : Carousel, // otherwise it inherits Object.prototype
CancelMove : function () {
clearTimeout(this.theTimer);
this.Moving = false; // -inc = left, +inc = right
},
MoveIt : function (blnLeft) { // blnLeft : true = left, false = right
var MoveToLeft = function (blnLeft) { // called by MoveIt()
if ( blnLeft && (this.lft + this.objWidth >= this.conWidth + this.inc) ) {
this.lft -= this.inc;
}
else if ( !blnLeft && (this.lft <= -this.inc) ) {
this.lft += this.inc;
}
else {
this.Moving = false;
return false;
}
this.theObj.style.left = this.lft + 'px';
var that = this; // preserve scope
this.theTimer = setTimeout(function () {
MoveToLeft.call(that, blnLeft);
}, that.gap);
return true;
};
if ( this.Moving ) {
this.CancelMove();
} else {
this.Moving = ( blnLeft ) ? -this.inc : this.inc;
MoveToLeft.call(this,blnLeft);
}
},
ToggleMove : function () {
var ml = this.Moving; // was it moving already?
this.CancelMove();
if ( this.lft ) {
( ml > 0 ) ? this.MoveIt(true) : this.MoveIt(false);
} else { // it's already furthest right..
this.MoveIt(true); // so move it left
}
}
};
|

September 14th, 2012, 04:27 PM
|
 |
JavaScript is not spelt java
|
|
Join Date: Feb 2011
Location: Landan, England
|
|
|

September 14th, 2012, 06:48 PM
|
 |
JavaScript is not spelt java
|
|
Join Date: Feb 2011
Location: Landan, England
|
|
Well I'm on broadband, so perhaps if someone can just confirm if the scrolling-action is acceptable to them 
|

September 14th, 2012, 07:09 PM
|
|
|
I think it is more a need of interval :pixel tweaking than anything else. jsMorph have some nice timings that you could take a look at for numbers.
|

September 15th, 2012, 05:45 AM
|
 |
JavaScript is not spelt java
|
|
Join Date: Feb 2011
Location: Landan, England
|
|
Quote: | Originally Posted by Winters I think it is more a need of interval :pixel tweaking than anything else. jsMorph have some nice timings that you could take a look at for numbers. | Thank you, Andy.
|

September 17th, 2012, 08:04 AM
|
 |
JavaScript is not spelt java
|
|
Join Date: Feb 2011
Location: Landan, England
|
|
|
I want to pursue this a little more as tweaking the timer interval and/or duration doesn't completely fix the flicker.
Is it preferable to change the right/left setting of an element or the right or left-margin?
Is setInterval preferable to setTimeout in terms of performance/behaviour? (I'm currrently re-setting setTimeout on each iteration.)
I'm still talking about a linear transition and understand that a non-linear slide (or morph) would probably improve the effect.
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|