Wednesday, June 5, 2013

3 awesome jQuery snippets


Smooth scrolling to an anchor

jQuery is known for its ability to let developers easily create stunning visual effects. A simple, but nice effect is smooth sliding to an anchor. The following snippet will create a smooth sliding effect when a link with the topLink class is clicked.
$(document).ready(function() {
 $("a.topLink").click(function() {
  $("html, body").animate({
   scrollTop: $($(this).attr("href")).offset().top + "px"
  }, {
   duration: 500,

   easing: "swing"
  return false;

Equal column height

When building a column based website, you often want that all columns have the same height, as displayed in a good old table. This snippet calculate the height of the higher column and automatically adjust all other columns to this height.
var max_height = 0;
    if ($(this).height() > max_height) { max_height = $(this).height(); }

Disable the “Enter” key in forms

By default, a form can be submitted by pressing the “Enter” key. Thought, on some form, this keyboard shortcut can cause problems. Here is how you can prevent unwanted form submission by disabling the “Enter” key with jQuery.
$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;


No comments :

Post a Comment