Darren Ferguson - Weblog

06 July 2009

Quick tip: jQuery to replace lists with selects when your lists are getting long

Filed under: Misc - by Darren Ferguson @ 21:06

My list of archived content by month in the right hand side navigation of this page was getting a little long. The following jQuery script replaces the un-ordered list with a select input which takes up much less page real estate.

The page still looks the same to any passing search engines though.


var archiveContent = '';

$("li[class='archive']").each(function() {
    archiveContent += '\n';
    $(this).remove();
});

archiveContent = '
  • \n
    • ';

$('#archiveHeader').after(archiveContent);

$('#archiveSubmit').click(function() {
    window.location.href = $('#archiveSelect').val();
    return false;
});

    4 comments for “Quick tip: jQuery to replace lists with selects when your lists are getting long” Comments RSS

    1. Petr Snobelt says:

      Gravatar of Petr SnobeltYou can create expandable tree with year and month.

      07 July 2009 at 07:53:37

    2. Darren Ferguson says:

      Gravatar of Darren Ferguson@Petr - sure, that would work, but I'm trying to save space on my page. Once the tree gets expanded I lose all the space I've reclaimed again!

      07 July 2009 at 09:02:51

    3. Jagadeesh Raju says:

      Gravatar of Jagadeesh RajuHi Darren,
      Do you have any to achieve jquery datepicker in Teamsite.

      13 August 2009 at 07:19:39

    4. Darren Ferguson says:

      Gravatar of Darren Ferguson@Jagadeesh - Sure, please email me using the details on my profile page and I will send you a price.

      Please don't spam my blog with multiple identical comments.

      Thanks.

      13 August 2009 at 08:32:12

    Leave a comment