HTML JS和CSS列表选取框无法正确显示

Question

I have modified a code that displays a marquee scrolling a simple HTML list. You can see it here : I have 3 problems that I can't solve:

1. JS: I would like the marquee to show the text entering again through the right just after it disappears through the left, something like a continuous marquee, how could I do it ?

2. CSS: I am noticing (a) some artifacts in the marquee, I think this is due to the marquee text and the margins/paddings of divs not being properly set; and (b) the shadow of the lighter blue div cut over the marquee.. (I think it may be a z-indez problem?). (b) appears with any browser, (a) only with chrome, firefox looks ok. How could I fix it ?

   Here's a screenshot:

3. I can successfully load data from my db and append it to the marquee. Now, I want to "refresh" the contents of the marquee every X seconds, would it be ok to remove the top element of the list when appending one in the bottom, or would it be better to fade-out, update everything, and fade-in again? Any other ways to do it ?

Answer 1

Here is a simple example to deal with scrolling them in from the opposite side. Also, if you adapt this method you can simply add or delete new items in the array as you need too. Watch this and about 2 or 3 times through it will add new items. One important thing to note is make sure the width of the div with id text is wider then the length of all visible items plus the length of the next in line.