Enquire.js for Responsive JavaScripting

Responsive web design is all the rage lately, and with good cause. With the plethora of devices and screen sizes and aspect ratios, you can’t create a “desktop” site and a “mobile” site anymore. The best approach is to create one site that adapts to fit the device it is being viewed on. CSS media queries make it dead simple to style every element on a page exactly how you want at any screen size.

But what about JavaScript? I have some fancy jQuery animation that happens when a user clicks a button. It looks sweet on a desktop. But it’s kind of awkward on phone. Actually, it just looks bad and is pointless on a mobile device. If only I could add JavaScript to those CSS media queries. Wait. I can.

Enquire.js┬áis a lightweight JavaScript library for handling media queries. It works almost the same way as CSS media queries, you specify the max- or min-width and give it some commands to execute. More good news: it has no dependencies, not even jQuery! It’s pure JavaScript awesomeness.

Enquire gives you the option to execute code when your specified media query is matched or unmatched, meaning it listens for viewport changes and can execute different code as the window changes size. Here’s the basic setup:

1
2
3
4
5
enquire.register("screen and (max-width:1024px)", {
match: function() {
console.log("handler max-width 1024px");
}
}).listen();

 

Simple. And it just works. Need multiple queries? Not a problem:

1
2
3
4
5
6
7
8
9
enquire.register("screen and (max-width:1024px)", {
match: function() {
console.log("handler max-width 1024px");
}
}).register("screen and (max-width:480px)", {
match: function() {
console.log("handler max-width 480px");
}
}).listen();

Read more about it here.

CSS-Tricks also has good write-up about Enquire.js

jQuery Button Generator

Do you ever hand code the same things over and over? Or keep a text file with that code you use on a daily basis buried somewhere on your hard drive? Of course. But there comes a point when that just won’t do anymore. I hit that point creating buttons for various web site. The buttons are all different and have different options and effects, but the basic underlying code is the same.

So I thought, “I have to do something about this. There has to be better way.” And I found that better way by building out a button generator. You enter in a few key pieces of information, select your style of animation and, bam, you get some well defined, easy to use HTML, CSS and JavaScript that works exactly how you want it to.

Problem Solved.

 

HTML Marquee

Ah, the marquee. That wonderful tag that would scroll your text across the page in a slightly jittery, kinda hard to read way. Well, you know what? Car dealers love them. Just like images in a slideshow, they want to cram as many hot deals, great buys and can’t miss events on a single page as they can possibly get.

Back when Flash was all the rage, we had a nice little marquee component that did the job. Now a days, I hardly touch the old AS2 code. Everything is HTML, CSS and JS. But that HTML marquee tag doesn’t really work as well as it used to. Browsers don’t really like having to scroll text across the page. So are we supposed to abandon that great promotion racing across your homepage? No way! Using a little jQuery, some HTML and a reliable data source (ColdFusion in this case), I brought that marquee tag back to life with a little jQuery plugin I built, called marquee.js. Take a gander at some of the code. It’s hot stuff.

I even threw in some other text effects, ya know, in case the horizontal scroll ever gets old.