Spin plugin to show loading icon with jQuery

 Hi *.*,


Web pages takes time to load and when page is heavy then it takes more time to load. Would it not be nice to show loading icon. It creates responsive webpage and gives nice user experience.In this post, I will show you a plugin to show loading icon.

Features

    No images, no external CSS
    No dependencies (jQuery is supported, but not required)
    Highly configurable
    Resolution independent
    Uses VML as fallback in old IEs
    Uses @keyframe animations, falling back to setTimeout()
    Works in all major browsers, including IE6
    MIT License

How to use it?

var opts = {
  lines: 13, // The number of lines to draw
  length: 7, // The length of each line
  width: 5, // The line thickness
  radius: 21, // The radius of the inner circle
  rotate: 90, // The rotation offset
  color: '#000', // #rgb or #rrggbb
  speed: 2, // Rounds per second
  trail: 93, // Afterglow percentage
  shadow: false, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: 'auto', // Top position relative to parent in px
  left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

The spin() method creates the necessary HTML elements and starts the animation. If a target element is passed as argument, the spinner is added as first child and horizontally and vertically centered.

Manual positioning

By default the spinner is centered within the target element. Alternatively you may specify a top and left option to position the spinner relative to the target element.

Hiding the spinner

To hide the spinner, invoke the stop() method, which removes the UI elements from the DOM and stops the animation. Stopped spinners may be reused by calling spin() again.

Browser Compatibility

    Chrome
    Safari 3.2+
    Firefox 3.5+
    IE 6,7,8,9
    Opera 10.6+
    Mobile Safari (iOS 3.1+)
    Android 2.3+


Download Plugin : http://fgnass.github.com/spin.js/dist/spin.min.js


If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)

get count of number of elements were selected by jQuery

jQuery selector returns a jQuery object that has .lenght property. So the easiest way to get the length is using the .lenght property.

var iCount = $('.cssClass').length;

If you want to know how many div elements present on the page then,

var eCount = $('div').length;



jQuery also provides .size() method, which also does the same thing as the .lenght property. But the .lenght property is preferred because it does not have the overhead of a function call.

If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)

css for html links

 In this article I’d like to show you six effective ways to add a touch of style to your HTML links. The techniques presented here are really simple to implement. Let’s see the details.

Using a different color

This is the simplest way to make your links different from the rest of the text:


a.color {
    color: #d34545;
}

Using a different color on hover

This technique adds a little bit of dynamism to your links when a user hovers them with the mouse:


a.hover {
    color: #800;
}
a.hover:hover {
    color: #f00;
}

Using a different background color on hover

Same as above, but this time we change also the background color of the links:


a.hover-bg {
    color: #003b6c;
}

a.hover-bg:hover {
    background: #003bc6;
    color: #fff;
}

Using text decoration

A dynamic effect on hover involving the text-decoration property:


a.decoration {
    text-decoration: none;
}

a.decoration:hover {
    text-decoration: underline;
}

Using borders

Another effect on hover but with the border-bottom property:


a.border {
    text-decoration: none;
    border-bottom: 1px solid;
}

a.border:hover {
    border-bottom: 1px dashed #008;
}

Using generated content

We can add a rounded bullet to our links when a user hovers them:


a.generate {
    text-decoration: none;
}

a.generate:hover:after {
    content: '>';
    margin-left: 4px;
    color: #000;
    font-weight: bold;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #ccc;
    border: 1px solid #999;
    border-radius: 50%;
    text-shadow: 1px 1px 1px #444;
}


If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)