Sorting HTML/JavaScript timeline by date (sort by oldest/newest)
<p>I'm trying to create a feature for my HTML/JavaScript timeline to sort the entries by newest date (UK format) on page load and give the user the option to sort the time line entries by newest/oldest entries. </p>

<p>How would I accomplish this? I would like all divs with the date id i.e. <code>&lt;div id="date"&gt;17/10/2011&lt;/div&gt;</code> to be sorted (with a brief animation while sorting). This is what I've done so far: <a href="http://jsfiddle.net/Rf5ww/1/" rel="nofollow">http://jsfiddle.net/Rf5ww/1/</a></p>

<p>HTML</p>

<pre><code>&lt;div id="containertop" &gt;
    &lt;a href="#"&gt;Newest First&lt;/a&gt;&lt;br&gt;
    &lt;a href="#"&gt;Oldest First&lt;/a&gt;
&lt;/div&gt;
  &lt;div id="container"&gt;

       &lt;div class="timeline_container"&gt;
            &lt;div class="timeline"&gt;
                &lt;div class="plus"&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

      &lt;div class="item "&gt;
           &lt;a href='#' class='deletebox'&gt;X&lt;/a&gt;
          &lt;div&gt;&lt;div id="date"&gt;12/10/2012&lt;/div&gt;
              &lt;div id="content"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices.
&lt;/div&gt;
&lt;/div&gt;
          &lt;/div&gt;
&lt;div class="item "&gt;
 &lt;a href='#' class='deletebox'&gt;X&lt;/a&gt;
          &lt;div&gt;&lt;div id="date"&gt;17/10/2011&lt;/div&gt;
              &lt;div id="content"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices.
&lt;/div&gt;
        &lt;/div&gt;        
      &lt;/div&gt;
      &lt;div class="item "&gt;
 &lt;a href='#' class='deletebox'&gt;X&lt;/a&gt;
              &lt;div&gt;
       &lt;div id="date"&gt;10/10/2011&lt;/div&gt;
                  &lt;div id="content"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices.
&lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;


      &lt;div class="item"&gt;
 &lt;a href='#' class='deletebox'&gt;X&lt;/a&gt;
              &lt;div&gt;
                  &lt;div id="date"&gt;02/12/2011&lt;/div&gt;
                  &lt;div id="content"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices.
&lt;/div&gt;
    &lt;br/&gt;&lt;br/&gt;
                &lt;script type="text/javascript"&gt;&lt;!--
                google_ad_client = "ca-pub-6904774409601870";
                /* newtwitter */
                google_ad_slot = "7972402542";
                google_ad_width = 336;
                google_ad_height = 280;
                //--&gt;
                &lt;/script&gt;
                &lt;script type="text/javascript"
                src="http://pagead2.googlesyndication.com/pagead/show_ads.js"&gt;
                &lt;/script&gt;
              &lt;/div&gt;        
          &lt;/div&gt;
        &lt;div class="item"&gt;
     &lt;a href='#' class='deletebox'&gt;X&lt;/a&gt;
                  &lt;div&gt;

                    &lt;div id="date"&gt;13/10/2013&lt;/div&gt;

                      &lt;div id="content"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices.
&lt;/div&gt;

                  &lt;/div&gt;        
              &lt;/div&gt;
      &lt;div class="item"&gt;
 &lt;a href='#' class='deletebox'&gt;X&lt;/a&gt;
              &lt;div&gt;
                  &lt;div id="date"&gt;12/10/2014&lt;/div&gt;
                  &lt;div id="content"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices.
&lt;/div&gt;
      &lt;/div&gt;


    &lt;/div&gt;


    &lt;/div&gt;​
</code></pre>

<p>CSS </p>

