background preloader

40+ jQuery Plugins Improving Your Website Look and Feel 

40+ jQuery Plugins Improving Your Website Look and Feel 
Making more and more appealing and interactive user interfaces have been one of the never ending competitions between web designers since html and browsers where in the mid nineties. The competition is there for a reason. The number of website on-line has experienced a nearly exponential growth and you need to stand out to be seen! Actually it is kind if scary if this trend is going to continue… Anyway most of you reading this post is probably agreeing that websites need to be special, look good and have features that is not found everywhere. Advertisement PrettyPhoto Media This plugin can display videos, photos and other media utilizing stunning photos in a fancy overlay. qTip qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Tab SlideOut Create a side tab that expands content for a feedback form or contact info. Toolkit with 6 Awesome jQuery User Interface components This is a great set of jQuery UI Tools. jQuery Confirm Plugin SimpleModal jQuery Corner

40 Exceptional jQuery Interface Techniques and Tutorials With the advent of JavaScript/web application libraries and frameworks, it’s become much easier to build interactive components for a site. For the folks that are unfamiliar with jQuery – it’s a popular, high-performance and compact JavaScript library/framework. jQuery will allow you to reduce the amount of code you have to write for dealing with browser quirks, memory leaks, and repetitive code by providing you with a set of useful and highly-optimized and thoroughly-tested functions and methods. In this article, we explore the strengths of jQuery in letting web developers create impressive client-side-based user interface components. Whether you’re looking for a particular interface/interaction pattern built on Query (like module tabs or modal windows) or you simply want to learn the library by engaging in step-by-step tutorials – you should be able to find something here for you. Modal Windows 1. Live Demo 2. Live Demo 3. Live Demo Tool Tips 4. Live Demo 5. Live Demo 6. Live Demo Module Tabs

Animate Image Filling Up Using jQuery | Build Internet! The Photoshop Portion – Preparing Your Image(s) Step one requires that you use your decision making skills to figure out what image you want to use. For this example, I have selected a character which I found in this wonderful Vectortuts+ tutorial. Next we’re going to want to drop it in to Photoshop for some basic preparation. We’re are going to end up with three images, in order to understand what role each will play, please check out the helpful diagram below. If any of the following confuses you in any way, take a look at the images I have included in the downloadable files, it should be easier to understand once you see the final products. What we’re looking to get first is a base image (in this case the actual character), which is a simple matter of saving a cropped image to the size you want. We will skip the middle layer for a moment and look at the top image, which will act as a frame. The CSS The HTML The jQuery This is by far the easiest cut and paste job ever. Google+

Javascript Progress / Percentage Bar with CSS by WebAppers Sometimes, when we are building websites and web applications, we need a percentage bar / progress bar to show the progress of a specific task. However, it is very difficult to find a working and easy solution without using Flash. Therefore WebAppers have created a simple Javascript based Percentage Bar / Progress Bar which is inspired by Bare Naked App. Bare Naked App taught us how to display Percentage Bar with 2 images only by using CSS. And then I used a little bit of Javascript to make it more interactive. You can use it anywhere you can think of. display(elementId, percentage, colorCode) Display the Percentage Bar int colorCode: 1 = Green int colorCode: 2 = Yellow int colorCode: 3 = Orange int colorCode: 4 = Red plus(elementId, percentage) Increment the Percentage Bar by the specified percentage minus(elementId, percentage) Decrement the Percentage Bar by the specified percentage setProgress(elementId, percentage) Set the Percentage Bar with the specified percentage

40+ Excellent jQuery Tutorials | Tutorials Most of you already aware that jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. it’s also known for fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Or in developer’s words “write less, Do more”. Now days jQuery is on top of its charm and everyone from Javascript world love to experiment with it. Because of the remarkable significance of JQuery in Designing field, it is an essential to keep yourself up-to-date with its Quality uses and Examples. In this article, we’ll take a look at Various jQuery Tutorials for your source of inspiration. For those, who don’t know what is jQuery? You may be interested in the following related articles as well. Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful. Don’t forget to and follow us on Twitter — for recent updates. Excellent jQuery Tutorials

21 Simple and Useful jQuery Tutorials You Might Have Missed Introduction Queness is 6 months old now, I have created 21 tutorials that focus on different section of a website (menu, gallery, slider, tooltips, dock, modal window, ajax and jQuery turtorials). jQuery is an amazing javascript framework. I used to use prototype + scriptaculous and mootools, but I found that jQuery has a great documentation, plugins and huge amount of information out there online. It never cease to amaze me. So, just in case some of you might have missed my tutorials, this is a round up post for all of them and I hope it will able to assist you in the journey of learning jQuery. Navigation Menu Photo Gallery/Thumbnail Gallery Tooltips Dock Modal Window Custom jQuery Modal Window Tutorial | Demo Content Slider jQuery Plugin A Really Simple jQuery Plugin Tutorial | Demo Final words, I hope my tutorials are useful to you. Thanks for your support. :)

Related: