Sort Cyclical Upcoming Event Divs Based on Today's Date

Question

Jon_7 0 Light Poster

7 Years Ago

I have a list of 4 upcoming events with a fair amount of detail for each. I'd like for the upcoming event to be first one the list no matter the time of year. I'm not very good at code, but I follow instruction well.

Here's what I was thinking:

<script>
compare today() to each of the 4 divs by some mathematical equation. No need to take into account the year, as these events only depend on the month. If a day option can be included, I'll take it... but that also isn't essential.
</script> <div id="3march">All the info for the March event</div> <div id="6june">All the info for the June event</div> <div id="9sept">All the info for the September event</div> <div id="12dec">All the info for the December event</div>

Since it's now August, I'd expect the September event to automatically show at the top, followed by the December event, and then the March and June.

I've searched high & low, and have found this nowhere on the internet. If it's impossible, please let me know. Thanks a ton!

basic

3 Contributors
11 Replies
490 Views
1 Day Discussion Span
Latest Post 7 Years Ago Latest Post by Jon_7

All 11 Replies

rproffitt 2,580 "Nothing to see here."

7 Years Ago

A few things. Very few folk write code or your site for you so with that out of the way, you may have reveal more about your web hosting. What database is available as well. To be sure you will learn to code as time passes but if this is to be written by others post this in the for hire or hiring area along with the renumeration for the job.

If I were to tackle this I'd put the details into a database then the PHP would be to query the database to create the view based on today's date.

-> One big deal is that today() could be variable depending on the user's timezone so going in you have to get the user's timezone so you can factor that into your query.

jkon 602 Posting Whiz in Training

7 Years Ago

