HTML lists with jQuery for mobile devices

Recently I had to transform a group of li elements into an accordion for a mobile version of a client website. So this is what I came up with.

I had an html that looked like this

<ul>
<li><span>Category1</span>
  <ul>
    <li>Subcategory1</li>
    <li>Subcategory2</li>
  </ul>
</li>
<li><span>Category2</span>
  <ul>
    <li>Subcategory</li>
    <li>Subcategory1</li>
  </ul>
</li>
 
</ul>

And I wanted to collapse all the subcategories on load leaving only the categories visible and when they click/touched each category subcategories will expand. So I wrote this script based off from Sam Croft script.

(function($){
  $.fn.accordion = function() {
    var el = this;
    var catHeight;
    catHeight = new Array();
 
    el.find('.category ul').each(function(i){
      var category = $(this);
      catHeight[i] = category.height();
      category.addClass('closed')
 
    });
 
      el.find('.category-header ').bind('touchstart', function(e) {
        e.preventDefault();
        var toExpand = $(this).next('ul');
        var i = toExpand.index('li ul');
 
        if (toExpand.attr('id') == 'active') {
          toExpand
          .removeAttr('id')
          .removeAttr('style')
          .addClass('closed');
 
        } else {
        var active = $('#active')
 
        if (active.length > 0) {
          active
          .removeAttr('id')
          .removeAttr('style')
          .addClass('closed');
        }
 
        toExpand
        .attr('id', 'active')
        .css('height', catHeight[i]+'px')
        .removeClass('closed');
 
      }
  });
}
})(jQuery);

And with this script I had to modify my html lists to look like this

<ul class="list">
<li class="category"><a class="category-header" href="#">Category1</a>
  <ul>
    <li>Subcategory1</li>
    <li>Subcategory2</li>
  </ul>
</li>
<li class="category"><a class="category-header" href="#">Category2</a>
  <ul>
    <li>Subcategory</li>
    <li>Subcategory1</li>
  </ul>
</li>
 
</ul>

My css file

.closed {  height: 0; display:none;}
#active{display:block}

Usage

$(document).ready(function() {
  $('.list').accordion();
})

You can see a working example here.

 

Android SDK and Local Testing

It’s been awhile since I installed the Android SDK, today I’m starting a new android app so I updated to the latest version. To my surprise the tools have moved to different folders so just as I was ready to start testing locally I couldn’t find adb (adroid debugger bridge) in the tools folder, turns out it’s now located in the plataform-tools folder.

Here are the steps I’m using:

First you have to create an Android Virtual Device. Star the Android SDK Manager

android:~$ cd tools
tools:~$ ./android

Download the Android API you need or download them all
download android api

Create your Android Virtual Device
create android virtual device

Now you could start you virtual device from the SDK Manager but I prefer to do it from the shell since I’m able to add command options like

  • -wipe-data (To erase data stored from previous sessions)
  • -shell (So I can edit the /etc/hosts file later)
  • -no-boot-anim (It helps the emulator to boot up faster)
  • -noskin (It minimizes memory consumption)
  tools:~$ ./emulator -avd test -wipe-data -shell -no-boot-anim -noskin

Open a new shell tab and go to the platform-tools folder and remount the image with the Android Debugger Bridge. This is to get rid of the file write permissions issue.

$ cd platform-tools
platform-tools:~$./adb remount

Now go back to the tab where we started out emulator and edit the hosts file to point to a local domain. It’s important to mention that the /etc/hosts file in the emulator is different from then system /etc/hosts. Replace example.com to your desired local domain

tools:~$ echo '10.0.2.2 example.com' >> /etc/hosts

And that’s it. Now you can browse example.com locally. Hope it helps someone.