BearPanther.com

Alphabetize Fitocracy Activities

Introduction

user

bear


LATEST POSTS

Using jsformat with Sublime Text 26th July, 2014

There are many d3 demos like this but this one is mine 08th June, 2014

Blog

Alphabetize Fitocracy Activities

Posted on .

Any Fitocracy users out there? I started using it earlier this year and it’s become my go to place to track my workouts.

One thing that irks me about the site is that activities in the performance section are sorted by the number of times you’ve done an activity. Because activities in the list have a title attribute, you can see how many times you’ve done an activity by hovering over an activity. While workable, it’s cumbersome to use. It’s nearly impossible to quickly scan the list and find a specific activity. Here’s a screen shot of what the activities drop down looks like for me by default:
Fitocracy Activities Default

Since everything on the page is html/css/js, we can improve this with a little JavaScript. I googled around a bit and an answer on Stack Overflow provided a nice start. Here’s what I came up with:

(function () {
  var h = document.getElementById("history_activity_chooser"),
    ha = [];
  for (var i = 0, il = h.length; i < il; i++) {
    ha[i] = h.options[i].text.toUpperCase() + "," + 
      h.options[i].text + "," + 
      h.options[i].value + "," + 
      h.options[i].id + "," + 
      h.options[i].title;
  }
  ha.sort();
  for (i = 0; i < ha.length; i++) {
    var parts = ha[i].split(",");
    h.options[i].text = parts[1];
    h.options[i].value = parts[2];
    h.options[i].id = parts[3];
    h.options[i].title = parts[4];
  }
})();

That works pretty well but who wants to open a JS console, copy/paste some code and run it just to alphabetize a list? The solution? A bookmarklet!

The easiest way to use this is to create a new bookmark (I prefer on my bookmarks bar) then edit is so that the URL for the bookmark is the JS that alphabetizes the activity list. Once you’ve got a bookmark, edit it so that the URL is this:

javascript:(function() {var h = document.getElementById("history_activity_chooser"), ha = []; for (var i = 0, il = h.length; i < il; i++) {ha[i] = h.options[i].text.toUpperCase() + "," + h.options[i].text + "," + h.options[i].value + "," + h.options[i].id + "," + h.options[i].title; } ha.sort(); for (i = 0; i < ha.length; i++) {var parts = ha[i].split(","); h.options[i].text = parts[1]; h.options[i].value = parts[2]; h.options[i].id = parts[3]; h.options[i].title = parts[4]; } })();

Once you’ve done that, go to your Fitocracy performance page and click the bookmark. Activities will now be listed in alphabetical order. Here’s how mine look after running the bookmarklet:
Alphabetized Fitocracy Activities

As for the reason, I didn’t make a link that you can drag to your bookmarks bar to install the bookmarklet? WordPress doesn’t like that.

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (0) ...