5+ Useful Cool Jquery Tricks and Tips

jquery is the one by which you can create many awesome cool effects and functions which can't be done by any other. There are many little jquery tricks and tips by which we can do bigger works with little snippets.

If you are looking for some cool Jquery tricks then stop searching because in this article I am going to share with you some useful and cool jquery tricks and tips.

Also read these articles which also helpful to you:

• Best CSS link Hover Effects
• Unbelievable things built with CSS

Using the Latest Version of Jquery

To improve your site performance and stay updated and to use all the new innovations which are taking place in Jquery world you have to use the latest version of Jquery. The reason is that every release will introduces the optimizations and bug fixes and many other things.

<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- Include the latest version in the 1.6 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

Display Latest FeedBurner Posts

By using this snippet you can display the latest posts from feedburner feed. By this you can easily create different types of widgets for blogger and wordpress, such as, recent posts widget etc. To show the posts from specified feed just change the FEED-NAME with your feed name.

$(document).ready(function(){
       $.ajax({
               type: "GET",
               url: "http://feeds.feedburner.com/FEED-NAME",
               success: function(data){
                       $("#date").text($(data).find("item:first>pubDate:first").text());
                       $("#title").html("<a href='"+$(data).find("item:first>link:first").text()+"'>"+$(data).find("item:first>title:first").text()+"</a>");
                       $("#description").html($(data).find("item:first>description:first").text());
               }
       });
});

Fade one Image into another

By this snippet you can fade into image on another image. This can also be done with CSS but the easiest way to do this is by using this snippet. This div will have a background image applied to it of the second image. Then put an inline image inside it. Fading the inline image in and out will reveal/hide the second (background) image.

Below there are two snippets one is HTML and another is Jquery snippet. In HTML snippet there is div element. You have to place your image in that div.

<div id="pakmax">
    <img src="/images/image.jpg" alt="YOUR ALT HERE" />
</div>

Now here is the Jquery snippet for fade effect of images.

$("#pakmax").hover(function(){
    $(this).find("img").fadeOut();
}, function() {
    $(this).find("img").fadeIn();
});

 Get X and Y coordinates of Mouse within Box

By using this snippet you can get the X and Y coordinates of mouse cursor by clicking within the box. You can get the X and Y coordinates of click relative to the browser windows. Little the window little will be the coordinates and larger the browser window larger will be the coordinates.

$(function() {
$("#demo-box").click(function(e) {
  var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
  alert("X: " + relativeX + "  Y: " + relativeY);
});
});

Run Javascript when entire page loaded

Want to increase your site speed more? Yes! then this snippet will also help you a little bit. This code will make your javascript load at the end when all page has been completely loaded. Add your code between this snippet which you want to load after the entire page loaded.

$(window).bind("load", function() {
   // code here});

 Display Recent Flicker Uploads

Want to display the flicker recent uploads? Here this jquery snippet can do this job. This snippet will load show you the most recent uploads on flicker account. simple change the 35591378@N03 with your flicker account ID. This will display less then 10 uploads but you can change this limit by altering the value from 9 to anything you want. 

$(document).ready(function() {
       $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=35591378@N03&format=json&jsoncallback=?", function(data) {
               var target = "#latest-flickr-images ul"; // Where is it going?
               for (i = 0; i <= 9; i = i + 1) { // Loop through the 10 most recent, [0-9]
                       var pic = data.items[i];
                       var liNumber = i + 1; // Add class to each LI (1-10)
                       $(target).append("<li class='flickr-image no-" + liNumber + "'><a title='" + pic.title + "' href='" + pic.link + "'><img src='" + pic.media.m + "' /></a></li>");
               }
       });
});

Final Words

I hope this article will help you. Let me know if you facing any problem using these jquery tricks. Hope you like this article and must share it with your friends and followers. I will share more useful and cool jquery tips and tricks in near future so keep visiting PakMax.