10 JQuery Tips and Tricks to Make Killer Websites

12.Nov

2012

10 JQuery Tips and Tricks to Make Killer Websites

Tags: css tricks, java script, java script codes, jquery ajax, jquery animate, jquery animation, jquery css, jquery slider, jquery tips, jquery tool tip

Posted in Showcases, Useful Tips

Since it’s first presentation in 2006 jQuery JavaScript library has been gaining momentum. And by now it has become an integral part of any web developer repertoire.

This scripting technology allows creating dynamic, interactive and animated content presentations without the use of flash. Consequently the ability to modify the code isn’t dependent on owning such a costly piece of software as Adobe Flash. jQuery code is absolutely accessible and open for alteration to anybody who owns the simplest freeware text editing software. Probably, all that contributes to its popularity. Let’s find out what possibilities of jQuery gives us.

1. How to build a jQuery tag cloud

Tag-cloud is the means to let your visitors be aware about the topics they can find covered on your website. And that’s relevant not only for articles but for any type of content present on your website, which includes images, posts in blog, videos etc. The frequency of each topic translates into the relative size of its tag in the cloud.

2. ‘Cycle’ plugin for jQuery ‘slideshow’

Cycle plugin is a great means to create jQuery slideshows for your website. It’s not a square primitive slideshow, it comes with the code for quite a number of different transition affects.

3. jQuery tooltips

If you need complex too tips with images, tables, forms and links, able to dynamically change their location you will find instructions in this detailed tutorial.

4. How to create filterable portfolio with jQuery

For those who have extensive portfolio this method makes it easier to navigate through the categories which filter out irrelevant entries.

5. jQuery login form

This method will help you create a sliding animated login form which is accessible from every page of the website but at the same time doesn’t clog up the space.

6. jQuery tabbed panel

This is a continuation of the jQuery login form concept, where access to website content is made multi-layered in order to achieve higher content density at no cost for the website space.

7. jQuery photobooth

With jQuery we can build a photobooth where our website visitors will be able to take a snapshot with their web camera and upload it using a CSS3 interface.

8. Image wall with jQuery

This is a tutorial on how to create a very neat gallery presentation by scattering thumbnails of varying sizes around the page to incite effect of art gallery wall.

9. jQuery Flickr slideshow

This tutorial teaches us how to set up a a jQuery powered slider which fetches content from the image hosting service Flickr. The slider can be used for presentations and product guides.

10. Advanced contact form

This time we’re going to build a contact form with drop-down options menu which means the ability to send messages to different addressees from a single form.

***

If you’re not yet feeling confident in dealing with jQuery code directly that doesn’t mean you cannot benefit from its advantages and opportunities it offers. jQuery templates are there at your service.

Minimalistic Photo Portfolio