Home/ Questions/Q 7930875
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T20:33:26+00:00

Lets say we have this markup: <div id=container> <ul></ul> <ul></ul> </div> Where the format

  • 0

Lets say we have this markup:

<div id="container">
    <ul></ul>
    <ul></ul>
</div>

Where the format of the <li> are such as:

<ul>
   <li>
     <span class="title">Title of the article</span>
     <span class="date" data-value="[TIMESTAMP]">Pretty Date</span>
   </li>
</ul>

What i need to do is:

  • If the viewport width is big enough: show both lists

  • If the viewport width is small: merge both lists by date

    var min = 760; $(window).resize(function(){
    var width = $(window).width();
    if(width <= min){
    merge_lists();
    } });

where i have some trouble figuring out how to do it:

function merge_lists(){
     /* shall i run 2 .each function and store it in an array, order by date (how?) and
        regenerate a new list?
      */
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you like something like this:

    HTML:

    <div id="container">
    <ul>
        <li>
         <span class="title">Title of the article</span>
         <span class="date" data-value="2012/05/01">2012/05/01</span>
       </li>
    </ul>
    <ul>
        <li>
         <span class="title">Title of the article</span>
         <span class="date" data-value="2012/05/05">2012/05/05</span>
       </li>
    </ul>
    <ul>
        <li>
         <span class="title">Title of the article</span>
         <span class="date" data-value="2012/04/10">2012/04/10</span>
       </li>
    </ul>
</div>

    jQuery:

    var mainlists = $('#container ul'),
    min = 550;

function merge_lists() {
     if (!$('#container').hasClass('merged')) {
        var temp = mainlists.clone(true),
            lists = $('li', temp);
        lists.sort(function(a, b) {
            var d1 = $('span.date', a).data('value'),
                d2 = $('span.date', b).data('value');
            if (new Date(d1).getTime() > new Date(d2).getTime()) return 1;
        });
        $('#container').empty().append($('<ul>', {
            html: lists
        }));
        $('#container').addClass('merged');
    }
}

function restore_lists() {
    if ($('#container').hasClass('merged')) {
       $('#container').empty().append(mainlists.clone(true));
       $('#container').removeClass('merged');
    }
}

$(window).resize(function() {
    var winWidth = $(window).width(),
        winHeight = $(window).height();
    $('#resolution').html(winWidth + 'px x ' + winHeight + 'px');
    if (winWidth < min) {
        merge_lists();
        $('body').css('background', '#ddd');
    } else {
        restore_lists();
        $('body').css('background', '#fff');
    }
});

    DEMO

    • 0