Use jQuery to Animate Background Color

Although CSS keyframes is probably the easiest way to animate the background color of an element on the page, since earlier versions of Internet Explorer (IE < 10) don’t support CSS keyframes, if you need a more widely supported solution, you can do the same thing in jQuery.

To do this, you use the jQuery .animate() function.  The catch is that in order to be able to change colors with this function, you also need to include the jQuery Color plugin.

The way I did this in Rails was to just create a new file under assets/javascripts and called it jquery_color.js. Then copied the code from the plugin into that file.

Ok, now for the actual code. Credit for this goes to StackOverflow user fitorec‘s answer to this question, and this jsfiddle that he wrote.

$(document).ready(function() {
  var animate_loop, colors, i;
  colors = ['#FFB30C', '#58EC00', '#0087EC', '#EEEEEE', '#FF5A00'];
  i = 0;
  animate_loop = function() {
      backgroundColor: colors[i++ % colors.length]
    }, 1500, function() {

This creates a colors array with the colors that you want to animate. Then it calls the .animate() function, passing in the backgroundColor property, and assigning it to one of the colors in the colors array, and iterates i to go through the array. The animate_loop function then calls itself, to create an infinite loop.

Of course if using Rails you can use js2coffee to convert to coffeescript.

Automatically Scroll To Bottom of Page On Button Click Using Javascript / jQuery and Coffeescript

I have a website with multiple pages that are shown in order, so I have a ‘continue’ button on the bottom of each page.  I wanted my site to automatically scroll to the bottom to show the continue button when the user was finished with the page.  I imagine there are many ways to do this, but here’s what worked for me. I knew how to scroll to a certain element on the page:


but had trouble figuring out how to scroll to the bottom of the page. Here’s how I did it. Note the use of the animate function to make it nice and smooth.


$("html, body").animate({
  scrollTop: $(document).height() - $(window).height()


$("html, body").animate({ scrollTop: $(document).height() - $(window).height() });

It will probably work just using 'body' without 'html', but might depend on different browsers. I left it in just to be safe.

Credit here.

Want to learn more about Ruby on Rails?  Checkout OneMonthRails , what I used to get started in Rails. Best Rails course I’ve ever seen!

Change or Set Form Input Value with jQuery, CoffeeScript

So this is pretty basic, but it took me 10 minutes of Googling to figure it out.  If you need to specifically assign a value to a form input, here is how to do it via coffeescript:

$(".submit").on "click", ->
  email = $('input[name="user[email]"]').val();

The key is the .val() method. To get the value of an element, you call the .val() method without passing in any parameters.

email = $('input[name="user[email]"]').val();

To set the value of an element, you pass in the value you want into the .val() method.


Some credit here.

How to Remove the “X” on jQuery UI dialog

I’ve just recently started learning how to use the jQuery UI framework.  Seems very useful, and although I haven’t personally tested yet, supposedly has good cross browser support.

I use the jQuery UI dialog box on my site. I’ll write another post about how to customize them completely, but in this case I just wanted to remove the close “X” in the upper right corner that comes in the dialog box by default.  It’s super simple; you just need to add a CSS rule to make it’s display: none;

.ui-dialog-titlebar-close {
  display: none;

This removes the closing “x” from all dialog boxes. If you want to just remove it from a single one, then add your own custom class to the rule above, for example:

.ui-dialog-titlebar-close .no-x {
  display: none;

And then just add this class to whichever dialog box you want to get rid of the “x”.

$( "#dialog" ).dialog({
  dialogClass: "no-x",
  buttons: [
      text: "OK",
      click: function() {
        $( this ).dialog( "close" );

Some credit also here

Video End Event in Rails

How do you call an event or action after a video has finished playing? For example, I wanted a “Continue” button to appear after the video has finished.  Searching around this was a bit hard to find, so hopefully this post will help some people.

There is an “onended" function that you can call on the video object. This is how I do it.

Here’s the jQuery

$("#myVideo").bind("ended", function() {
   //whatever you want to do when the video ends

In Rails, here’s the coffeescript I use

$("#myVideo").bind "ended", ->
    # whatever you want to do when the video ends

Make sure the video tag in the html has the id that you’re referencing in the javascript/coffeescript.

<%= video_tag('FMCintro.mp4', size: "724x500", controls: true, id: "myVideo") %>

credit to this StackOverflow question. This one might be helpful too.