JQuery Tools

10 Brilliant jQuery Tutorials with Live Demos

Creating sites using jQuery and Ajax can really help take your site to the next level. Today we’re taking a look at 10 of the best tutorials available and each come with a live demo so you can see just how effective the end result will be.

If you’re not yet set up with the products you need for your next project then check out our hosting offers and discounted domain names.

Never heard of or used these applications? – Then check out the w3schools website for an introduction to jQuery and Ajax.

 

Animated Text and Icon Menu with jQuery

This jQuery tutorial shows you how to create a very customisable animated navigation menu. Everything works really smoothly and the font really compliments the icons. Perfect for anyone looking to divide their site into colour coded areas as Daguia have done on their site.

 

BounceBox Notification Plugin With jQuery & CSS3

If you are in need of a solution to display extra content or notifications and don’t want to use the more traditional lightbox or tooltip then this BounceBox is a great alternative.

 

Sweet Pages: A jQuery Pagination Solution

Displaying long list of content such as testimonials, comment threads or article snippets can often lead to either creating an extremely long page, separate pages or paginating the data. The most customer friendly option is normally pagination but this if often uncrawlable for search engines. Sweet Pages provides you with a slick and SEO friendly way of displaying content.

 

Contextual Slideout Tips With jQuery & CSS3

My favourite jQuery plugin on the list. The Contextual Slideout Tips provide an elegant and simple solution to displaying that extra content you couldn’t fit on the page without compromising on your design.

 

Dynamic FAQ Section w/ jQuery, YQL & Google Docs

How many times have you visited the FAQ section on a website only to find that you have to troll through the longest page in web history to find an answer to your query? With this great jQuery dynamic FAQ section you can provide your visitors with a user friendly solution.

 

An AJAX Click to Appreciate Badge

Having testimonials or a rating system often helps to reinforce the quality of your products/services to your visitors. This “Click to Appreciate” badge is a great way of allowing people to like what you have to say.

 

Making a Custom YouTube Video Player With YouTube’s APIs

Videos help make your website “sticky” and often increases the page view time on any given webpage. Whenever possible it is a good idea to upload your videos to YouTube first and then embed them onto your site. This will normally improve performance and help make them easier to share. However, if you don’t like the aesthetics of the current YouTube layout then this jQuery script is a good alternative.

 

Client Testimonials Powered by PHP, XML and jQuery

As mentioned earlier, having testimonials on your site often helps to reinforce the quality of your products/services to people. This jQuery script is a great way to easily manage and update your testimonials as well as display them effectively on your site.

 

Making a Custom Facebook Wall with jQuery Templates

When searching the internet for social media feeds for websites you will come across hundreds of examples for Twitter. This is one of the few, and the best, Facebook wall feeds I have seen. Use this jQuery plugin to help keep your website content fresh.

 

Making a Simple Tweet to Download System

This Tweet to Download plugin is a unique solution to encourage people to share your website content. If you provide your visitors with free downloads of PDF guides or PSD files etc. then this plugin will ensure your website visitors tell their Twitter followers about this great new download.

Liked this post? Subscribe to our RSS feed and get loads more!

Do you have an opinion, tip or suggestion related to the above post? Then please let us know by leaving a comment below or send us a Tweet @fasthosts and add the hashtag #fhblog.

Be Sociable, Share!

    Leave a Comment

    CAPTCHA Image

    *