Welcome visitor! Please wait till I load my blog page...


40+ jQuery Tips and Tricks For Bloggers and Web

Filled under: CSS, jQuery

jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 27% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. Here some amazing use of jQuery Script for Bloggers and Web that is using now a day very popular.40+ jQuery Tips and Tricks For Bloggers and Web.

  • 17+ Featured Content Slider for Blogger Using jQuery Tutorial

  • Sliding Boxes and Captions with jQuery 

    All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.

    Article : http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

    jQuery Cheat Sheets 

    jQuery Cheatsheet- The cheat sheet comes in two flavors: 1) Made for iPhone and iPod Touch, and any other mobile device with internet access. 2) Old-school printable A4 cheat sheet

    Article : http://colorcharge.com/jquery/

    slideViewer (a jQuery image slider built on a single unordered list) 1.2 

    slideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide forward or backward, depending on the area you are clicking (eg: clicking the left part of a picture will move the slides backward, and viceversa for the right part of the picture).

    Article : http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html

    A fancy Apple.com-style search suggestion 

    “This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial.”

    Article : http://www.marcofolio.net/webdesign/a_fancy_apple.com-style_search_suggestion.html

    Build An Incredible Login Form With jQuery 

    In this tutorial, you’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel.

    Article : http://net.tutsplus.com/tutorials/javascript-ajax/build-a-top-panel-with-jquery/

    Create a Slick Tabbed Content Area using CSS & jQuery 

    One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.

    Article : http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/

    Creating a Filterable Portfolio with jQuery 

    If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.

    Article : http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/

    Accessible Charts & Graphs from Table Elements using HTML 5 Canvas and jQuery 

    This technique provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

    Article : http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/

    jQuery Slideshows With the Cycle Plugin 

    The jQuery Cycle plugin allows developers to quickly and easily create a slideshow out of anything contained within a given div element. However, this is more than just your grandmother’s slideshow fade plugin. The jQuery cycle plugin comes with a vast array of transition effects for you to use.

    Article : http://blog.themeforest.net/tutorials/jquery-slideshows-with-the-cycle-plugin/

    BBC Radio 1 Zoom Tabs 

    This tutorial explains how to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.

    Article : http://jqueryfordesigners.com/bbc-radio-1-zoom-tabs/

    Create an amazing music player using mouse gestures & hotkeys in jQuery 

    We will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.

    Article : http://yensdesign.com/2008/12/create-an-amazing-music-player-using-mouse-gestures-hotkeys-in-jquery/

    jQuery Tools: Overlay 

    Expose is a JavaScript tool that exposes selected HTML elements on the page so that the surrounding elements will gradually fade out. Works like a charm if you want to stand out.

    Article : http://www.flowplayer.org/tools/expose.html

    Creating a Dynamic Poll with jQuery and PHP 

    When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

    Article : http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/

    Creating a Virtual jQuery Keyboard 

    This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

    Article : http://designshack.co.uk/tutorials/creating-a-virtual-jquery-keyboard

    De-Constructing Accordion and Hover Effects with jQuery 

    This video tutorial explains how the hover and accordeon effects on Tim Van Damme’s site can be achieved using jQuery.

    Article : http://jqueryfordesigners.com/jquery-look-tim-van-damme/

    Make a Mega Drop-Down Menu with jQuery 

    So how would we go about implementing Mega drop down menus? While it’d be great to do all of this in pure HTML and CSS, it’s impossible at the moment to get those nice half-second delays — and of course there’s a pesky problem with Internet Explorer 6, which only supports :hover on anchor elements. Instead, I’ve whipped up a solution using jQuery and a very nifty plugin called hoverIntent.

    Article : http://blogs.sitepoint.com/2009/03/31/make-a-mega-drop-down-menu-with-jquery/

    Creating a “Filterable” Portfolio with jQuery 

    This tutorial will show you how to make portfolio “filtering by category” a little more interesting with just a little bit of jQuery.

    Article : http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/

    Building a jQuery-Powered Tag-Cloud 

    A tag-cloud is a great way of showing visitors to your blog the main topics of interest that are available. There is also additional information contained in a tag-cloud. Aside from the actual links themselves, which give people an idea of the subjects that your site covers, they can also show how popular the different subjects are. Another great thing about tag-clouds is that they can be used to describe the frequency of anything; you can link to articles, blog posts, images, video, or anything else that you have in abundance on your site.

    Article : http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-powered-tag-cloud/

    Create a gallery by using z-index and jQuery 

    In this tutorial you will learn to combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures.

    Article : http://usejquery.com/posts/3/create-a-unique-gallery-by-using-z-index-and-jquery


    jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X’s Growl Framework works.

    Article : http://www.stanlemon.net/projects/jgrowl.html

    Moving Boxes Carousel with jQuery 

    Many of the concepts presented in classic carousel tutorials are the same, so this tutorial will not throw a lot of source code at you. The big difference here is that there are buttons to change panels and the panels zoom in and out.

    Article : http://css-tricks.com/moving-boxes/

    BuWordPress Sidebar Turned Apple-Flashy Using jQuery UI 

    This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to.

    Article : http://net.tutsplus.com/tutorials/wordpress/wordpress-sidebar-turned-apple-flashy-using-jquery-ui/

    How to Load In and Animate Content with jQuery 

    In this tutorial we will be taking your average everyday website and enhancing it with jQuery. We will be adding ajax functionality so that the content loads into the relevant container instead of the user having to navigate to another page. We will also be integrating some awesome animation effects.

    Article : http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

    Styling Buttons and Toolbars with the jQuery UI CSS Framework 

    Coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content.

    Article : http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/

    Automated image preloading for a snappy UI 

    We developed a solution that automates the age-old task of preloading images in web applications. It uses javascript and is packaged as a jQuery plugin, but the concept could easily be ported to other libraries or plain old Javascript as well.

    Article : http://www.filamentgroup.com/lab/automated_image_preloading_for_a_snappy_ui/

    Making a Content Slider with jQuery UI 

    In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.

    Article : http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/

    Semantic Blockquotes with jQuery 

    Blockquotes can really assist in making your text visually appealing. Jack Franklin gives us a great tutorial on how to create blockquotes using jQuery. Even beginners to jQuery will be able to learn how to make these blockquotes.

    Article : http://www.thewebsqueeze.com/web-design-tutorials/semantic-blockquotes-with-jquery.html

    jQuery Sequential List Tutorial 

    This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example will show you how to add a comment counter to a comment list using jQuery’s prepend feature.

    Article : http://www.webdesignerwall.com/tutorials/jquery-sequential-list/

    Building a jQuery Image Scroller 

    In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.

    Article : http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/

    Sexy Drop Down Menu w/ jQuery & CSS 

    Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key × and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

    Article : http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html

    Slider Gallery Tutorial: Screencast 

    A tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.

    Article : http://jqueryfordesigners.com/slider-gallery/

    Current Field Highlighting 

    As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field. In this tutorial, we’ll improve our current field highlighting, using jQuery.

    Article : http://css-tricks.com/improved-current-field-highlighting-in-forms/

    jQuery Feed Menus 

    When feeds became popular, it worked to have one icon on your site to point your readers to your RSS or Atom feeds. As feeds are more prevalent in blogs and websites abroad, the presence of multiple feeds abound. I have a feed for my blog, the nerdlab, my bookmarks, my friend feed as well as my twitter updates. That’s a butt-ton of feeds.

    Article : http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/

    LavaLamp for jQuery lovers! 

    LavaLamp for jQuery lovers!- A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library.

    Article : http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

    How to create a sliding image/reveal content with jquery 

    Someone asked me about this effect a while ago and i thought i should make a tutorial about this.

    Article : http://www.suciuvlad.com/html-and-css-tutorials/how-to-create-a-sliding-imagereveal-content-with-jquery/

    Simple jQuery Spy Effect 

    The great thing about Realmac’s QuickSnapper site is that if JavaScript is turned off, the list of snaps is visible by default. So we’ll follow suit.

    It’s also worth noting that their version only keep pulling in new items until it hits the end. I’ll show you how you can keep the list looping, and in a follow up tutorial I’ll show you how to hook this in to an Ajax hit that doesn’t hammer your server and keeps the effect nice and smooth.

    Article : http://jqueryfordesigners.com/simple-jquery-spy-effect/

    How to Mimic the iGoogle Interface 

    This tutorial will be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!

    Article : http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

    Web Designer Wall 

    jQuery Tutorials for Designers- This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. Effects include: Simple slide panel, Simple disappearing effect, Chain-able transition effects, Accordion, Animated hover effect, Entire block clickable, Collapsible panels.

    Article : http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

    Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP 

    This is a detailed tutorial which shows creating an unobtrusive Ajaxed shopping cart using jQuery & PHP and can guide you to Ajaxify any e-commerce software you may already be using or coding.

    Article : http://www.webresourcesdepot.com/creating-a-slick-ajaxed-add-to-basket-with-jquery-and-php/

    jQuery Infinite Carousel 

    This screencast explains how you can create a simple and nice scrolling carousel and how you can also make it automatically loop round by itself. For the latter see also Automatic Infinite Carousel.

    Article : http://jqueryfordesigners.com/jquery-infinite-carousel/

    Create a Digg-style post sharing tool with jQuery 

    We are going to make a digg-style post sharing toolbox. It’s all pretty straight forward and need a little bit of planning. The way it works is different with digg’s. If you view the html source code of Digg’s, it has the sharebox html code in every single post. But, in this tutorial we have only one sharebox, and all the links are sharing the same template.

    Article : http://www.queness.com/post/309/create-a-digg-style-post-sharing-tool-with-jquery

    InnerFade with JQuery 

    InnerFade is a small plugin for the jQuery-JavaScript-Library. It’s designed to fade you any element inside a container in and out.

    These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings.

    Article : http://medienfreunde.com/lab/innerfade/

    Note We are going to add more jQuery Tips and Tricks, so please keep visiting my website to learn more about the tips and tricks of latest technologies.


    1. Hi….
      Thanks for sharing this information and resources its really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

      Web Design Company India

    2. Your tips were amazing and I had a great time reading it. I will refer this site to my friend, this can be a big help for him. Keep posting.


    3. Thanks for sharing your views.
      Great blog here.. It’s hard to find quality writing like yours these days. I really appreciate people like you.
      Joomla Development India

    4. I like it, and i am gonna share some of your useful tips on my blog as well. jQuery is really a serious business because you can do wonders with it. the UI you have mentioned add great look to even a dull website.

    5. I truly like to reading your post. Thank you so much for taking the time to share such a nice information.
      web grid

    6. this is a great 40 jquery tips tricks for the blog thanks for sharing.Best Industrial Training Institute in Chandigarh

    7. this is a great jQuery tips and tricks for the blog information thanks for sharing.
      Web designing course in Chandigarh