Need Bids on JQuery Data Table Marquee Effect

I have a job that I would like to get bids on...if that still happens on this site.  Here is what I need:

I need this page (https://www.gopherstateevents.com/results/fitness_events/results.asp?event_type=5&event_id=825&race_id=1427) to "scroll" vertically in marquee fashion for large screen display at races.  All I really need is the data table...or the data in the data table...to be visible.  Please let me know if you would be able to help me and what it would cost me.  I have tried to get this going in the "normal" process of doing it myself with EE help but, due to my weakness in JQuery, I just haven't gotten there.

Let me know if you have questions or if you can help me.
Bob SchneiderCo-OwnerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chinmay PatelChief Technical NinjaCommented:
Hi Bob,

I did see your other questions earlier but as a policy I generally do not engage a query if other expert/s are already engaged. If you don't mind to wait for a couple of days more I would like to give it a shot. From my side the only cost would be your engagement in answering my queries and nothing more.

Regards,
Chinmay.
0
lenamtlCommented:
Hi,

I'm not sure the reason for marquee as it may not be displayed well on some device and can be hard to read...
I would try to use CSS3 Marquees (no JS required and easy to set) http://sampsonblog.com/css3-marquee/

If you have lot of content or lots of column here some other suggestion that are Built in Datatables
Responsive
https://datatables.net/extensions/responsive/examples/initialisation/className.html
Modal
https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html
Column Toggle
https://datatables.net/extensions/buttons/examples/column_visibility/columnsToggle

// this is another way to do it with toggle and tabs
Toggle with tabs http://live.datatables.net/xuvujixo/1/edit
0
Bob SchneiderCo-OwnerAuthor Commented:
Chunmay, thank you for your professionalism.  lenamtl, the table examples you give are nice but do not have the content scrolling like your marquee text example.  I agree that there is little value to this, but one area where there is value is in road racing (running) where results are posted on a big screen and folks look for their results.  Even then I am not a huge fan but we are in the business of timing races and if our competitors do it and our customers want it then...
0
Eddie ShipmanAll-around developerCommented:
Bob, I have a marquee working with race results. It really isn't what I think you were looking for but it does scroll ALL the results...
Please read the entire code to see how I reformatted it and also added comments on what you should do to get the thing working correctly.
If you have any questions, hit me up...

Eddie

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Scrolling Results For Hanover Harvest Festival</title>

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="GENERATOR" content="Microsoft Visual Studio 6.0">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
        <meta name="description" content="Scrolling Results from Gopher State Events">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
        <link rel="alternate" href="http://gopherstateevents.com/" hreflang="en-us">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-submenu/3.0.1/css/bootstrap-submenu.min.css">
        
        
        <!--Data Table references-->   
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
        
        <style type="text/css">
            .dataTables_filter {
                visibility: hidden;
            }
            .marquee {
                width: 100%;
                overflow: hidden;
                border:none;
                background: #000;
                font-size: 14px;
                height: 60px;
                margin-top: 45px;
                color: #FCB040;
            }    
        </style>
    </head>

    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <img class="img-responsive" src="/graphics/html_header.png" alt="Scrolling Results">
                </div>
                <div class="col-sm-6" style="text-align:center;">
                    <h3 class="h3">Scrolling Results For Hanover Harvest Festival</h3>
                    <h4 class="h4">8/4/2018</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class='marquee'>Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12" style="text-align:center;">
                    <div style="padding:5px 0 5px 0;">
                        <a href="https://www.gopherstateevents.com/results/fitness_events/results_scrollx.asp?event_id=794">Refresh Results</a>
                    </div>
                    <div class="table-responsive" style="width:100%;height: 700px; overflow: auto;">
                            <div id="results_filter" class="dataTables_filter"><label>Search:<input type="search" class="" placeholder="" aria-controls="results"></label></div>
                            <table id="results"
                                class="display dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="results_info" style="width: 100%;">
                                <thead>
                                    <tr role="row">
                                        <th class="sorting_asc" tabindex="0" aria-controls="results" rowspan="1" colspan="1" aria-label="Pl: activate to sort column descending"
                                            aria-sort="ascending" style="width: 21px;">Pl</th>
                                        <th class="sorting" tabindex="0" aria-controls="results" rowspan="1" colspan="1" aria-label="Bib: activate to sort column ascending"
                                            style="width: 31px;">Bib</th>
                                        <th class="sorting" tabindex="0" aria-controls="results" rowspan="1" colspan="1" aria-label="First Name: activate to sort column ascending"
                                            style="width: 128px;">First Name</th>
                                        <th class="sorting" tabindex="0" aria-controls="results" rowspan="1" colspan="1" aria-label="Last Name: activate to sort column ascending"
                                            style="width: 92px;">Last Name</th>
                                        <th class="sorting" tabindex="0" aria-controls="results" rowspan="1" colspan="1" aria-label="MFX: activate to sort column ascending"
                                            style="width: 39px;">MFX</th>
                                        <th class="sorting" tabindex="0" aria-controls="results" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending"
                                            style="width: 36px;">Age</th>
                                        <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Chip Time" style="width: 84px;">Chip Time</th>
                                        <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Gun Time" style="width: 80px;">Gun Time</th>
                                        <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="Start Time" style="width: 85px;">Start Time</th>
                                        <th class="sorting" tabindex="0" aria-controls="results" rowspan="1" colspan="1" aria-label="City: activate to sort column ascending"
                                            style="width: 96px;">City</th>
                                        <th class="sorting" tabindex="0" aria-controls="results" rowspan="1" colspan="1" aria-label="St: activate to sort column ascending"
                                            style="width: 22px;">St</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th rowspan="1" colspan="1">Pl</th>
                                        <th rowspan="1" colspan="1">Bib</th>
                                        <th rowspan="1" colspan="1">First Name</th>
                                        <th rowspan="1" colspan="1">Last Name</th>
                                        <th rowspan="1" colspan="1">MFX</th>
                                        <th rowspan="1" colspan="1">Age</th>
                                        <th rowspan="1" colspan="1">Chip Time</th>
                                        <th rowspan="1" colspan="1">Gun Time</th>
                                        <th rowspan="1" colspan="1">Start Time</th>
                                        <th rowspan="1" colspan="1">City</th>
                                        <th rowspan="1" colspan="1">St</th>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr role="row" class="odd">
                                        <td class="sorting_1">1</td>
                                        <td>106</td>
                                        <td>Chase</td>
                                        <td>Cayo</td>
                                        <td>M</td>
                                        <td>22</td>
                                        <td>14:46.3</td>
                                        <td>14:46.9</td>
                                        <td>0:00.6</td>
                                        <td>Otsego</td>
                                        <td>MN</td>
                                    </tr>
                                    <tr role="row" class="even">
                                        <td class="sorting_1">2</td>
                                        <td>66</td>
                                        <td>Brendan</td>
                                        <td>Sage</td>
                                        <td>M</td>
                                        <td>22</td>
                                        <td>15:56.6</td>
                                        <td>15:56.8</td>
                                        <td>0:00.2</td>
                                        <td>Saint Michael</td>
                                        <td>MN</td>
                                    </tr>
                                    <tr role="row" class="odd">
                                        <td class="sorting_1">3</td>
                                        <td>36</td>
                                        <td>Isaac</td>
                                        <td>Basten</td>
                                        <td>M</td>
                                        <td>17</td>
                                        <td>16:19.2</td>
                                        <td>16:21.5</td>
                                        <td>0:02.3</td>
                                        <td>Buffalo</td>
                                        <td>MN</td>
                                    </tr>
                                    <tr role="row" class="even">
                                        <td class="sorting_1">4</td>
                                        <td>304</td>
                                        <td>nick</td>
                                        <td>oak</td>
                                        <td>M</td>
                                        <td>17</td>
                                        <td>16:21.7</td>
                                        <td>16:22.5</td>
                                        <td>0:00.8</td>
                                        <td>buffalo</td>
                                        <td>MN</td>
                                    </tr>
                                    <tr role="row" class="odd">
                                        <td class="sorting_1">5</td>
                                        <td>12</td>
                                        <td>Braden</td>
                                        <td>Benson</td>
                                        <td>M</td>
                                        <td>18</td>
                                        <td>16:45.7</td>
                                        <td>16:45.9</td>
                                        <td>0:00.2</td>
                                        <td>Rogers</td>
                                        <td>MN</td>
                                    </tr>
                                    <tr role="row" class="even">
                                        <td class="sorting_1">6</td>
                                        <td>149</td>
                                        <td>Ryan</td>
                                        <td>Moore</td>
                                        <td>M</td>
                                        <td>21</td>
                                        <td>16:50.0</td>
                                        <td>16:50.2</td>
                                        <td>0:00.2</td>
                                        <td>Saint Michael</td>
                                        <td>MN</td>
                                    </tr>
                                    <tr role="row" class="odd">
                                        <td class="sorting_1">7</td>
                                        <td>353</td>
                                        <td>Alexei</td>
                                        <td>Hensel</td>
                                        <td>M</td>
                                        <td>17</td>
                                        <td>16:57.6</td>
                                        <td>17:06.9</td>
                                        <td>0:09.3</td>
                                        <td>Buffalo</td>
                                        <td>MN</td>
                                    </tr>
                                    <tr role="row" class="even">
                                        <td class="sorting_1">8</td>
                                        <td>20</td>
                                        <td>Luke</td>
                                        <td>Swanson</td>
                                        <td>M</td>
                                        <td>15</td>
                                        <td>17:06.4</td>
                                        <td>17:07.9</td>
                                        <td>0:01.5</td>
                                        <td>Greenfield</td>
                                        <td>MN</td>
                                    </tr>
                                    <tr role="row" class="odd">
                                        <td class="sorting_1">9</td>
                                        <td>221</td>
                                        <td>Austin</td>
                                        <td>Willey</td>
                                        <td>M</td>
                                        <td>18</td>
                                        <td>17:59.6</td>
                                        <td>18:00.5</td>
                                        <td>0:00.9</td>
                                        <td>Buffalo</td>
                                        <td>MI</td>
                                    </tr>
                                    <tr role="row" class="even">
                                        <td class="sorting_1">10</td>
                                        <td>354</td>
                                        <td>Travis</td>
                                        <td>Scotting</td>
                                        <td>M</td>
                                        <td>18</td>
                                        <td>18:15.5</td>
                                        <td>18:16.1</td>
                                        <td>0:00.6</td>
                                        <td>Buffalo</td>
                                        <td>MN</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="http://cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js"></script>
        <script src="https://rawgithub.com/tobia/Pause/master/jquery.pause.js"></script>

        <!-- 
            This is the data retrieved from your url: results_scroll_source.asp?event_id=794 
            In order to make YOUR data load, just delete the line below and uncomment the script tag
            with the $.get()...
        -->
        <script src="./results_scroll_source.json"></script>
        <!-- 
        <script>
            var data = $.get('results_scroll_source.asp?event_id=794');
        </script>
        -->
        <script>
            var PLACE     = 0;
            var BIB       = 1;
            var FIRSTNAME = 2;
            var LASTNAME  = 3;
            var MFX       = 4;
            var AGE       = 5;
            var CHIPTIME  = 6;
            var GUNTIME   = 7;
            var STARTTIME = 8;
            var CITY      = 9;
            var ST        = 10;

            var duration = 10000;
            var direction = 'left';
            var x = 0;

            var $line = GetData(x);
            $(document).ready(function() {
                $('#results').DataTable( {
                    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                    "order": [[ 0, 'asc' ]],
                    "columnDefs": [
                        {
                            "targets": [6,7,8],
                            "orderable": false
                    }],
                    "data": data["data"] // I had to change this to make it work with local data. delete this line and uncomment the line below
                    // "ajax": {"url":"results_scroll_source.asp?event_id=794"}
                } );
                $(".marquee").html($line);

            $('.marquee').marquee({
                duration: duration,
                direction: direction,
                pauseOnHover: true
            }).bind('finished', function(){
                //Change text to something else after first loop finishes
                $(this).marquee('destroy');

                // Load new content into $line variable
                if(x == data.length-1) {
                    x = 0;
                    $line = GetData(x);
                } else {
                    x++;
                    $line = GetData(x);
                }

                //Update the marquee container with new $line
                $(this).html($line)
                    .marquee({
                        duration: duration,
                        direction: direction,
                        pauseOnHover: true
                    })     
                });
            });

            function GetData(x) {
                var d = data['data'][x];
                var gender = (data['data'][x][MFX] === 'M')?"Male":"Female";
                /*
                Example: 
                ********************************************************************
                Place: 24  
                214 - Robin Balder-Lanoue - Monticello, MN - 49 year old Female
                Chip Time: 21:37.6 Gun Time: 21:50.1 Start Time: 0:12.5
                ********************************************************************
                */
                var l = "Place: " + d[PLACE] + "<br>" + 
                        d[BIB] + " - " + d[FIRSTNAME] + " " + d[LASTNAME] + " -  " + d[CITY] + ", " + d[ST] +  " -  " + d[AGE] + " year old " + gender + "<br>" +
                        "Chip Time: " + d[CHIPTIME] + "  Gun Time: " + d[GUNTIME] + "  Start Time: " + d[STARTTIME];               

                return l;
            } 

        </script>

    </body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bob SchneiderCo-OwnerAuthor Commented:
Thank you for your help everyone!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.