Hello Jon_7
From where do you get the data for these events ? In what format do you get them ? What language do you use server side? Why did you choose to use the DOM id for the date of the event (e.g. couldn't be two events in the same day?) ? Are you trying a solution servers side or only client side ?

jkon 602 Posting Whiz in Training

7 Years Ago

First of all you will find it real helpful if your separate your css , js and html in different files. Css and JavaScript (the files that you are using) goes to head section , and using a IDE would make your life real easier (if you used one you could see the errors in your code and fix them with no wandering). I hate giving ready answers so try at least to understand what we are doing , just copy paste will not make you better. First of all using a span that has inline style of display none to denote the dates is not a good practice for that reason we have the data html attribute. So your code:

<div class="date">
    ...
    span style="display: none;">10 September 2016</span>
</div>

Becomes:

<div class="date" data-date="10 September 2016">
    ...
</div>

And now lets move to JavaScript:
There are many ways to do it. If I understood correctly you want to have the upcoming events on top ordered by the one that will come first and the events that have passed under those, ordered by the most recent one.

$( document ).ready(function() {
        /*
            This will tell jQuery to execute anything in this code block
            when the document is ready 
        */
        sortDateDivs(); // A custom function that will do the work 
});

function sortDateDivs()
{
    var now = new Date(); // A JS Date object with the current date time 
    now.setHours(0,0,0,0); // You only have dates so lets put today date object in the begining of the day         
    var nowTimeStamp = now.getTime(); // 

    var $dateDivs = {}; // An associative array (js object) having as key the 
    // millisecond of each div (through the data-date attribute) and as value 
    // the jQuery div date DOM object.   
    var futureTimeStamps = []; // An array containing the date (in milliseconds) 
    // for future events 
    var pastTimeStamps = [] // An array containing the date (in milliseconds) 
    // for past events

    if($("#dates>.date").length > 0) // if there are dates 
    {
        $("#dates>.date").each(function(){ // We will iterate through the date divs 
            $dateDiv = $(this); // The current Date Dom object (as jQuery parsed)
            if($dateDiv.data("date") != undefined) // id the $dateDiv object has a date data
            {
                var date = new Date( $dateDiv.data("date") ); // The date JS obj from 
                // the data-date attribute 
                var timeStamp = date.getTime();
                while(timeStamp in $dateDivs)
                {

                    timeStamp++; // You might have two event in the same day , 
                    // but their key must be different
                }
                $dateDivs[timeStamp] = $dateDiv; // putting the jQuery parsed DOM object
                // in the associative array (js object)

                if(timeStamp < nowTimeStamp) // this is a past event
                {
                    pastTimeStamps.push(timeStamp);
                }
                else // this is a future (or today) event 
                {
                    futureTimeStamps.push(timeStamp);
                }
            }
        });

        if(futureTimeStamps.length > 0) // if there are futureTimeStamps 
        {
            // we will sort the future timestamps from least to greatest    
            futureTimeStamps.sort( function(a, b) { return a - b; } );
            for(var i = 0; i < futureTimeStamps.length; i++) // iterate through futureTimeStamps
            {
                $("#dates").append( $dateDivs[ futureTimeStamps[i] ] );
                // Here we take the $dateDiv from the $dateDivs , it has as key 
                // the timeStamp we put in futureTimeStamps array
            }
        }

        if(pastTimeStamps.length > 0) // if there are pastTimeStamps 
        {
            // we will sort the past timestamps from greatest to least  
            pastTimeStamps.sort( function(a, b) { return b - a; } );
            for(var i = 0; i < pastTimeStamps.length; i++) // iterate through pastTimeStamps
            {
                $("#dates").append( $dateDivs[ pastTimeStamps[i] ] );
                // Here we take the $dateDiv from the $dateDivs , it has as key 
                // the timeStamp we put in pastTimeStamps array
            }
        }       
        //DONE
    }
}

Edited 7 Years Ago by jkon

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Jon_7 0 Light Poster · Answer 1 · 2016-08-01T21:06:12+00:00

Oh ok, that makes sense. I use blogger and godaddy, so I have no php capabilities and must link any major code through dropbox. I know that's not truly optimal, but I've tried other platforms and they all majorly confuse me. Since I've gotten along this far, I figure I might as well keep going rather than take time I don't have to learn something new.

Here's the page I'm trying to order: http://www.50allstars.com/p/special-events.html (still very much a work-in-progress) --- Right now I've placed the September event at the top manually, but I'd like for it to sort to the bottom of the four once the date passes.

I've found a few bits of code out there that can do this for a list of dates. Should I post those links here?

Thanks a ton, guys!

Jon_7 0 Light Poster · Answer 2 · 2016-08-02T01:17:54+00:00

I've found a page that did this with dates and no content here.

I guess I'm trying to do the same thing, but with content instead of dates. Reading around, maybe I'd have to set the data attribute for each div.

Does this sound somewhat close? Thanks for any help!

Jon_7 0 Light Poster · Answer 3 · 2016-08-02T01:32:15+00:00

I believe I've figured it out, but I'm not sure if I need to remove the year aspect of the formula so that I won't have to update this year after year. If someone could glance it over and get back to me, that would be great. Your previous suggestions actually helped me narrow my google search a ton. Thanks a ton!

<style>
.date{
padding-bottom:40px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="dates">

  <div class="date">
Content listed for March
<span style="display:none;">5 March 2016</span>
</div>

  <div class="date">
Content listed for June 
<span style="display:none;">3 June 2016</span>
</div>

  <div class="date">
Content listed for September 
<span style="display:none;">10 September 2016</span>
</div>

  <div class="date">
Content listed for December 
<span style="display:none;">12 December 2016</span>
</div>

</div>

<script type="text/javascript">
        var now = new Date();
$(".date").sort(function(a, b) {
  var aDiff = new Date($(a).text().trim()) - now;
  var bDiff = new Date($(b).text().trim()) - now;
  return aDiff < bDiff ? -1 : aDiff > bDiff ? 1 : 0;
}).appendTo('#dates').filter(function() {
  return new Date($(this).text().trim()) - now < 0;
}).appendTo('#dates');
    </script>

Jon_7 0 Light Poster · Answer 4 · 2016-08-02T02:26:02+00:00

Doesn't work when I apply the entire code to it :-(

<style>
.date{
padding-bottom:40px;
}

.whiteback{
    background: #eeeeee;
    color: #222222;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #aaaaaa;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.blackback{

    background: #222222;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #888888;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.grayback{

    background: #666666;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #888888;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.redback{

    background: #880000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #888888;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.paragraf {
        letter-spacing:1px;
        line-height:20px;
        color: #000000; 
        font-size:13px;
        FONT-WEIGHT:300px;
        text-transform:none;
        font-family:verdana;   
        font-style: italic;
       text-align:justify;
}

.skinny{
 padding: 2px 5px 2px 5px !important;
line-height:15px;
}
.one, a.one, a.one:hover {
background: #0000ff url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
 display: inline-block; 
 padding: 2px 7px 1px 7px; 
        letter-spacing:2px;
 color: #ffffff; 
        font-size:12px;
        FONT-WEIGHT:300px;
 text-decoration: none;
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
        text-transform:uppercase;
        font-family:verdana;

}

.two, a.two{
background: #990000 url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
 display: inline-block; 
 padding: 2px 7px 1px 7px; 
        letter-spacing:2px;
 color: #ffffff; 
        font-size:12px;
        FONT-WEIGHT:300px;
 text-decoration: none;
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
        text-transform:uppercase;
        font-family:verdana;
}

.three{
background: #333333 url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
 display: inline-block; 
 padding: 2px 7px 1px 7px; 
        letter-spacing:2px;
 color: #ffffff; 
        font-size:12px;
        FONT-WEIGHT:300px;
 text-decoration: none;
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
        text-transform:uppercase;
        font-family:verdana;
}

.four{
background: #008800 url(http://zurb.com/blog_uploads/0000/0617/alert-overlay.png) repeat-x; 
 display: inline-block; 
 padding: 2px 7px 1px 7px; 
        letter-spacing:2px;
 color: #ffffff; 
        font-size:12px;
        FONT-WEIGHT:300px;
 text-decoration: none;
 -moz-border-radius: 5px; 
 -webkit-border-radius: 5px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer;
        text-transform:uppercase;
        font-family:verdana;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="dates">

  <div class="date">

<br><br>

<table width="940" style="border:2px solid black; padding:0; font-family:arial;" cellspacing="1"><tr><td height="30" class="blackback" style=" color:white;letter-spacing:4px; font-family:arial; font-size:13px;" align="center"><span class="two" style="float:left;margin-left:15px;">September</span><span style="margin-left:-110px;">POKER NIGHT + KARAOKE</span>
</td></tr><tr><td valign="top" style="padding:20px;" class="whiteback listinfo">

<i class="fa fa-calendar fa-pull-left"></i><b>date:</b> First Saturday after Labor Day in September<br>
<i class="fa fa-location-arrow fa-pull-left"></i><b>location:</b> TBD<br>
<i class="fa fa-laptop fa-pull-left"></i><b>RSVP: </b><a href="http://bookeo.com/50allstars?category=2116F3FWR1559DE0339F&initialview=oneOffEvents" class="redlink">Book your spot</a><br>
<i class="fa fa-user fa-pull-left"></i><b>Attendees:</b> Casual dress, adults only, please RSVP<br>
<i class="fa fa-user-plus fa-pull-left"></i><b>Guests: </b><i>Bring your friends!</i> Purchase a sponsored VIP table to ensure you're all sat together<br>
<i class="fa fa-car fa-pull-left"></i><b>carpool: </b>If you're planning to drink and are not planning to uber home, we can easily provide rides<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i>Alcohol will be available for purchase<br><br>

<B><I><U>POKER TOURNAMENT</U></I></B><br>
<font class="fa fa-pull-left" title="spade">&#9824;</font>$40 entry fee, $20 re-buys for first hour, $500 to sponsor a VIP table (Seats up to 10; all entry fees covered)<br>
<font class="fa fa-pull-left" title="heart" style="color:red">&#9829;</font>Money goes towards our 12 yearly scholarships for inner city youths<br>
<font class="fa fa-pull-left" title="club">&#9827;</font>Tutorial table for beginners & VIP tables for sponsors for first round only<br>
<font class="fa fa-pull-left" title="diamond" style="color:red">&#9830;</font>There will be prizes for 1st, 2nd, & 3rd place<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i>One free drink for each contestant<br><br>

<B><I><U>KARAOKE "TOURNAMENT"</U></I></B><br>
<font class="fa fa-pull-left" title="music1">&#9836;</font>Free entry fee<br>
<font class="fa fa-pull-left" title="music2">&#9834;</font>Thousands of songs to choose from<br>
<font class="fa fa-pull-left" title="music3">&#9839;</font>A completely inaccurate system for judging the winners<br>
<font class="fa fa-pull-left" title="music4">&#9835;</font>Absolutely no prizes for 1st, 2nd, & 3rd place<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i><i>Each contestant gets a free shot!</i>

</td></tr></table>

<span style="display:none;">10 September 2016</span>
</div>

  <div class="date">

<br><br>

<table width="940" style="border:2px solid black; padding:0; font-family:arial;" cellspacing="1"><tr><td height="30" class="blackback" style=" color:white;letter-spacing:4px; font-family:arial; font-size:13px;" align="center"><span class="two" style="float:left;margin-left:15px;">march</span><span style="margin-left:-110px;">TEAM INTRODUCTIONS + SILENT AUCTION</span>
</td></tr><tr><td valign="top" style="padding:20px;" class="whiteback listinfo">

<i class="fa fa-calendar fa-pull-left"></i><b>date:</b> First Saturday in March<br>
<i class="fa fa-location-arrow fa-pull-left"></i><b>location:</b> TBD<br>
<i class="fa fa-laptop fa-pull-left"></i><b>RSVP: </b><a href="http://bookeo.com/50allstars?category=2116F3FWR1559DE0339F&initialview=oneOffEvents" class="redlink">Book your spot</a><br>
<i class="fa fa-user fa-pull-left"></i><b>Attendees:</b> Casual dress, adults only, please RSVP<br>
<i class="fa fa-user-plus fa-pull-left"></i><b>Guests: </b><i>Bring your friends!</i> Purchase a sponsored VIP table to ensure you're all sat together<br>
<i class="fa fa-car fa-pull-left"></i><b>carpool: </b>If you're planning to drink and are not planning to uber home, we can easily provide rides<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i>Alcohol will be available for purchase<br><br>

<B><I><U>POKER TOURNAMENT</U></I></B><br>
<font class="fa fa-pull-left" title="spade">&#9824;</font>$40 entry fee, $20 re-buys for first hour, $500 to sponsor a VIP table (Seats up to 10; all entry fees covered)<br>
<font class="fa fa-pull-left" title="heart" style="color:red">&#9829;</font>Money goes towards our 12 yearly scholarships for inner city youths<br>
<font class="fa fa-pull-left" title="club">&#9827;</font>Tutorial table for beginners & VIP tables for sponsors for first round only<br>
<font class="fa fa-pull-left" title="diamond" style="color:red">&#9830;</font>There will be prizes for 1st, 2nd, & 3rd place<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i>One free drink for each contestant<br><br>

<B><I><U>KARAOKE "TOURNAMENT"</U></I></B><br>
<font class="fa fa-pull-left" title="music1">&#9836;</font>Free entry fee<br>
<font class="fa fa-pull-left" title="music2">&#9834;</font>Thousands of songs to choose from<br>
<font class="fa fa-pull-left" title="music3">&#9839;</font>A completely inaccurate system for judging the winners<br>
<font class="fa fa-pull-left" title="music4">&#9835;</font>Absolutely no prizes for 1st, 2nd, & 3rd place<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i><i>Each contestant gets a free shot!</i>

</td></tr></table>

<span style="display:none;">5 March 2016</span>
</div>

  <div class="date">

<br><br>

<table width="940" style="border:2px solid black; padding:0; font-family:arial;" cellspacing="1"><tr><td height="30" class="blackback" style=" color:white;letter-spacing:4px; font-family:arial; font-size:13px;" align="center"><span class="two" style="float:left;margin-left:15px;">JUNE</span><span style="margin-left:-110px;">BBQ/POOL PARTY + SWIM TOURNAMENT</span>
</td></tr><tr><td valign="top" style="padding:20px;" class="whiteback listinfo">

<i class="fa fa-calendar fa-pull-left"></i><b>date:</b> First Saturday after June<br>
<i class="fa fa-location-arrow fa-pull-left"></i><b>location:</b> TBD<br>
<i class="fa fa-laptop fa-pull-left"></i><b>RSVP: </b><a href="http://bookeo.com/50allstars?category=2116F3FWR1559DE0339F&initialview=oneOffEvents" class="redlink">Book your spot</a><br>
<i class="fa fa-user fa-pull-left"></i><b>Attendees:</b> Casual dress, adults only, please RSVP<br>
<i class="fa fa-user-plus fa-pull-left"></i><b>Guests: </b><i>Bring your friends!</i> Purchase a sponsored VIP table to ensure you're all seated together<br>
<i class="fa fa-car fa-pull-left"></i><b>carpool: </b>If you're planning to drink and are not planning to uber home, we can easily provide rides<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i>Alcohol will be available for purchase<br><br>

<B><I><U>POKER TOURNAMENT</U></I></B><br>
<font class="fa fa-pull-left" title="spade">&#9824;</font>$40 entry fee, $20 re-buys for first hour, $500 to sponsor a VIP table (Seats up to 10; all entry fees covered)<br>
<font class="fa fa-pull-left" title="heart" style="color:red">&#9829;</font>Money goes towards our 12 yearly scholarships for inner city youths<br>
<font class="fa fa-pull-left" title="club">&#9827;</font>Tutorial table for beginners & VIP tables for sponsors for first round only<br>
<font class="fa fa-pull-left" title="diamond" style="color:red">&#9830;</font>There will be prizes for 1st, 2nd, & 3rd place<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i>One free drink for each contestant<br><br>

<B><I><U>KARAOKE "TOURNAMENT"</U></I></B><br>
<font class="fa fa-pull-left" title="music1">&#9836;</font>Free entry fee<br>
<font class="fa fa-pull-left" title="music2">&#9834;</font>Thousands of songs to choose from<br>
<font class="fa fa-pull-left" title="music3">&#9839;</font>A completely inaccurate system for judging the winners<br>
<font class="fa fa-pull-left" title="music4">&#9835;</font>Absolutely no prizes for 1st, 2nd, & 3rd place<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i><i>Each contestant gets a free shot!</i>

</td></tr></table>

<span style="display:none;">3 June 2016</span>
</div>

  <div class="date">

<br><br>

<table width="940" style="border:2px solid black; padding:0; font-family:arial;" cellspacing="1"><tr><td height="30" class="blackback" style=" color:white;letter-spacing:4px; font-family:arial; font-size:13px;" align="center"><span class="two" style="float:left;margin-left:15px;">December</span><span style="margin-left:-110px;">AWARDS CEREMONY + FREE THROW CONTEST</span>
</td></tr><tr><td valign="top" style="padding:20px;" class="whiteback listinfo">

<i class="fa fa-calendar fa-pull-left"></i><b>date:</b> Second Sunday in December<br>
<i class="fa fa-location-arrow fa-pull-left"></i><b>location:</b> TBD<br>
<i class="fa fa-laptop fa-pull-left"></i><b>RSVP: </b><a href="http://bookeo.com/50allstars?category=2116F3FWR1559DE0339F&initialview=oneOffEvents" class="redlink">Book your spot</a><br>
<i class="fa fa-user fa-pull-left"></i><b>Attendees:</b> Casual dress, adults only, please RSVP<br>
<i class="fa fa-user-plus fa-pull-left"></i><b>Guests: </b><i>Bring your friends!</i> Purchase a sponsored VIP table to ensure you're all sat together<br>
<i class="fa fa-car fa-pull-left"></i><b>carpool: </b>If you're planning to drink and are not planning to uber home, we can easily provide rides<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i>Alcohol will be available for purchase<br><br>

<B><I><U>POKER TOURNAMENT</U></I></B><br>
<font class="fa fa-pull-left" title="spade">&#9824;</font>$40 entry fee, $20 re-buys for first hour, $500 to sponsor a VIP table (Seats up to 10; all entry fees covered)<br>
<font class="fa fa-pull-left" title="heart" style="color:red">&#9829;</font>Money goes towards our 12 yearly scholarships for inner city youths<br>
<font class="fa fa-pull-left" title="club">&#9827;</font>Tutorial table for beginners & VIP tables for sponsors for first round only<br>
<font class="fa fa-pull-left" title="diamond" style="color:red">&#9830;</font>There will be prizes for 1st, 2nd, & 3rd place<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i>One free drink for each contestant<br><br>

<B><I><U>KARAOKE "TOURNAMENT"</U></I></B><br>
<font class="fa fa-pull-left" title="music1">&#9836;</font>Free entry fee<br>
<font class="fa fa-pull-left" title="music2">&#9834;</font>Thousands of songs to choose from<br>
<font class="fa fa-pull-left" title="music3">&#9839;</font>A completely inaccurate system for judging the winners<br>
<font class="fa fa-pull-left" title="music4">&#9835;</font>Absolutely no prizes for 1st, 2nd, & 3rd place<br>
<i class="fa fa-glass fa-pull-left" title="glass"></i><i>Each contestant gets a free shot!</i>

</td></tr></table>

<span style="display:none;">10 Dec 2016</span>
</div>

</div>

<script type="text/javascript">
        var now = new Date();
$(".date").sort(function(a, b) {
  var aDiff = new Date($(a).text().trim()) - now;
  var bDiff = new Date($(b).text().trim()) - now;
  return aDiff < bDiff ? -1 : aDiff > bDiff ? 1 : 0;
}).appendTo('#dates').filter(function() {
  return new Date($(this).text().trim()) - now < 0;
}).appendTo('#dates');
    </script>

</center>

Jon_7 0 Light Poster · Answer 5 · 2016-08-02T17:17:24+00:00

jkon, thank you sooooooo much. Not sure how you could possibly be so smart, but I'd like to pay you for your overly kind assistance. Inbox me your paypal, and I'll forward you a few bucks.

I did have to alter your code to ensure that next year's dates would be in order (March, and then June) by switching b-a to a-b,

        if(pastTimeStamps.length > 0) // if there are pastTimeStamps 
        {
            // we will sort the past timestamps from greatest to least  
            pastTimeStamps.sort( function(a, b) { return a - b; } );
            for(var i = 0; i < pastTimeStamps.length; i++) // iterate through pastTimeStamps

but then I figured out that the biggest remaining issue is that I've have to switch the dates each year. In trying to make this as automatedly self-reliant as possible, you've finally helped me get from changing it once every 4 months to changing it just once a year, but I'd like to know if there's any way to at least disregard the year portion of the formula or a way to use something like getfullyear() to populate that portion of the code. Just as long as all 4 events are this year, the code works perfectly.

To be absolutely clear, these are the only 4 events I plan on having on this page and I plan to have them each year. If I add any, they definitely won't be on the same day.

Thanks again for the tremendous help, especially in marking up the code with explanations. That means more to me than anything, as I take a certain satisfaction in figuring things out myself. I'm just kinda up against the clock on this one, and I've done sooooo much googling to no avail. You're awesome, man.

jkon 602 Posting Whiz in Training Featured Poster · Answer 6 · 2016-08-02T18:17:07+00:00

Hello Jon_1

Thank you for your remarks , don't mention paying (we are not here for that), you look like you really read the answers and hopefully this might help you get introduced to programming (this is more than enough payment for me). Back to business ;)

Do you mean that the year doesn't play any role ? Are those events in the same dates each year? How do you define a year , clearly not from January 1 to 31 December , could your definition has anything to do with “school year” and if so when that year begins normally (1 of September ?). Also I didn't quite got how do you want the past events to be sorted. Normally you go from the most recent one to the oldest but then you mentioned that you changed the order in the array sort , so what is it?

For example if today is 1 of May and I have 5 events (25 September , 10 Octomber , 2 February , 1 of June and 15 of June) in what order should those appear ?

I will give you a more generic answer after those responses but try also your self some experiments , what ever you don't understand in any code don't leave for later , ask now to be clarified.

jkon 602 Posting Whiz in Training Featured Poster · Answer 7 · 2016-08-02T19:10:12+00:00

I will give it a shoot because probably I got what you meant.
First in HTML from:

<div class="date" data-date="10 September 2016">
    ...
</div>

We change to:

<div class="date" data-date="10 September">
    ...
</div>

Time for JavaScript:

$( document ).ready(function() {
        /*
            This will tell jQuery to execute anything in this code block
            when the document is ready 
        */
        sortDateDivs(); // A custom function that will do the work 
});

function sortDateDivs()
{
    /*
        We will use two base years , we have to use two NOT LEAP years      
        will go with 1977 and 1979   
    */
    var currentBaseYear = 1977;
    var nextBaseYear = 1979; 

    var now = new Date(); // A JS Date object with the current date time 
    now.setYear( currentBaseYear );
    var nowTimeStamp = now.getTime();

    var $dateDivs = {}; // An associative array (js object) having as key the 
    // millisecond of each div (through the data-date attribute) and as value 
    // the jQuery div date DOM object.   
    var timeStamps = []; // An array containing the date (in milliseconds) 
    // for events future events will have as year the currentBaseYear and past 
    // events will have as year the nextBaseYear 

    if($("#dates>.date").length > 0) // if there are dates 
    {
        $("#dates>.date").each(function(){ // We will iterate through the date divs 
            var $dateDiv = $(this); // The current Date Dom object (as jQuery parsed)
            if($dateDiv.data("date") != undefined) // if the $dateDiv object has a date data
            {
                var date = new Date( $dateDiv.data("date") + " " +  currentBaseYear); 
                // The date JS obj from the data-date attribute 
                var timeStamp = date.getTime();
                if(timeStamp < nowTimeStamp)
                {
                    date.setYear(nextBaseYear); 
                    timeStamp = date.getTime();
                    // What we have done here is that IF it is a past event it will 
                    // be put as a next event in the next base year. 
                }

                while(timeStamp in $dateDivs)
                {

                    timeStamp++; // You might have two event in the same day , 
                    // but their key must be different 
                    // YES YOU CAN have two events in the same day if you like
                }

                $dateDivs[timeStamp] = $dateDiv; // putting the jQuery parsed DOM object
                // in the associative array (js object)
                timeStamps.push(timeStamp);
            }
        });

        if(timeStamps.length > 0) // if there are timeStamps 
        {
            // we will sort the timestamps from least to greatest   
            timeStamps.sort( function(a, b) { return a - b; } );
            for(var i = 0; i < timeStamps.length; i++) // iterate through timeStamps
            {
                $("#dates").append( $dateDivs[ timeStamps[i] ] );
                // Here we take the $dateDiv from the $dateDivs , it has as key 
                // the timeStamp we have put in timeStamps array 
                // NOTICE ! Appending it means that we remove it from where it currently
                // is and we put it in a new position in the DOM tree 
            }
        }

        //DONE
    }
}

Jon_7 0 Light Poster · Answer 8 · 2016-08-02T19:15:02+00:00

Yes, that is EXACTLY what I meant! You are a coding god! Thank you so much. I'm not sure what I could ever do for you, but let me know if there's anything you ever need. Have a great day!

Sort Cyclical Upcoming Event Divs Based on Today's Date

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers