PacktLib: jQuery for Designers: Beginner’s Guide

jQuery for Designers Beginner's Guide

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Designer, Meet jQuery

What is jQuery?

Why is jQuery awesome for designers?

JavaScript basics

Designer, meet JavaScript

Downloading jQuery and getting set up

Time for action – downloading and attaching jQuery

Another option for using jQuery

Your first jQuery script

Time for action – getting ready for jQuery

Time for action – adding a new paragraph

Summary

Enhancing Links

Opening links in a new window

Time for action – opening a link in a new window

Adding icons to links

Time for action – creating a list of links

Simple tabs

Time for action – creating simple tabs

Summary

Making a Better FAQ Page

FAQ page markup

Time for action – setting up the HTML

Time for action – moving around an HTML document

Sprucing up our FAQ page

Time for action – making it fancy

We're almost there!

Time for action – adding some final touches

Summary

Building Custom Scrollbars

Designer, meet plugins

Setting up some scrollable HTML

Time for action – scrollable HTML

Adding custom scrollbars

Time for action – simple custom scrollbars

Adding arrow controls

Time for action – adding up and down arrows

Customizing the Scrollbar Style

Time for action – adding our own styles

Smooth scrolling

Time for action – setting up smooth scrolling

Summary

Creating Custom Tooltips

Simple custom text tooltips

Time for action – simple text tooltips

Customizing qTip's appearance

Time for action – customizing qTips

Custom styles for tooltips

Time for action – writing custom tooltip styles

Enhancing navigation with tooltips

Time for action – building a fancy navigation bar

Showing other content in tooltips

Time for action – building custom Ajax tooltips

Summary

Building an Interactive Navigation Menu

Horizontal drop-down menu

Time for action – creating a horizontal drop-down menu

Time for action – improving the drop-down menu with jQuery

Vertical fly-out menu

Time for action – creating a vertical fly-out menu

Customizing the navigation menu

Vendor prefixes

Time for action – customizing Superfish menus

Time for action – incorporating custom animation

The hoverIntent plugin

Time for action – adding the hoverIntent plugin

Summary

Navigating Asynchronously

Simple asynchronous navigation

Time for action – setting up a simple website

Time for action – adding Ajax magic

Deluxe asynchronous navigation

Time for action – building deluxe asynchronous navigation

Time for action – using the BBQ plugin

Time for action – highlighting the current page in the Navigation

Time for action – adding a loading animation

Summary

Showing Content in Lightboxes

Simple photo gallery

Time for action – setting up a simple photo gallery

Customizing Colorbox's behavior

Time for action – using a custom transition

Time for action – setting a fixed size

Time for action – creating a slideshow

Fancy login

Time for action – creating a fancy login form

Video player

Time for action – showing a video in a lightbox

One-page web gallery

Time for action – creating a one-page web gallery

Summary

Creating Slideshows

Planning a slideshow

Simple crossfade slideshow

Time for action – creating a simple crossfade slideshow

Nivo Slider

Time for action – creating a Nivo Slider slideshow

Galleriffic slideshow

Time for action – creating a Galleriffic slideshow

The CrossSlide plugin

Time for action – building a CrossSlide slideshow

Summary

Featuring Content in Carousels and Sliders

Basic jCarousel

Time for action – creating a basic carousel

Animated news ticker

Time for action – creating an animated news ticker

Featured content slider

Time for action – creating a featured content slider

Time for action – adding pagination controls

Time for action – adding next and previous buttons

Carousel slideshow

Time for action – creating a thumbnail slideshow

Time for action – adding the slideshow

Time for action – activating the Next and Previous Buttons

Summary

Creating an Interactive Data Grid

Basic data grid

Time for action – creating a basic data grid

Customizing the data grid

Time for action – customizing the data grid

Summary

Improving Forms

An HTML5 web form

Time for action – setting up an HTML5 web form

Setting focus

Time for action – setting focus to the first field

Placeholder text

Time for action – adding placeholder text

Validating user entry

Time for action – validating form values on the fly

Improving appearance

Time for action – improving form appearance

Time for action – adding uniform for styling the unstylable

Time for action – styling the styleable

Time for action – creating a custom uniform theme

Summary

Index