Category Archives: JavaScript

Making clickable table rows accessable

This particular issue came up for me at work.  The project in question uses AngularJS and bootstrap.  We had a table where the rows were already clickable and opened up a modal popup (id = #recordModal) to edit the record.  However, it was not accessible via the keyboard.

<table class="zebra record-list" cg-busy="'tracker'">
    <tbody>
    <tr ng-repeat="record in list
            data-toggle="modal" data-target="#record-modal"
            ng-click="editRecord(record)">
        <td>{{ record.field1 }}</td>
        <td>{{ record.fieldN }}</td>
    </tr>
    </tbody>
</table>

Continue reading

Advertisements

JavaScript, Fractions, and DOM Manipulations: A Proof of Concept

As part of a Django App I’m building, I wanted to be able to scale a list of numeric values that also happened to be fractions.  Furthermore, I wanted to do this completely in browser without incurring a call to the server each time I needed to recalculate.  To accomplish this, I found a library on github that nicely handles doing math with fractions (Ratio.js), then manually modified the HTML table’s DOM where the values to be scaled were stored/displayed.  The following was a proof of concept, and I make no claims that this is the best way to do this.

Continue reading