10 Useful jQuery Plugins jQuery is great for enhancing a website. Whether it be by adding effects that give the site a wow factor, or by making navigation easier, jQuery can have a big impact on the way a website is perceived and used. jQuery is extremely popular among web designers and developers for it’s flexibility, ease-of-use, and of course it’s plugins. So for this post, we’ve rounded up 10 more jQuery plugins and techniques that you should find very useful. Supersized 3.0 Plugin This plugin produces a full screen slideshow complete with transitions, preloading, and navigation controls. Apple-like Retina Effect Learn how to create an Apple Retina Display magnifying effect with jQuery and CSS. Flip! Flip is a jQuery plugin that will flip easily your elements in four directions. jSlickmenu jSlickmenu, creates, well, slick menus with jQuery. jQuery Address Overscroll Overscroll is a jQuery plug-in that mimics the iphone/ipad scrolling experience in a browser. jQuery Page Curl Contactable Panning Slideshow Sliding Labels
Unity in Web Design Today we're going to take a look at a design principle that plays a major role in the success of a web design: Unity. As with many designed elements in the world, unity can make or break a site's design. A well "unified" site feels natural, organic, and seamless; Where an site lacking unity can feel disjointed, discontinuous, and discombobulated (in other words, it just falls apart visually). Read on to find out more! Introduction to Unity Unity is an interesting concept. Unity is really important because it helps create a consistent brand and identity for your site. Why Is Unity Important? Think of it this way. The same goes for lots of things in the natural world as well. Unity holds your design together as the structure, both visually and conceptually. The Factors Of Unity There's many factors that contribute to a sense of unity within a web page. Color - Color is one of the biggest factors in the unity of a design. Color Repetition and Consistency Alignment Proximity Visual Direction
jQuery Fundamentals 10 Fresh jQuery Plugins and Tutorials | Tutorials The popularity of jQuery continues to grow. This means that we’re seeing it used on more websites these days, and there are more developers coming up with new ways to use it. The great thing about that is many of these developers are sharing what they learn though tutorials and plugins. Beautiful Background Image Navigation This tutorial will teach you how to create a beautiful navigation that has a background image slide effect. Quovolver Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way. Lettering.js Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography. imgAreaSelect imgAreaSelect is a plugin for selecting a rectangular area of an image. An HTML5 Slideshow w/ Canvas & jQuery This tutorial will help you create a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well. Tiny Carousel jQuery Panel Gallery 2.0 Style my Tooltips
Using the Law of Attraction in Web Design What is it that makes a brand, product and/or website so appealing that you can’t resist the urge to indulge? How can something on my computer screen garner so much of my attention and intrigue me enough to buy into that particular product or service? Most brand marketers understand the needs of the customers they’re marketing to, and work to drive them to purchase. I’m also convinced these customers are fueled to buy into a product by the Laws of Attraction. Appeal The first theoretical Law of Attraction is that of Appeal. Know Your Audience Who your audience is will play a big role in how your website should look and function. PBS Kids' PBS Kids' target audience is evident. Carbonica Carbonica is a website aimed at helping people reduce their carbon emissions. Kanvas Kanvas allows you to create art online. Attach The second theoretical Law of Attraction to utilize in Web Design is that of attachment. Be Authentic Use Words That Reflect Your Purpose "Content precedes design. Be Responsive
Usage There are times when reading data from the DOM is simply too slow or unwieldy, particularly when dealing with thousands or millions of data rows. To address this DataTables' server-side processing feature provides a method to let all the "heavy lifting" be done by a database engine on the server-side (they are after-all highly optimised for exactly this kind of thing), and then have that information drawn in the user's web-browser. As such you can display tables consisting of millions of rows with ease. When using server-side processing, DataTables will make an XHR request to the server for each draw of the information on the page (i.e. when paging, sorting, filtering etc). DataTables will send a number of variables to the server to allow it to perform the required processing, and then return the data in the format required by DataTables. Parameters sent to the server The following information is sent to the server for each draw request. Reply from the server Example JSON return
8 Fresh and Useful jQuery Plugins jQuery helps us web designers and developers do some amazing things, and plugins make it almost too easy. That’s why it’s an obsession of mine to find new ones. I’ve been on the lookout for the past couple of weeks, and I’ve collected some good ones. Here are 8 Fresh and Useful jQuery Plugins. Isotope Isotype is a jQuery plugin for creating dynamic and intelligent layouts. jQuewy jQuewy is a simple, efficient, and lightweight loader for javascript functions, with a powerful CDN-ready backend. Sausage Sausage is a jQuery UI widget for contextual pagination. ImageLens ImageLens is a jQuery plug-in to add lens style zooming effect to an image. jquery.timepickr.js This jQuery plugin is an experimental approach to enhancing web time picking. CodeExplorer This jQuery plugin produces an online code explorer. 960 Grid on jQuery-Mobile 960 Grid on jQuery-Mobile is a port of 960 grid to jquery mobile. jMenu jMenu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.
The Gestalt Principle: Design Theory for Web Designers The way that people see our designs strongly effects the meaning that they take away from them. The Gestalt Principle examines this phenomena; As such, it’s one of the fundamental principles that each and every web designer should consider when moving through the design process. We’ll also examine how understanding gestalt will improve your own workflow! Trying to come up with a good and creative design may seem easy for someone who has attended a design school, but for the 90% of web designers out there who never attended any design course or school coming mostly from either development or generally non-design backgrounds. This is part of a series of design-theory articles that will guide you through the basic principles of the design process. Gestalt is a German word meaning "essence or shape of an entity’s complete form", and this single definition may be one of the most important rules of design. Take a look at this example image…
jQuery Form Framework - jFormer 50 Fundamental jQuery Controls, Components and Plugins Every seasoned developer has one and every young and upcoming developer should be thinking of building one – a good and concise collection of UI controls, components and plugins that you can always rely on in times of need. Of course, there are plenty of great UI frameworks, kits and libraries that you could use, but none will offer you every component and none of them will be tailored to your own personal preferences and needs. Up until a few months ago my controls had been collected and sourced from various frameworks (Prototype, MooTools, jQuery…), upon review it seemed a little out-dated, some components unnecessary and some controls desperately needed updated. It seemed logical to give the collection a fresh outlook and a uniformity under one framework – I chose jQuery. So, here are my 50 Fundamental jQuery Controls and Rich UI Components… What would you add? Mega Menu » jQuery Listmenu Horizontal Menu » Droppy Nested Drop Down Menus Droppy is a quick and dirty nested drop-down menu.
Web Design Library — One-stop Web Design Resource jQuery forms, 100 best 5 years ago, web developers and most programmers were forced to do tons of things in order to program accordingly a website, from the basic layout to defining all the different variables and actions that give life to the site. Developers often utilized JavaScript in some part of the process to facilitate the construction of many different webpages; though JS definitely helped out developers, there were still a lot of things that made them consume dozens of time and achieve minimal results. But since the debut of the powerful framework jQuery, things changed forever. jQuery can be used for many things, from developing fancy animations to simply spice up ordinary designs that were previously difficult to do. jQuery was created with the specific purpose of enhance the standard JavaScript faculties and help designers and developers generate prettier interfaces and web elements without spending hours working with code. Our top selection jFormer – Added April 29 / 2011 Niceforms FormBox SheepIt!
jQuery Sequential List Have you ever had to manually code something that is sequential? Didn't you find it annonying? Well, here is a simple solution for you. View Demo Sequential List 1a. First, download a copy of jQuery. <script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#step li").each(function (i) { i = i+1; $(this).addClass("item" i); }); }); </script> The jQuery will output the source code as: 1b. Style the <li> element with a background image accordingly (step1.png, step2.png, step3.png, and so on..). 2a. You can also use this technique to add sequential content using jQuery's prepend feature. <script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#commentlist li").each(function (i) { i = i+1; $(this).prepend('<span class="commentnumber"> #' i '</span>'); }); }); </script> The code will add the <span class="commentnumber"> tag (with # + 1) to each <li> tag. 2b.
960 Grid System