Get A Marquee To Begin Repeating As Soon As Space Is Available

Here is a pen for what I have so far. I've been using CSS3 however I'm open to using other methods if it will work better: .userAttributes > .attributeGroup > .favoriteArtist

Solution 1:

I've updated your originally linked example fiddle with your 'genres' heading: http://codepen.io/anon/pen/oxEPeZ

What I've noticed is that your markup you provided is a bit wrong, so going on the original this is what's happening:

The title block should be in it's own separate div. I've set my version of your title to float to the left of the marquee div.

Then, the marquee div needs to be wide enough to contain all the text- I set it to 500px so the items don't start stacking when they reach the maximum width of the container.

After that, you need to make sure you have two spans with your content. In your link you were working on, you only had one paragraph tag for each list of items. That's the main reason why it wasn't repeating.

So now, our markup for just the Genre section looks like this:

<divclass="title">
    Genres:
</div><divclass="marquee"><div><span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span><span><a>Electronic</a>, <a>Bluegrass</a>, Classic Rock, Funk, Jam Band, Jazz, Classical</span></div></div>

I've put the marquee and title into a container div and duplicated it for the favourite artists.... (this can be named whatever, but what I have done here is used margin-bottom to create the space below each item, instead of <br> tags). Because our second ticker has more content, I've added another class called 'stretched' to give the marquee more width.

I know I haven't directly edited your fiddle sorry, however hopefully this helps get you out of trouble.