JQuery scroll animation not sticking within DIV

Question

I have an issue with a JQuery animation I've been trying to implement within my site.

The general idea is that I have a footer on my page divided into two TDs. Section 1 is an icon that changes depending on the message that is scrolling by in section two.

My HTML essentially looks like this:

<div id="footer">
    <div class="box-ticker round">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height:60px;">
            <tr>
                <td style="width:12%;background:#6dc5ed;" align="center" valign="middle"><img id="image_scroll" /></td>
                <td style="width:88%;background:#9f88e2;padding;10px" class="biggest" valign="middle">
                    <div id="ticker"></div>
                </td>
            </tr>
        </table>
    </div>
</div>

My CODE to update this:

EDIT: The variable "html" is a poorly named array of JSON. It contains the data which I'm populating. Eg: html[0] = {'title':'this is a message', 'icon':'icon.png'}

$('#ticker').html("<span class='scrollingtext' id='scroll_text'></span>");
cur_index=0;
max_index=html.length;
$(document).ready(function() {
    $('.scrollingtext').bind('marquee', function() {
        if (cur_index >= max_index) { cur_index = 0; }
        obj = JSON.parse(html[cur_index]);
        $('#image_scroll').attr('src',"img/"+obj.icon);
        $('#scroll_text').html(obj.title);
        var scrolling_text = $('#scroll_text');
        var text_container = $('#ticker');
        var tw = scrolling_text.width();
        var ww = text_container.width();
        scrolling_text.css({ right: -tw });
        scrolling_text.animate({ right: ww }, 30000, 'linear', function() {
            cur_index++;
            scrolling_text.trigger('marquee');
        });
    }).trigger('marquee');
});

And finally my CSS:

.box-ticker{
    width:100%;
    height:56px;
    background:#d44d4d;
}    

.round { border-radius: 20px; }

.scrollingtext{
    position:absolute;
    vertical-align:middle;
    white-space:nowrap;
    font-family: 'AsapBold', Arial, sans-serif;font-weight:normal;
    font-size:30px;
    float: right;
    color:#FFFFFF;
}

The problem is that when the message scrolls across the screen it does not appear to be locked into the "ticker" DIV at all but just scrolls directly across the bottom of the page and appears to just ignore every DIV tag I have there. When I observe the object updating within the chrome console the HTML seems to be appearing in the correct place.

There is also a weird issue with what seem to be trailing dots following the animation along. This does not seem to happen within firefox.

Any suggestions would be greatly appreciated.

Thank you!

Answer 1

Okay found it. Your problem appears to be your CSS. See working example here

Add this to your CSS

#ticker{width:100%;overflow:hidden; display:block; }

.scrollingtext{
position:relative;
vertical-align:middle;
white-space:nowrap;
font-family: 'AsapBold', Arial, sans-serif;font-weight:normal;
font-size:30px;
float: right;
color:#FFFFFF;
}

Note: I had to make change to your html object to make it work with jsfiddle. You can ignore the js code if you have no problem with yours.