jQuery.Marquee plugin: Scroll left AND text-align left from the beginning

Question

I made this to show what I currently have working:

http://jsfiddle.net/53ceq/10/

As stated, I'd like to have the text scroll left, which is currently occurring.

How do I set the text to the left (within the div) initially though?

I've tried text-align: left; but this does not have an effect. Even if I set a <div> within the marquee div and try to modify the position on that, there is also no effect on the alignment: the text always 'pops out' from the right.

Note: this is based on https://github.com/aamirafridi/jQuery.Marquee

Any way around this?

Answer 1

You're styling the wrong element. Since JavaScript is setting some inline styles, you'll have to override them.

.js-marquee-wrapper {
    position: relative;
    left: -100%;
}

Its recommended though you just fork jQuery.Marquee, add this feature in, then remove this intrusive CSS.

Working Example: http://jsfiddle.net/MattLo/53ceq/12/