Thursday, December 11, 2014

Making Lists into To-Do Lists with jQuery

I have a folder containing several procedures that are in written with HTML lists. I wanted a way to quickly modify them so that I could check off each line item as I went through the procedure. And as I checked off the line items, I wanted it to strike through the text to make it clearer that that step had been done.

The first thing I did was define a CSS class:

.strikethrough {
    text-decoration: line-through;
}

Then I added this JavaScript to my header file:

function strikethrough(element) {
    var $checkbox = $(element);
    if ($checkbox.prop("checked")) {
        $checkbox.parent().addClass("strikethrough");
    }
    else {
       $checkbox.parent().removeClass("strikethrough");
    }
}
$(function() {
    var checkboxCode = "<input type='checkbox' onclick='strikethrough(this)' style='margin-right: 10px' title='Mark this item done' />";
    $("li").each(function() {
        $(this).html(checkboxCode + $(this).html());
    });
});
Here is a demo on CodePen along with the source.

Tuesday, September 23, 2014

A Better Geolocation Prompt

Derek Featherstone makes a good point: The current implementation of the geolocation prompt on most browsers does not give enough information. Wouldn't it be nice if we could provide more information to the user as to why we need this information from them? I would love to see something in JavaScript like this:
if (navigator.geolocation) {
    var geolocationApproved = 
      navigator.geolocation.prompt("This information will be used to provide you with directions to xyz.");
}
would produce something like this:

Friday, September 19, 2014

Show "loading" icon for long running AJAX calls only.

If an AJAX call is slow, then I want to present a "loading" overlay to let the user know the process is still working. However, on short calls, it is distracting to the user to flash the "loading" overlay and then immediately remove it. This code allows me to specify a time (in milliseconds) for how long to wait before showing the spinning wheel.
http://codepen.io/clarmond/pen/mvalt
 
Blogger Templates