Basic Template Engine

Sometimes I need to setup Javascript templating for a page or two, or even just a form. I found a cool solution over on Krasimir Tsonev’s blog. I thought I would save it here for future use.


I don’t really like having to setup long strings in javascript, it is just so ugly. So I use the <script type=”text/template”> approach to separate out my templates from my code. Here is an example.

This is just a basic “Attendee” template for some event. Notice the <%stuff%> inside there. That is where the magic happens.

Template Engine

Here is where the real magic happens.

So as you can see the “TemplateEngine” just takes some input and replaces anything between the <% %> symbols. Krasimir actually has a more functional version setup on his blog as well with support for some logic, but that is more than I needed. And if I ever did need that much functionality I would just turn to a full Template Engine.


I noticed a strange flaw in this template engine when working with templates that require multiple replacements on the same line of text. Here is another version of the template engine you can use which should find all variables in your template, regardless of how many are on a line.


Skrollr Menu

In my last post I talked about extending the easing functionality of jQuery. Here is what I was using that easing for. My custom skrollr menu!


First we need to setup the menu itself. Here is a shortened version of what I did.

I am going to skip over the actual skrollr section code because that is a large chunk of code that will vary greatly for each project. I leave that part to you!


Here is the code needed to make your skrollr menu work.

There we go! Surprisingly simple to setup your own skrollr menu!


Here is what the menu looks like when you are looking at the third section ( …sort of. I didn’t want to screen shot the entire project ).

Note: If you want to setup your own menu for skrollr you should also check out the skrollr menu plugin. It works pretty well, but I had more fun making my own.

Another Note: The ‘easeOutQuad’ function is not built into jQuery. You will need to get jQuery UI or add your own easing functionality to use non standard easing functions. See my previous post.

Extend jQuery Easing Functionality

I was recently implementing a skrollr page and was setting up a custom menu. I realized that most of the cool easing functions were not available with the standard jQuery install, and I didn’t want to include jQuery UI (or any of it’s pieces). I found a link on Stack Overflow which had a really nice easing extension for jQuery.

Easing Function

I actually cut out most of these easing functions when I put it in my own project, but I figured I would include the entire list function here.

Once you include this in your project and you connect it to your jQuery object you can use any of these easing functions normally.


JS Resize Text

There are a ton of ways to do everything. I needed to setup a system for increasing and decreasing the font size on a site and here is the code I used to do that.

Javascript Functions

This is the most important part of the whole thing. There are 3 functions here, but only 1 is really needed for the resizing of text. The other 2 are for manipulating cookies. I borrowed the start of this function from David Walsh ( who used to work at the same place I work now! ).

Javascript Actions / Event Handlers

The functions by themselves are pretty useless if you never call them, so here is what I am doing to call the resize functionality.


Here is the little bit of HTML that I used to setup the controls. I added a note that in order to only affect specific locations use the ‘text-change’ class on the various elements. I find this helps to prevent breaking layouts with increasing font size.


The styling of this is completely up to you, but here is some SCSS I used recently to setup my widget.

NOTE: I have a bunch of variables here and a couple of grays. I don’t know about you, but I usually end up needing to use a dozen different grays on each site. I usually end up using the same ones so I gave them goofy names to make them easier to remember. However I always use #FFF for white…not sure why.

Base Styles

In order for all of this to work, you need to make sure you are working in “em”s and also your line height is a float value and not a set pixel value, like so.

You will definitely need to edit this to fit your website, but I hope this gives you a good starting point.

I don’t want to screen shot the whole site this is coming from but here is what the text size adjuster looks like with the above code.



Good luck!

JS Debounce / Throttle

I really love lodash (I have not used underscore but I am sure that is great too ), but sometimes I don’t really want to include another library in a project and I just need a function or two.

The debounce function basically prevents an event from constantly firing while events are occurring. If you have an action you need to occur when the user stops creating events you can use this function to handle that situation. Good examples are when you are using auto complete for a text box. Instead of constantly firing off events while the user is typing you can have the script wait until the user stops typing for X time and then fire the event. It helps to mitigate off putting actions or preventing unneeded queries to your server.

There are a couple good debounce / throttle functions on this stack overflow post.

You could also just implement the actual function found on the underscore site.

Or, of course, you could just include the underscore or lodash libraries. They have a lot of other useful functions you might want as well.

Good breakdown of these functions can be found on CSS Tricks.

Toggle YouTube embed Pause

Sometimes I need to have a YouTube video appear in a lightbox or some other container where I need the option to close / hide the YouTube video. In these cases the video will continue to play unless we use some JS to pause it. Here is all you need.

Just have this function available and stick the following on whatever element you want (that supports onclick of course).

I stole this from Stack Overflow, but that was a while ago and I do not remember who should be credited with it. I modified it only slightly.