Search code examples
jquerymarquee

jQuery marquee (from unordered list) that supports right to left

I've been looking for a jQuery marquee, while it sounds simple enough I couldn't find any working code that fits my needs.

My requirements are:

  1. It must support direction (specifically right-to-left).
  2. It must support using an unordered list as a source as opposed to a single string.
  3. It should look like the classic marquee.

After searching, I only found a few that somewhat fit what I'm looking but all have serious flaws.

The first one is liScroll which while seems pretty good it lacks direction support. It's simply left-to-right by default and there's no option to change that. And although I tried to change the the code to support right-to-left, alas, I failed miserably.

I also tried Giva Labs Marquee Plugin but it also doesn't support direction as far as I could tell.

The last one is [jQuery WebTicker][2], while at first glance it seemed perfect, it turned-out to have a weird bug/behavior. It works fine when each item is short, but in my case each item is a pretty long string on its own, in which case it behaves erratically. When each item ends, instead of smoothly displaying the next one right on its tail, it instead displays a lot of empty spaces and the items feel they jump instead of scroll/slide.

I realize that a lot of people dislike marquees in general but I assure you, I'm not doing this by choice. So bear with me.

Thanks in advance.

Edit: I've managed to get simpleScroll (thanks to Ceryl Wiltink) to work for the most part but I ran into a small issue. I use the "direction: backwards" which means the text scroll from the left to the right but the issue is the text starts scrolling from the far right instead of the far left resulting in the first item on the list being not viewable.

I took a look at the JS and I'm guessing the problem lies in this part (the else block) [lines 143 to 162 in the original JS]

if (this.isAuto && this.o.autoMode=='loop') {

            this.$list.css(this.dimension,this.posMax+(this.itemMax*addItems) +'px');

            this.posMax += (this.clipMax - this.o.speed);

            if (this.isForwards) {
                this.$items.slice(0,addItems).clone(true).appendTo(this.$list);
                this.resetPosition = 0;

            } else {
                this.$items.slice(-addItems).clone(true).prependTo(this.$list);
                this.resetPosition = this.$items.length * this.itemMax;
                //due to inconsistent RTL implementation force back to LTR then fake
                if (this.isRTL) {
                    this.$clip[0].dir = 'ltr';
                    //based on feedback seems a good idea to force float right
                    this.$items.css('float','right');
                }
            }

But whatever values I try to modify it ends screwing it further, I'm assuming this is the key part

this.resetPosition = this.$items.length * this.itemMax;

But any modifications to those values end up causing more harm than good. Am I even working at the right place? Or the problem could somewhere else entirely?

Solution

  • I have successfully used simplyscroll in the past.

    http://logicbox.net/jquery/simplyscroll/

    Not sure if it has changed a lot over the time, but it supports directions and works on UL/LI's

    You can see an example on http://www.cesar.nl/ (The product-ticker on top with images)