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
});
});
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%;
}