<pre><code>body { background-color: #E7EBF2; font-family:arial; font-size:13px }
#container, #containertop    {    width:860px; margin: 0 auto;     }

.borderclass { border:1px solid #A9B6D2; }
.item {
  width: 408px;
  margin: 10px;
  float: left;
  margin-top:10px;
  background-color:#ffffff;
  border:solid 1px #B4BBCD;
min-height:50px;
text-align:justify;
word-wrap:break-word; 
}
.topbox
{
margin: 10px;


margin-top: 10px;
background-color: white;
border: solid 1px #B4BBCD;

}


.item div, .topbox div
{
padding:8px;    
}
.rightCorner { 
    background-image: url("images/right.png");
    display: block;
    height: 15px;
    margin-left: 408px;
    margin-top: 8px;
    padding: 0;
    vertical-align: top;
    width: 13px;
z-index:2;

    position: absolute;
}
.leftCorner{
background-image: url("images/left.png");
display: block;
height: 15px;
width: 13px;
margin-left: -13px;
margin-top: 8px;
position: absolute;
z-index:2;
}
#popup{ display: block; 
 width: 408px;
  float: left;
  margin-top:10px;
  background-color:#ffffff;
  border:solid 1px #A9B6D2;
  min-height:60px;
  display:none;
  position:absolute;
  margin:10px;
 }
.Popup_rightCorner
{
background-image: url("images/right.png");
    display: block;
    height: 15px;
    margin-left: 408px;
    margin-top: 8px;
    padding: 0;
    vertical-align: top;
    width: 13px;
z-index:2;

    position: absolute;
}
 #box
{
padding:8px;    

}
#update
{
width:100%;
}

 .timeline_container{
                width: 16px;
                text-align: center;
                margin: 0 auto;
                cursor:pointer;
                    display: block;
            }
            .timeline{

                margin: 0 auto;
                 background-color:#e08989;
    display: block;
    float: left;
    height: 100%;
    left: 428px;
    margin-top: 10px;
    position: absolute;
    width: 4px;
            }
            .timeline:hover{
                cursor: pointer;
                margin: 0 auto;
            }
            .timeline div.plus{
                width: 14px;
                height: 14px;

                position: relative;
                left: -6px;
            }
            #update_button {
background-color: #cc0000;
color: white;
font-weight: bold;
padding: 5px;
border: solid 1px #333;
margin-top: 5px;
cursor: pointer;
}
.shade{box-shadow:0px 0px 18px #000;-moz-box-shadow:0px 0px 18px #000;-webkit-box-shadow:0px 0px 18px #000}
h1{ font-family: 'Georgia',Times New Roman; }
.timeline:hover
{
cursor: none;
}
.deletebox
{
font-weight:bold;
float:right;
text-decoration:none;
margin:8px 10px 8px 10px;
color:#cc0000
}​
</code></pre>

<p>JS</p>

<pre><code>$(document).ready(function() {


    function Arrow_Points() {
        var s = $('#container').find('.item');
        $.each(s, function(i, obj) {
            var posLeft = $(obj).css("left");
            $(obj).addClass('borderclass');
            if (posLeft == "0px") {
                html = "&lt;span class='rightCorner'&gt;&lt;/span&gt;";
                $(obj).prepend(html);
            }
            else {
                html = "&lt;span class='leftCorner'&gt;&lt;/span&gt;";
                $(obj).prepend(html);
            }
        });
    }

    $('.timeline_container').mousemove(function(e) {
        var topdiv = $("#containertop").height();
        var pag = e.pageY - topdiv - 26;
        $('.plus').css({
            "top": pag + "px",
            "background": "url('images/plus.png')",
            "margin-left": "1px"
        });
    }).
    mouseout(function() {
        $('.plus').css({
            "background": "url('')"
        });
    });



    $("#update_button").live('click', function() {
        var x = $("#update").val();
        $("#container").prepend('&lt;div class="item"&gt;&lt;a href="#" class="deletebox"&gt;X&lt;/a&gt;&lt;div&gt;' + x + '&lt;/div&gt;&lt;/div&gt;');

        //Reload masonry
        $('#container').masonry('reload');

        $('.rightCorner').hide();
        $('.leftCorner').hide();
        Arrow_Points();

        $("#update").val('');
        $("#popup").hide();
        return false;
    });

    // Divs
    $('#container').masonry({
        itemSelector: '.item',
    });
    Arrow_Points();

    //Mouseup textarea false
    $("#popup").mouseup(function() {
        return false
    });

    $(".timeline_container").click(function(e) {
        var topdiv = $("#containertop").height();
        $("#popup").css({
            'top': (e.pageY - topdiv - 33) + 'px'
        });
        $("#popup").fadeIn();
        $("#update").focus();


    });


    $(".deletebox").live('click', function() {
        if (confirm("Are your sure?")) {
            $(this).parent().fadeOut('slow');
            //Remove item
            $('#container').masonry('remove', $(this).parent());
            //Reload masonry
            $('#container').masonry('reload');
            $('.rightCorner').hide();
            $('.leftCorner').hide();
            Arrow_Points();
        }
        return false;
    });



    //Textarea without editing.
    $(document).mouseup(function() {
        $('#popup').hide();

    });


});​
</code></pre>
