BACKBONE {BLOG}

A Cool jQuery Plugin that helps you to resize massive image

Here is the plugin description from official CJ Object Scaler Web site:

CJ Object Scaler will scale an object to either fit or fill within the boundaries of a destination object. I based this plug-in off another JavaScript project I made awhile back, you can read what it does in the CJ Image: Easily Calculate Image Scaling blog enry. It was a nice little function that would help you calculate the size and offsets to use when scaling an image to fit (or fill) within another element. It didn't actually do any scaling, per say, it merely provided you with the numeric amounts to use.

Why do we need a jQuery Image resizing plugin

When it comes to online store web development, you will have product images in different ratios and sizes. It's hard to make them all pretty unless you do some tricks. CJ Object Scaler is the plugin to help you out.

Demo

jQuery Code

$("#fill img").each(function()
{
  $(this).cjObjectScaler(
  {
    method: "fill",
    fade: 1000
  });
});

More details

You can see demo and download the plugin from the official website

Send & Read URL Variables Using jQuery getUrlVar

jQuery getUrlVar is a tiny piece of jQuery plugin that does wonderful job by reading the URL Variables. Sometimes you may need to read your own custom url variables and do changes on the other pages.

jQuery getUrlVar Plugin

jQuery.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return jQuery.getUrlVars()[name];
  }
});

You can download the script here

How to use jQuery getUrlVars

if($.getUrlVars()['profileId'])
{
  alert($.getUrlVars()['profileId'][0]);
}

Example on Healthy Families BC Walking Challenge

The goal to use query getUrlVar is to show the Lumby popup when users land on the page. What we did is to pass a URL variable 'profileId'. We use getUrlVar to read the id and do the trick. It's very useful when it comes to the REAL WORLD

Before: http://www.healthyfamiliesbcwalkingchallenge.ca/Lumby

After: http://www.healthyfamiliesbcwalkingchallenge.ca/Lumby?profileId=8642

Horizontally and Vertically Center an Element

Centering the HTML elements is such a pain in CSS. When developing popup & overlay, I usually let jQuery Center handle the position. It's easy and IE friendly.

How to use jQuery Center

$('#mainDiv').center();
$(window).bind('resize', function(){
$('#mainDiv').center({ transition:300 });
});

You can download the jquery-center.js here