The 20 Most Practical and Creative Uses of jQuery There have been plenty of posts on the number of awesome jQuery plugins and where to find them. However, sometimes it is best not to rely on third party plugins and resources. Do it yourself the old fashioned way! One of our sporadic writers, James Padolsey, has a nice feature on his website. I've saved my absolute favorite site for last. Keep in mind that jQuery is simply a tool and is only limited by your creativity and skill level. SimpleModal Demos / Eric Martin / ericmmartin.com Basic Modal Dialog A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel. Demo Download Basic Modal Dialog For this demo, SimpleModal is using this "hidden" data for its content. Examples: $('#basicModalContent').modal(); // jQuery object; this demo$.modal(document.getElementById('basicModalContent')); // DOM$.modal('<p><b>HTML</b> elements</p>'); // HTML More details... OSX Style Dialog A modal dialog configured to behave like an OSX dialog. Inspired by ModalBox, an OSX style dialog built with prototype. Demo Download OSX Style Modal Dialog Hello! SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development. As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. (or press ESC or click the overlay)
10 Awesome Techniques and Examples of Animation with jQuery jQuery can pretty much do anything you can think of. All you need is a creative imagination and some time to learn the simple and intuitive API. In this article, we share with you some innovative uses of jQuery in animating web design elements. You’ll read about some interesting techniques, tutorials, and examples that will show you how to create similar effects on your own websites and web apps. 1. This example by Dutch web developer Gaya Kessler features an impressive animation effect of cartoonish smoke emanating from factory smoke stacks. Live Demo: Smoke Effect 2. Sam Dunn of the web development duo, Build Internet, wrote a tutorial on how to create an animated landscape using transparent PNG images. Live Demo: Animated Postcard 3. In this tutorial, you will learn how to animate image elements in a smooth and fluid manner. Live Demo: Realistic Hover Effect 4. Live Demo: youlove.us (web page header) 5. Live Demos: Freestyle Sample, Image Sequence Sample, Fade Text Sample 6. jQuery Blend
30 jQuery Accordion Menus, Tutorials And Best Examples Accordion menus are used widely in navigating, sliding, minimizing and maximizing content. Such accordions practically are expandable whenever needed; you can really save some space and be able to show a lot of information using this technique. Yes, and, of course, such sliding content always is great from the design point of view aby giving your visitor unique experience while he is looking at the site. Great, isn’t it? This article has been updated on 5/28/2012 Accordionza – jQuery Plugin Accordionza is a very flexible and lightweight jQuery (v1.4+) accordion plugin. Many features — Easily configure all effects and speed, pause on hover, autoplay and autorestart, collapsable captions and more.Keyboard navigation — Optionally enable the cursor keys to browse an accordion.Lightweight — The plugin takes only 3kB to load.Flexible — Three accordion styles are included. View Demo 1. Simple free jQuery accordion plugin. 2. jQuery UI Demo 2.1. View Demo 3. 3.1. View Demo 4. 5. jQuery Accordion Menu
Interface elements for jQuery - About Interface Getting Clients: Approaching The Company - Smashing Magazine Advertisement A defining factor in any freelancer or agency’s success in gaining new business is their ability to market their skills effectively. In this three-part series, we will explore ways in which designers can strategically promote themselves to get new clients. Securing new business by approaching companies can be a very challenging process, full of pitfalls. Here, we will look at 10 steps to impressing potential clients and avoiding the most common mistakes. Step One: Be Focused A focused approach to work is paramount for success. IndustryBy specializing in a particular industry, such as health care or retail, you build a portfolio of relevant experience. Step Two: Be Insightful Once you have established the kind of organizations you would like to work with, learn how their businesses work. Who do they work with? These kinds of questions will give you important insight into the services that an organization requires and, therefore, what services you can offer. Step Five: Be Unique
Pagemap ImageWall — Freeware Web Photo Gallery with slideshow | Pagemap Premium Portfolios Configuration With Config Tags you can customize Pagemap Imagewall to your needs: change colours and sizes, include the gallery in your own PHP scripts, create a footer with links to contact and your home page … and much more. Just create a text file (.txt) named config.txt and write the Config Tags in there. If write permissions for your Pagemap Imagewall directory is to 0777 the script will create a default config.txt by itself. Uninstall If you are not able to delete files that was created by Pagemap Imagewall just rename the file index.php in uninstall.php and run the script. Change author, title and description You can define an author of the gallery that will shown in the footer of as Photos by Your Name; a gallery title that will shown in the browser title bar; and a gallery description as preview text for search engines. [Author: Ischariot Pasadelski] [Gallery Title: Fluktuation 8] [Gallery Description: The works of a polish action artist] Background colour or background image
Building a jQuery Image Scroller In this tutorial, we're going to be building an image scroller, making use of jQuery's excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads. The finished widget will be completely cross-browser and perform as expected in the latest versions of all of the most common browsers. Getting Started Let's create the underlying HTML page first of all; in a new page in your text editor add the following code: Save this as imageScroller.html inside a new folder. Our widget consists of a series of nested containers and a bunch of images wrapped in links. Styling the Widget Bringing the Widget to Life Changing Direction