Daily Lucky Numbers:
3
7
12
24
40
41

Horizontal latest scores block

Started by Chen Zhen, July 06, 2013, 03:15:06 PM

Previous topic - Next topic

Chen Zhen

July 06, 2013, 03:15:06 PM Last Edit: November 21, 2021, 12:07:06 AM by Chen Zhen Reason: updated block code
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 = '&nbsp;';
    $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;
}

johannes47

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

Chen Zhen

October 09, 2013, 09:31:02 PM #2 Last Edit: October 09, 2013, 09:32:34 PM by underdog
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.

karim


showzamani


Hero

Unfortunately the file or the code is missing here.

Chen Zhen


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.

Hero


Chen Zhen


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.

Rowdy

The code works great on

SMF 2.1 RC4
Arcade 2.66 RC11