从右到左滚动div

Question

I am making a ticker that scrolls the "li" elements , and for that I used the tag. But marquee tag stops working as I have some google charts on webpage. I tried to scroll the elements by using jquery using a separate php file for ticker module.

Now its working in the ticker.php file as standalone, but when this php file is included in my other webpages where google charts are used, its not working or scrolling.

The "li" elements contain data from mysql. All the necessary external files are linked properly.

I just need to scroll a div from right to left which contains company names with logo images arranged inline with effect just like html marquee.

Like:

<-- Company1 **Logo** -- Company2 **Logo** -- Company3 **Logo** <--  (Scrolling right to left) 

The ticker.php file

  <div id="ticker" class='marquee' data-allowCss3Support=false>
                <ul id="ticker">
                    <?php
                        while($row = mysql_fetch_array($query))
                        {
                            $r_name="";
                            $r_id = $row['r_id'];
                            $query1=mysql_query('select r_name from tbl_restro where r_id="'.$r_id.'" ');
                            while($row1=mysql_fetch_array($query1))
                            {
                                    $r_name = $row1['r_name'];
                            }
                            $r_avg = $row['billavg'];
                            if($r_avg>$avg)
                                {
                                    $temp=round((($r_avg-$avg)/$avg), 2);
                                    echo'<li>'.$r_name.' <img src="img/up.gif" width="10" alt="High"/> '.$temp.'</li>';
                                }
                            else if($avg>$r_avg)
                                {
                                    $temp=round((($avg-$r_avg)/$avg), 2);
                                    echo'<li>'.$r_name.' <img src="img/down.gif" width="10" alt="Down"/> '.$temp.'</li>';
                                }
                        }
                        mysql_close($con);
                    ?>
                </ul>
            </div>

The javasccript

    $(function(){

        $('.marquee').marquee({
            //speed in milliseconds of the marquee
            speed: 11000,
            //gap in pixels between the tickers
            gap: 50,
            //gap in pixels between the tickers
            delayBeforeStart: 0,
            //'left' or 'right'
            direction: 'left',
            //true or false - should the marquee be duplicated to show an effect of continues flow
            duplicated: false,
            //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
            pauseOnHover: true
        });

    });

Answer 1

You could make it like this in css:

<div id="ticker">
<div id="company_logo">
    <div class="item" style="background:red;"></div>
    <div class="item" style="background:green;"></div>
    <div class="item" style="background:blue;"></div>
</div>
</div>

CSS

#ticker {
    width: 320px;
    height: 2em;
    overflow: scroll;
  direction:rtl; /*change to "ltr" to the opposite direction*/
}
#company_logo {
    width: 480px;
    height: 100%;
}
.item {
    float: left;
    width: 160px;
    height: 100%;
}

See Demo