All About jQuery: Fresh and Useful jQuery Plugins and Tutorials Feb 24 2012 Every designer knows that jQuery is not only a handy tool, but it is also very popular and widely implemented. Thus, they try to master their jQuery skills. If you fit into this category then this post of over 40 fresh and cool jQuery plugins and tutorials is for you. This showcase should allow you to grab some of the techniques required for developing a more interactive and visually appealing website with jQuery and harness the power of this tool. When you come out the other side of this collection and have finished learning all that these plugins and tutorials throw at you, we hope that using jQuery will be a much simpler task. jQuery Resources Password Strength Verification with jQuery ( Demo | Tackle the Tutorial ) In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish. More on Page Two Nousheen Aquil is a web graphic designer.
Sexy Opacity Animation with MooTools or jQuery A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique which you may implement in jQuery or MooTools. The XHTML <div id="forest-slot-1" class="opacity"><h2>The Forest</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. There's nothing too special about the HTML above; the awesomeness comes with CSS. The CSS To enhance the design of my content block, I'm adding a colorful background image behind where the content blocks will display. The MooTools JavaScript The structure for both the jQuery version and MooTools version is the same. The jQuery JavaScript $(document).ready(function() { var opacity = 0.7, toOpacity = 0.9, duration = 250; $('.opacity').css('opacity',opacity).hover(function() { $(this).fadeTo(duration,toOpacity); }, function() { $(this).fadeTo(duration,opacity); } );}); Be Heard
jQuery Responsive Thumbnail Gallery Plugin jQuery Plugin for creating image galleries that scale to fit their container. Photos by Andrew Schmidt via publicdomainpictures.net How to Use Link to the script after jQuery. $(document).ready(function() { var gallery = new $.ThumbnailGallery($('#gallery')); }); You can configure the settings as follows(example has the default config values assigned) Parameters are: thumbImages: path to the thumbnails smallImages: path to the small size images largeImages: path to the large size images count: number of images/thumbnails thumbImageType: file extension for thumbnail images (all should be the same) imageType: file extension for gallery images (all should be the same) breakpoint: width at which the small and large image sizes are swapped shadowStrength: strength of the shadow on the non-selected thumbs (0-1) Download Plugin: zip tar Other stuff by me: johnpolacek.github.com
Top 20 Horizontal jQuery Accordion Plugins for Websites Here is a great lineup of 20 amazing horizontal jQuery accordion plugins for websites. 1. Unleash The Unleash jQuery Accordion Slider is a completely responsive jQuery accordion, and has some amazing animation effects, make sure to check this one out! 2. Candy Slider Candy Slider is a powerful slider plugin for joomla. 3. Grid Accordion combines the functionality of a thumbnail grid and an accordion panel, offering you an interesting method to display your portfolio. 4. Accordion Pro is a jQuery powered horizontal accordion plugin for WordPress.with multiple skins 5. The classic accordion’s name doesn’t do it justice in my opinion. 6. Everybody knows SlideDeck. 7. The newest version is a full blown WordPress plugin which is responsive supports instagram, and so much more! 8. A simple accordion created by an author who couldn’t find what he wanted in other accordion scripts. 9. Accordionza is a very flexible and lightweight jQuery (v1.4+) accordion plugin. 10. 11. 12. 13. 14. 16. 17. 18. 19.
How To Build an Animated Header in jQuery Home > CSS, Front End Development, HTML, Javascript > How To Build an Animated Header in jQuery Why not give a little flair to your header. This tutorial will show you how to animate your header’s background image using jQuery to give your website that little extra something. What We Are Building We are going to build a header that animates it’s background. We will also encase the header in shadow for the little extra dramatic effect. How it’s Going to Work The header background image is going to be super tall. Now that we have our background image, we will also need to create a shadow overlay image. After that it’s just a matter of animating the background image with jQuery so it scrolls. Getting Started The first thing we’re going to need is the HTML in place. Here is the HTML: The CSS We aren’t going to do anything too difficult here. Here is the CSS: Just a note, the png transparency won’t work in IE6. The jQuery There are a couple ways of animating the background with jQuery.
SUPERSCROLLORAMA SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. Next, start up SuperScrollorama. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)? Example Use the addTween method to build your scroll animations. .addTween(target, tween, duration, offset, reverse) target: scroll position (number) or element (string or object) tween: a Greensock animation tween object duration: scroll duration of tween in pixels (0 means autoplay) offset: adjust the animation start point reverse: disable reverse animation on up scrolling (optional) Example:
Just another dropdown menu concept I found this two years old Dribbble shot by Ignacio Giri. Don't ask me how, I just don't remember how did I stumble upon it but one thing is clear: I bookmarked this dropdown menu concept, stared at it a bit and then I thought about making something similar with CSS. View demo The markup The code below does not need any explanation, so I'll just paste here the raw version so you can take a quick look at it. <ul class="menu cf"><li><a href="">Menu item</a></li><li><a href="">Menu item</a><ul class="submenu"><li><a href="">Submenu item</a></li><li><a href="">Submenu item</a></li><li><a href="">Submenu item</a></li><li><a href="">Submenu item</a></li></ul></li><li><a href="">Menu item</a></li><li><a href="">Menu item</a></li><li><a href="">Menu item</a></li></ul> Also, the cf does exactly what you've been thinking it would do: it clears floats. The CSS Because we need to clear floats: ... and we don't need any browser defaults for none of the below: On RWD Small bug That's all!
Lateral On-Scroll Sliding with jQuery After getting the request, we are going to show you how to create a "slide-in on scroll" effect. You've probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from "outside" of the page to the center when they are in the viewport. View demo Download source After getting the request, we are going to show you how to create a “slide-in on scroll” effect. The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. So, let’s start! The Markup The HTML structure is going to consist of a main container and some rows that we’ll use to place the left and the right elements. The CSS The row will serve as a wrapper for the left and right elements: The style for the description:
Libro gratuito de jQuery en español - Fundamentos de jQuery Useful Calendar & Date Picker Scripts For Web Developers Calendars can be seen frequently in most web pages today especially in blogs and personal websites. As for corporate sites or e-commerce sites, it is utilize to layout announcements, up-coming events, contest and much more. What makes a calendar almost essential? It allows users to know what is new, what to be expect on specified date and track back older information all at one glance. Calendar in hotel, cinema or airlines website requires user’s interaction to reserve rooms and air tickets. In today’s post, we are showing you some of the best calendar and date pickers scripts that we have come to know. iCal-like Calendar A stunning calendar which looks very similar to iPhone Calendar application and iCal. MooTools DatePicker Configurable Javascript datepicker with smooth animations. FullCalendar This is Google style jQuery plugin provides a full-sized, drag and drop calendar. jPint JPint is web-based iPhone dev which looks brilliant. jCalendar Datepicker jQuery Week Calendar jMonthCalendar
Create a Stunning Sliding Door Effect with jQuery Introduction Continue from our previous thumbnail effect series. This is the third one. If you missed the previous two, you can visit the following links: Advertisement This tutorial is going to be awesome! Basically, this is what it does: Grab all the div with qitem class, find the image and replace it with four DIVs (four corners)Each of the corner will have the same background image (grabbed from qitem class's child image element) but with different background position: top left, top right, bottom left and bottom right. The following image illustrate how it works: It's a good practise to keep HTML as simple as possible. In the demo, we can see there are total of 9 items. <div class="qitem"><a href=" src="1.gif" alt="Test 1" title="" width="126" height="126"/></a><span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In CSS section, it's quite simple. For caption, position:absolute is a must to se the z-index. 3.
10 Useful jQuery Popup Plugins Modal dialog boxes are a great way to show quick information to your users. It also helps to alert them of errors, warnings, prompts for information and more. Here is a list of 10 jQuery Popup Modal Dialog Plugins. Best jQuery Date Picker Plugins for Input Fields When building a web form you need to consider a number of factors for your particular application. Many developers will need to handle special data such as the user’s birthday, invoice date, or subscription trial period. These examples could all benefit from the use of a dynamic date picker for HTML5 input fields. Free trial on Treehouse: Do you want to learn more about jQuery development? Click here to try a free 14-day trial on Treehouse. Thankfully there are a number of handy open source tools you may utilize for this task. DatePicker This specific jQuery date picker plugin was developed by Stefan Petre who has released a number of related plugins as well. It is also possible to limit the choices a user can make by passing distinct parameters into the jQuery function. $('input').DatePicker(options); Overall this is a great plugin to get started when you need something that works quickly. Bootstrap DatePicker glDatePicker jQuery UI Datepicker Zebra Datepicker ptTimeSelect Final Thoughts