jQuery Blink Plugin

I have created a plugin where you can apply blink effect on any dom object.

It can be div,span or anything.

Check out http://plugins.jquery.com/project/jqblink for more details

Calendar & Date Picker Scripts for ASP.NET and more

Calendars can be seen frequently in most web pages today especially in blogs and personal websites. As for corporate sites or e-commerce sites, it is utilize to layout announcements, up-coming events, contest and much more. What makes a calendar almost essential? It allows users to know what is new, what to be expect on specified date and track back older information all at one glance.

Here is the full post

Simple Tooltip with jQuery & CSS

There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. But Soh Tanaka has created a nice tooltip and explained the logic also.




Click for Demo

Click here for full post

MooTools and jQuery conflict problem in Internet Explorer, noConflict

When we use MooTools and jQuery together in our page, common problem we found is that some functionality is not working properly for MooTools or jQuery

Sometimes it is hard to find out that the problem is in using both together

The solution is so simple. We have to say jQuery to not to conflict with other libraries.

You have to add jQuery.noConflict() to your jQuery code.

<p>jQuery sets this paragraph's color to red but MooTools sets the border color.</p>
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
//no conflict jquery this makes possible to use both library together
jQuery.noConflict();
//jquery stuff
(function($) {
$('p').css('color','#ff0000');
})(jQuery);
</script>
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript">
//moo stuff
window.addEvent('domready',function() {
$$('p').setStyle('border','1px solid #fc0');
});
</script>

jQuery is namespaced so the $ function is free for MooTools to take hold of. The jQuery code passes jQuery to itself and then we call the argument $, thus jQuery is contained, so to speak.

Obviously including two libraries within the same page is resource-consuming but if it’s acceptable to the project and allows you to implement plugins from each library quickly, this may be a great option for you.

jQuery scrollTo plugin

jQuery has many great plugins.
Here is another one.

scrollTo is one of my favorite ones.
It's very useful and can be use anywhere while scrolling.

It gives scrolling an animation which is good over the boring scrolling.

Here is a quick link for downloading scrollto plugin. jquery.scrollTo-1.4.2.zip
Here is a demo if you want to try it, and see how it works. Demo
Note: you will need jquery-1.3.2 to use scrollTo. jquery-1.3.2.js

Here is the official link to the jQuery website for scrollTo plugin. jQuery scrollTo Official

jQuery cookie plugin

jQuery cookie plugin makes the cookie handling so simple.

First you have to include jquery.cookie.js plugin
and your work is done..

simple code to manipulate cookie.

Set cookie
$.cookie(cookiename, cookievalue,{expires: 30});
Note: expires takes the time duration in days

Get cookie
$.cookie(cookiename);

Delete cookie
$.cookie(cookiename, null,{expires: 30});

Click here to download jquery.cookie plugin

jQuery quicksearch plugin

Here is a useful plugin to quickly search anything from your table or list.

Just add this little cod after linking the quicksearch.js

For Table:
$('table#myTable tbody tr').quicksearch({
position: 'before',
attached: 'table#myTable',
labelText: 'Quick Search : '
});

For List:
$('ul#myList').quicksearch({
position: 'before',
attached: 'ul#myList',
loaderText: '',
delay: 100
})

Click on the link to download jQuery plugin

jQuery - Center a div or any control

Here is a short code to centralize your div or any html control using Jquery..
Dependency could be jquery-1.3.2.js

$('#divid').css('top',$(window).height()/2 - $('#divid').height()/2 + $(window).scrollTop());
$('#divid').css('left',$(window).width()/2 - $('#divid').width()/2 + $(window).scrollLeft());

You can use animate to get some effect to the moving operation.

$('#divid').animate({top: $(window).height()/2 - $('#divid').height()/2 + $(window).scrollTop()},500);
$('#divid').animate({left: $(window).width()/2 - $('#divid').width()/2 + $(window).scrollLeft()},500);