JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me

The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.

Go Back   Dev Shed ForumsWeb DesignJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old September 14th, 2012, 04:17 PM
AndrewSW's Avatar
AndrewSW AndrewSW is offline
JavaScript is not spelt java
Dev Shed Novice (500 - 999 posts)
 
Join Date: Feb 2011
Location: Landan, England
Posts: 743 AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 2 Weeks 1 Day 23 h 1 m 13 sec
Reputation Power: 164
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
            }
        }
    };

Reply With Quote
  #2  
Old September 14th, 2012, 04:27 PM
AndrewSW's Avatar
AndrewSW AndrewSW is offline
JavaScript is not spelt java
Dev Shed Novice (500 - 999 posts)
 
Join Date: Feb 2011
Location: Landan, England
Posts: 743 AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 2 Weeks 1 Day 23 h 1 m 13 sec
Reputation Power: 164
It's at the bottom of this page.

Reply With Quote
  #3  
Old September 14th, 2012, 06:48 PM
AndrewSW's Avatar
AndrewSW AndrewSW is offline
JavaScript is not spelt java
Dev Shed Novice (500 - 999 posts)
 
Join Date: Feb 2011
Location: Landan, England
Posts: 743 AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 2 Weeks 1 Day 23 h 1 m 13 sec
Reputation Power: 164
Well I'm on broadband, so perhaps if someone can just confirm if the scrolling-action is acceptable to them

Reply With Quote
  #4  
Old September 14th, 2012, 07:09 PM
Winters Winters is offline
Super Moderator
Dev Shed Expert (3500 - 3999 posts)
 
Join Date: Jul 2003
Posts: 3,871 Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level)Winters User rank is General 24th Grade (Above 100000 Reputation Level) 
Time spent in forums: 1 Month 2 Weeks 1 Day 16 h 31 m 11 sec
Reputation Power: 2569
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.
__________________
[PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

W3Fools - A W3Schools Intervention.

Reply With Quote
  #5  
Old September 15th, 2012, 05:45 AM
AndrewSW's Avatar
AndrewSW AndrewSW is offline
JavaScript is not spelt java
Dev Shed Novice (500 - 999 posts)
 
Join Date: Feb 2011
Location: Landan, England
Posts: 743 AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 2 Weeks 1 Day 23 h 1 m 13 sec
Reputation Power: 164
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.

Reply With Quote
  #6  
Old September 17th, 2012, 08:04 AM
AndrewSW's Avatar
AndrewSW AndrewSW is offline
JavaScript is not spelt java
Dev Shed Novice (500 - 999 posts)
 
Join Date: Feb 2011
Location: Landan, England
Posts: 743 AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level)AndrewSW User rank is First Lieutenant (10000 - 20000 Reputation Level) 
Time spent in forums: 2 Weeks 1 Day 23 h 1 m 13 sec
Reputation Power: 164
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.

Reply With Quote
Reply

Viewing: Dev Shed ForumsWeb DesignJavaScript Development > Carousel judders

Developer Shed Advertisers and Affiliates



Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.

© 2003-2013 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap