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() {
    $('body').animate({
      backgroundColor: colors[i++ % colors.length]
    }, 1500, function() {
      animate_loop();
    });
  };
  animate_loop();
});

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.

Advertisements

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:

$('body').scrollTop($('#your_element').position().top);

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.

Javascript:

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

Coffeescript:

$("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();
  $('.hiddenEmail').val(email);

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.

$('.hiddenEmail').val(email);

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