Darren Ferguson - Blog

06 July 2009 at 21:06

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

Tags: less page real estate , search engines , Technology Internet , Human Interest , Business Finance , Entertainment Culture
Author: Darren Ferguson

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 += '<option value="'+$('a:first', this).attr('href') 
        +'">'+$('a:first', this).html()+'</option>\n';
    $(this).remove();
});

archiveContent = '<li>\n<form id="archiveForm"><select 
    id="archiveSelect">\n'+archiveContent;
archiveContent += '</select><input type="submit" value="go" 
    class="submit" id="archiveSubmit"/></form></li>';

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

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

Written by: Darren Ferguson

Comments

  1. Petr Snobelt says:

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

    07 July 2009 at 07:53

  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

  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

  4. Darren Ferguson (1) says:

    Gravatar of Darren Ferguson (1)@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

Leave a comment