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.
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.
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!
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
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
70+ Inspirational Examples of Websites Designed With HTML5 The web is constantly evolving. New and creative websites are being created every day, pushing the limitations of HTML in every direction. HTML4 has been around for nearly a decade and now its time to move forward. To give authors more flexibility and interoperability, HTML5 is proposed as the next major revision of HTML. It works on just about every platform, is compatible with older browsers, and handles errors gracefully. In this presentation, you’ll find a variety of highly-creative, beautiful and most importantly inspirational designs that are coded in HTML5. The main purpose here is to stimulate your creativity and to inspire your imagination to create awesome designs because your website represents you and your brand. You may be interested in the following modern trends related articles as well. Please feel free to join us and you are always welcome to share your thoughts that our readers may like. Don’t forget to and follow us on Twitter — for recent updates. What is HTML5 Hd-live