How to Use jQuery to Make Slick Page Transitions Adding the final touches to a site can be the difference between a polished and beautiful site that looks “refined,” and a mediocre site that leaves no impression on visitors. jQuery, the versatile JavaScript library, can be leveraged to create all these fine tuned elements. Today we’re going to look at how to use it to create elegant page transitions. Let’s get to it! If you would like to quickly take a peek at a very simple implementation of this technique, below is the demo for viewing and download. Getting Started With HTML/CSS To begin, let’s dive straight into the CSS. This will stop all of the visual elements in the body from loading, initially “hiding” everything. Therefore, a better solution will be adding the display:none CSS property using jQuery. Your HTML doesn’t have to change much to get these transitions working, but before we get started on that, let’s download and attach jQuery to our page. I suggest appending this in the head section of your document. Fine Tuning
How to: Customizing and Theming jQuery UI Datepicker jQuery UI is simply awesome and due to the ease of use, it is popular and widely used in almost any website that need interactive features. And, in this post, we’ll look at one of the features provided, the Datepicker widget. We will try to learn how to customize the calendar theme, so that you will be able to create your own theme that will correspond to your overall design. However, you need a bit of understanding in JavaScript and familiarity with CSS before following this tutorial. If you’re ready, let’s get started. The Assets Let’s prepare some of the essential assets for the calendar. First, the calendar design will refer to this PSD file from Premium Pixels. We will also need a web development tool like Firebug to inspect element classes/ids generated by the jQuery UI. Well, I think we’ve had enough preparation. Step 1: jQuery UI Datepicker First, go to jQuery UI download page. We should deselect all the components, as we don’t need all of them. Step 2: Customizing the Datepicker
jQuery Crash Course The web professional's online magazine of choice. In: Columns > The Carpenter's Workbench By Nathan Smith Published on October 8, 2007 As developers, we have more and more JavaScript libraries to choose from and, of course, the option not to use any at all. Pre-flight One of the aspects I appreciate the most is that the way elements are selected is similar—often identical—to CSS. One of the benefits of server-side programming is, for the most part, it all takes place in a stable and predictable environment. In recent years, programmers have risen to the challenge of remedying this problem, and have created JavaScript libraries in an attempt to level the playing field. There are some libraries, such as YUI and Mootools, which allow a buffet-style choice of which aspects of functionality are needed. It is this minimalist school of thought from which jQuery stems. I tend to think of jQuery as a universal translator of sorts. Gaining altitude #container a { ... } jQuery: $('#container a'); Resources
jquery-watermark - jQuery plugin adds watermark capability to HTML input elements Version 3.1.4 Compatible with jQuery 1.2.3+ Dual-licensed under the MIT or GPL2 licenses. Contents Introduction Using the Plugin Important Usage Notes Static Properties and Methods Troubleshooting About the Author See latest change log This simple-to-use jQuery plugin adds watermark capability to HTML input and textarea elements. A watermark typically appears as light gray text within an input or textarea element whenever the element is empty and does not have focus. For example, a search input space sometimes appears at the top of the page, giving the user quick access to the search functionality. This plugin lets you specify the text that will be used for the watermark, and optionally you can supply your own CSS class name that will be applied to the input or textarea element every time the watermark is shown. If you do not supply your own class name, the class name "watermark" is used. Other important features include: $('#inputId').watermark('Required information'); Important usage notes
Custom Effects with .animate() jQuery makes it possible to animate arbitrary CSS properties via the .animate() method. The .animate() method lets you animate to a set value, or to a value relative to the current value. Note: Color-related properties cannot be animated with .animate() using jQuery out of the box. Color animations can easily be accomplished by including the color plugin. We'll discuss using plugins later in the book. Definition: Easing describes the manner in which an effect occurs — whether the rate of change is steady, or varies over the duration of the animation. jQuery includes only two methods of easing: swing and linear. As of jQuery 1.4, it is possible to do per-property easing when using the .animate() method. For more details on easing options, see Animation documentation on api.jquery.com.
20+ Demos Showing Advanced jQuery Effects Just a short while ago, Flash was one of the primary technologies used by web designers to add interactivity to a website. Since the introduction of the iPad, with its lack of the Flash Player, there’s an acceleration in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others. Although Flash is still a very powerful and useful tool, which works great on many cases, several of the effects that web designers are accustomed to creating in Flash, can be just as easily implemented using jQuery. Here are 21 online demos that show the power of jQuery for creating advanced effects and interactivity that can rival Flash. 1. This demo mimics the popular card flip technique which can rotate an element 360 degrees around its own x or y‑axis. 2. jQuery Quicksand plugin This is a great plugin for sorting an array of elements/icons on a page with nice fade-in/fade-out and animation effects. 3. 4. 5. 6. 7. jQuery Circulate 8. 9. 10. 11. 12. 13. 14. 15. 16. 19. 20.
Date / Time Picker | A date picker control. To open the calendar, click the icon at the right side of the input box. While open, you can use keyboard controls to navigate the datepicker: Right arrow: next dayLeft arrow: previous dayDown arrow: next weekUp arrow: previous weekPage down: next monthPage up: previous monthEnter: select dateEsc: cancel selection and close datepicker Note that this control is not designed to work in IE6; although it will function correctly in most cases, the positioning of the calendar may be way off depending on how your page is styled. Constructor: var picker = new Control.DatePicker(element, options); Parameters: element - The CSS id of the <input> elementoptions - an object with name/value pairs of additional options Additional Options: icon - the icon to display in the right side of the input boxdatePicker - a boolean value determining whether to display the date picker. Locales: To add a new language, after including datepicker.js, see the following example: Examples
jQuery for Designers 10 jQuery History/Back Button Plugins Check out our collection of 10 jQuery History/Back Button plugins. These are really nice plugins. Dead simple to implement, most of the plugins work with bookmarking, refreshing, and back/forward buttons. 1. jQuery History Simple History Handler/Remote for Hash, State, Bookmarking, and Forward Back Buttons. Source + Demo 2. Plugin is for Ajax-driven pages to have back/forward navigation and to allow bookmarking. SourceDemo 3. jQuery Address Provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state. SourceDemo 4. jQuery BBQ: Back Button & Query Library jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. SourceDemo 5. jQuery hashchange event This jQuery plugin enables very basic bookmarkable #hash history via a cross-browser HTML5 window.onhashchange event. SourceDemo 6. This project is the successor of jQuery History. SourceDemo 7. jQuery Ajaxy 8. 10.
DataTables | Table plug-in for jQuery