Horizontal javascript marquee: Latest Scores
Use the code content shown below in a php portal block.
Some adjustable variables are at the start of the block code.
/* Latest High Scores with Icons - Using javascript marquee */
global $boardurl;
/* For these dimensions... Set width to what suits your block, set height to what is needed for your images +5 */
$mar_width = 1400;
$mar_height = 55;
$mar_speed = 3;
$mar_pause = 1;
/* Thumbnail dimensions */
$width = 50;
$height = 50;
/* Number of scores to display, games folder, enable thumbnail display */
$no_games = 29; /* Set 1 to 29 games to display */
$gamesUrl = $boardurl.'/Games/';
$show_thumbnail = true;
$mar_width = empty($mar_width) || $mar_width > 1400 ? 1400 : abs($mar_width);
$no_games = empty($no_games) || $no_games > 29 ? 29 : abs($no_games);
if ($no_games < 1) {$no_games = 1;}
/* Execute the function and start the display */
$display = latest_scores2($no_games,$gamesUrl, $width, $height, $show_thumbnail);
echo '
<div style="display: flex-block;overflow:hidden;border: 0px;white-space: nowrap;">
<div style="display: inline;position:relative;width:' . $mar_width . 'px;height:' . $mar_height . 'px;overflow:hidden;">
<div style="display: inline;position:relative;width:' . $mar_width . 'px;height:' . $mar_height . 'px;">
<div id="arcadeBlockInnerMarquee" style="position:relative;left:0px;top:0px;" onmouseover="arcadeMarqueeSpeedVar(true)" onmouseout="arcadeMarqueeSpeedVar(false)">
<div id="arcadeBlockInnerContainer1" style="display: inline;visibility:hidden;position:relative;"></div>
</div>
</div>
</div>
</div>';
echo javascript_marquee($display, $mar_width, $mar_height, $mar_speed, $mar_pause);
function javascript_marquee($display2, $mar_width, $mar_height, $mar_speed, $mar_pause)
{
echo '
<script type="text/javascript">
var marqueewidth = "' . $mar_width . 'px";
var marqueeheight = "' . $mar_height . 'px";
var marqueespeed = "' . $mar_speed . '";
var pauseit = "' . $mar_pause . '";
var marqueecontentArcade1 = \'<span id="arcadeBlockInnerContainer1" style="font-face: Arial;white-space: nowrap;">' . $display2 . '</span>\';
marqueespeed = Math.max(1, marqueespeed-1);
var copyspeed = marqueespeed;
var pausespeed = (pauseit==0) ? copyspeed: 0;
document.getElementById("arcadeBlockInnerContainer1").innerHTML = marqueecontentArcade1;
var actualwidth = "";
var cross_marquee, ns_marquee;
function arcadePopulateBlockContainer1(){
cross_marquee = document.getElementById("arcadeBlockInnerMarquee");
cross_marquee.style.left = parseInt(marqueewidth)+8+"px";
cross_marquee.innerHTML = marqueecontentArcade1;
actualwidth = document.getElementById("arcadeBlockInnerContainer1") ? document.getElementById("arcadeBlockInnerContainer1").offsetWidth : 0;
lefttime=setInterval("scrollmarquee()",20);
}
function scrollmarquee(){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px";
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px";
}
function arcadeMarqueeSpeedVar(pauseitz) {
if (!pauseitz)
copyspeed = marqueespeed;
else {
copyspeed = pausespeed;
}
}
if (window.addEventListener)
window.addEventListener("load", arcadePopulateBlockContainer1, false);
else if (window.attachEvent)
window.attachEvent("onload", arcadePopulateBlockContainer1);
else
window.onload = arcadePopulateBlockContainer1();
</script>';
}
/* Function to read the db for latest scores and relevant info */
function latest_scores2($no_games,$gamesUrl, $width, $height, $show_thumbnail)
{
$start = 0;
$count = $no_games;
$display = ' ';
$space1 = '<span style="padding-left: 3em;"></span>';
$space2 = '<span style="padding-left: 14em;"></span>';
$space3 = '<span style="padding-left: 1em;"></span>';
/* show latest high scores */
global $smcFunc, $scripturl, $db_prefix, $txt;
$result = $smcFunc['db_query']('', '
SELECT game.id_game, game.game_name, game.thumbnail, game.game_directory, score.score, score.position,
IFNULL(mem.id_member, 0) AS id_member, IFNULL(mem.real_name, score.player_name) AS real_name, score.end_time
FROM {db_prefix}arcade_scores AS score
INNER JOIN {db_prefix}arcade_games AS game ON (game.id_game = score.id_game)
LEFT JOIN {db_prefix}members AS mem ON (mem.id_member = score.id_member)
ORDER BY end_time DESC
LIMIT {int:start}, {int:count}',
array(
'start' => $start,
'count' => $count,
'empty' => '',
)
);
while ($game = $smcFunc['db_fetch_assoc']($result))
{
$game_thumb = $gamesUrl.$game['game_directory'].'/'.$game['thumbnail'];
$scoring = '<a style="padding: 0.075em 0em 0.075em 0em;" href="'.$scripturl.'?action=arcade;sa=highscore;game='.$game['id_game'].'">Scored: '. $game['score'].'</a>';
$thumb = '';
if ($show_thumbnail == true)
$thumb = '<a href="'.$scripturl.'?action=arcade;sa=play;game='.$game['id_game'].'"><img src="'.$game_thumb.'" style="border: 0px;height: ' . $height . 'px;width: ' . $width . 'px;" alt="'.$game['game_name'].'" title="Play '.$game['game_name'].'" /></a>' . $space3;
$display .= $thumb . '<span style="width: 14em;min-width: 14em;"><span style="max-width: 12em;line-height: 98%;min-height: ' . $height . 'px;vertical-align: middle;position: absolute;padding: 0.15em 0em 0.15em 0em;"><a style="vertical-align: middle;padding: 0.075em 0em 0.075em 0em;" href="'.$scripturl.'?action=arcade;sa=play;game='.$game['id_game'].'">' . $game['game_name'] . '</a><span style="display: block;"></span><a style="padding: 0.075em 0em 0.075em 0em;" href="'.$scripturl.'?action=profile;u='.$game['id_member'].'">' . $game['real_name'] . '</a><span style="display: block;"></span>' . $scoring . '</span></span>' . $space2;
}
$smcFunc['db_free_result']($result);
return $display;
}
Hello Underdog,
I had a question for you, how can I get this bar in the middle, if I put it on my 24 inch monitor then it is good, but other than seeing that a 19 inch hebebn a large scroll bar. I can change this or would you like me to change the script. that would be great, because I really looked like this. I have the script attached to maybe change that for me. I thank you for the effort
greetings Johannnes
johannes47,
Edit your portal block and look to the bottom right where you will see an input box titled Custom Body Style.
Enter overflow:hidden; into that input box. This should remove the unwanted scroll bar.
hello can't see the link
thanks
I could not see the additional file
Unfortunately the file or the code is missing here.
Lots of the older attachments got lost a while back.
I will have to make a new one and update the initial post.
Keep checking this thread as I should have time to do it later this week.
Ok thx.
I found an old backup of this forum with most of the old content!
Although, as with many of the block codes this had to be reworked.
This block code is now available in the first post of the thread.
The code works great on
SMF 2.1 RC4
Arcade 2.66 RC11