I’m trying to create a feature for my HTML/JavaScript timeline to sort the entries

Question

0

Asked: June 13, 20262026-06-13T19:25:36+00:00 2026-06-13T19:25:36+00:00

I’m trying to create a feature for my HTML/JavaScript timeline to sort the entries

0

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.

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

HTML

<div id="containertop" >
    <a href="#">Newest First</a><br>
    <a href="#">Oldest First</a>
</div>
  <div id="container">

       <div class="timeline_container">
            <div class="timeline">
                <div class="plus"></div>
            </div>
        </div>

      <div class="item ">
           <a href='#' class='deletebox'>X</a>
          <div><div id="date">12/10/2012</div>
              <div id="content">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.
</div>
</div>
          </div>
<div class="item ">
 <a href='#' class='deletebox'>X</a>
          <div><div id="date">17/10/2011</div>
              <div id="content">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.
</div>
        </div>        
      </div>
      <div class="item ">
 <a href='#' class='deletebox'>X</a>
              <div>
       <div id="date">10/10/2011</div>
                  <div id="content">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.
</div>
         </div>
      </div>


      <div class="item">
 <a href='#' class='deletebox'>X</a>
              <div>
                  <div id="date">02/12/2011</div>
                  <div id="content">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.
</div>
    <br/><br/>
                <script type="text/javascript"><!--
                google_ad_client = "ca-pub-6904774409601870";
                /* newtwitter */
                google_ad_slot = "7972402542";
                google_ad_width = 336;
                google_ad_height = 280;
                //-->
                </script>
                <script type="text/javascript"
                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
              </div>        
          </div>
        <div class="item">
     <a href='#' class='deletebox'>X</a>
                  <div>

                    <div id="date">13/10/2013</div>

                      <div id="content">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.
</div>

                  </div>        
              </div>
      <div class="item">
 <a href='#' class='deletebox'>X</a>
              <div>
                  <div id="date">12/10/2014</div>
                  <div id="content">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.
</div>
      </div>


    </div>


    </div>

CSS

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
}

JS

$(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 = "<span class='rightCorner'></span>";
                $(obj).prepend(html);
            }
            else {
                html = "<span class='leftCorner'></span>";
                $(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('<div class="item"><a href="#" class="deletebox">X</a><div>' + x + '</div></div>');

        //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();

    });


});

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-13T19:25:38+00:00

After switching all the id="date"‘s to class="date"‘s, you should do something like:

—> This Here JSFiddle <—

or see below…

$(function(){
    var itemsArray = $('div.item');
    itemsArray.sort(function(a,b){
        var aTime = new Date($(a).find('.date').text()).getTime();
        var bTime = new Date($(b).find('.date').text()).getTime();
        return aTime - bTime;
    });

    $('#sortAsc').click(function(){
        $("#container").empty();
        $(itemsArray).each(function(){
            $("#container").prepend($(this));
        });
    });

    $('#sortDesc').click(function(){
        $("#container").empty();
        $(itemsArray).each(function(){
            $("#container").append($(this));
        });
    });
})

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I’m trying to create a feature for my HTML/JavaScript timeline to sort the entries

Leave an answerCancel reply

1 Answer

—> This Here JSFiddle <—

Leave an answer
Cancel reply