Posts tagged with “javascript

Getting the number of results from a filtered, ordered ng-repeat

The best way to return the number of results from a filtered ngRepeat (ordered or not) is by assigning an alias to it. Let’s say we have a list of books. We use ngRepeat to output the list like so: <ul>     <li ng-repeat=”book in books”>         <p>{{book.title}}</p> </li> </ul> At this point, returning the […]

REM to Pixels calculator

Few are the occasions when I’ve needed to convert pixels to REM, usually only when I’m working with a child theme based on one of the default WordPress themes (like Twenty Sixteen). Even fewer are the occasions when I’ve needed to reverse the sausage crank and convert REM back to pixels. And yet, it was […]

Pixels to REM calculator

The default WordPress theme Twenty Sixteen is clean, simple, and responsive; as such it makes a perfect “starter” theme for all but the most arcane designs. However, it uses REM — a.k.a. relative em units — for the all the measurements and sizing in its stylesheet and, unfortunately, unless one is a genius, REMs have […]

jQuery’s noConflict Mode

It’s easy to take jQuery’s claim on “$” for granted. Pretty much every plugin or tutorial one can find online assumes “$” maps to the jQuery object. And, most of the time, one can code with this assumption and everything will work out fine. Every once in a while though, you write your Javascript, paste […]

Animated scrolling with jQuery

It’s simple enough to use anchor tags to permit a user to move from one part of a page to another. Well, perhaps not “move” as much as “jump jarringly”. Isn’t there some way of doing the same thing with a little more panache? Of course there is. jQuery has two functions, offset and animate, […]

Making links out of nothing at all

When assigning a click action in jQuery it’s important to communicate that potential to your user. The CSS property cursor makes this a snap. Here’s our boring old html element: <div class=”hey”> I’m not boring! </div> We add a little CSS: <style> .hey { cursor: pointer } </style> And suddenly it looks suspiciously like a […]