On this site - LINK - i need to use 3 banner scrollers (2x vertical + 1x horizontal). I've tried to do it in flash, but then everyone web browsers shut down, or suspended. Now i want to do it in
JS (i use mootools). All data come from MySQL. Here's the complete code (even if you don't know mootools, You should understand it)
global $wpdb;
$table = $wpdb->prefix.'part';
$sql = "SELECT * FROM $table";
$q = $wpdb->get_results($sql);
$g = 0;
if($wpdb->num_rows > 0)
{
?>
<script type="text/javascript">
window.addEvent('load', function(){
var totall = 0;
var totalr = 0;
$$('#leftCont0 .contElement').each(function(el){
var img = new Asset.image(el.getFirst('a').getFirst('img').get('src'));
totall += img.height;
});
$$('#rightCont0 .contElement').each(function(el){
var img = new Asset.image(el.getFirst('a').getFirst('img').get('src'));
totalr += img.height;
});
$$('.leftCont').each(function(el){
var h = parseInt(el.get('id').substr(8));
el.setStyle('top', h * totall);
});
$$('.rightCont').each(function(el){
var h = parseInt(el.get('id').substr(9));
el.setStyle('top', h * totalr);
});
var total = new Array(totall, totalr);
move.periodical(30, null, total);
});
function move(num, num2)
{
var h = 0;
var da = false;
var target = null;
$$('.leftCont').each(function(el){
var act = el.getStyle('top');
var n = parseInt(act)+1;
el.setStyle('top', n+"px");
if(el.getStyle('top') < h)
{
h = parseInt(el.getStyle('top'));
alert(h);
}
if(parseInt(el.getStyle('top')) > 400)
{
da = true;
target = el;
}
});
if(da)
{
var n = h - num;
target.setStyle('top', n+'px');
}
h = 0;
da = false;
$$('.rightCont').each(function(el){
var act = el.getStyle('top');
var n = parseInt(act)+1;
el.setStyle('top', n+"px");
if(el.getStyle('top') < h)
{
h = parseInt(el.getStyle('top'));
alert(h);
}
if(parseInt(el.getStyle('top')) > 400)
{
da = true;
target = el;
}
});
if(da)
{
var n = h - num2;
target.setStyle('top', n+'px');
}
}
</script>
<?php
$g = 0;
$l = 0;
$r = 0;
$leftContent = array();
$rightContent = array();
$leftHeight = 0;
$rightHeight = 0;
foreach($q as $q)
{
if(($g % 2) == 0)
{
$leftContent[$l] = '<div class="contElement">
<a href="'.$q->aurl.'"><img src="'.$q->imgurl.'" alt="Partner" /></a>
</div>';
$lHeight = getimagesize($q->imgurl);
$leftHeight .= $lHeight[1];
$l++;
}
else
{
$rightContent[$r] = '<div class="contElement">
<a href="'.$q->aurl.'"><img src="'.$q->imgurl.'" alt="Partner" /></a>
</div>';
$rHeight = getimagesize($q->imgurl);
$rightHeight .= $rHeight[1];
$r++;
}
$g++;
}
$quantity = ceil(400 / $leftHeight) + 1;
for($i = 0; $i < $quantity; $i++)
{
$str = "";
for($j = 0; $j < sizeof($leftContent); $j++)
{
$str .= $leftContent[$j];
}
$leftContainer[$i] = '<div class="leftCont" id="leftCont'.$i.'">'.$str.'</div>';
}
$quantity = ceil(400 / $rightHeight) + 1;
for($i = 0; $i < $quantity; $i++)
{
$str = "";
for($j = 0; $j < sizeof($rightContent); $j++)
{
$str .= $rightContent[$j];
}
$rightContainer[$i] = '<div class="rightCont" id="rightCont'.$i.'">'.$str.'</div>';
}
?>
<div id="pcl">
<?php
for($i = 0; $i < sizeof($leftContainer); $i++)
{
echo $leftContainer[$i];
}
?>
</div>
<div id="pcr">
<?php
for($i = 0; $i < sizeof($rightContainer); $i++)
{
echo $rightContainer[$i];
}
?>
</div>
<?php
}
