jQuery for Designers Beginner's Guide Second Edition

Design interactive websites to improve user experience by using the popular JavaScript library

jQuery for Designers Beginner's Guide Second Edition

Beginner's Guide
Natalie MacLees

Design interactive websites to improve user experience by using the popular JavaScript library
$23.99
$39.99
RRP $23.99
RRP $39.99
eBook
Print + eBook
$12.99 p/month

Want this title & more? Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.
+ Collection
Free Sample

Book Details

ISBN 139781783284535
Paperback398 pages

About This Book

  • Enhance the user experience of your site by adding useful jQuery features – provide easy navigation, communicate updates and changes, and allow site visitors to interact with content
  • Learn the modular approach to jQuery, including the addition of plug-ins to achieve advanced effects without writing much code at all
  • A step-by-step approach to beginning jQuery, including the creation of rapid, powerful, dynamic web pages and web applications

Who This Book Is For

If you know the fundamentals of HTML and CSS, and want to extend your knowledge by learning to use JavaScript, then this is just the book for you. jQuery makes JavaScript straightforward and approachable – you'll be surprised at how easy it can be to add animations and special effects to your beautifully designed pages.

Table of Contents

Chapter 1: 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
Adding a paragraph
Time for action – adding a new paragraph
Summary
Chapter 2: Enhancing Links
Simple tabs
Time for action – creating simple tabs
Designer, meet plugins
Simple custom tooltips
Time for action – simple custom tooltips
Customizing PowerTip's appearance
Time for action – customizing PowerTip
Enhancing navigation with tooltips
Time for action – building a fancy navigation bar
Showing other content in tooltips
Time for action – showing custom content in tooltips
Summary
Chapter 3: Making a Better FAQ Page
Marking up the FAQ page
Time for action – setting up the HTML file
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
Chapter 4: Building an Interactive Navigation Menu
The horizontal drop-down menu
Time for action – creating a horizontal drop-down menu
The vertical fly-out menu
Time for action – creating a vertical fly-out menu
Customizing the navigation menu
Styling the :focus pseudoclass
Time for action – customizing Superfish menus
The hoverIntent plugin
Time for action – incorporating custom animations
Summary
Chapter 5: Showing Content in Lightboxes
A 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
A one-page web gallery
Time for action – creating a one-page web gallery
Summary
Chapter 6: Creating Slideshows and Sliders
Planning a slideshow or slider
A simple crossfade slideshow
Time for action – creating a simple crossfade slideshow
Using the Basic Slider plugin
Time for action – building a Basic Slider
Creating a Cycle2 slideshow
Time for action – building a slideshow with Cycle2
The Cycle2 carousel
Time for action – building a Cycle2 carousel
Combining a carousel with a slideshow
Time for action – creating the carousel controller
Time for action – adding the slideshow
Time for action – connecting the carousel and the slider
Summary
Chapter 7: Working with Responsive Designs
Using FitVids for responsive videos
Time for action – resizing videos
Responsive menus
Time for action – making our menu responsive
Creating a tiled layout
Time for action – creating a masonry layout
Time for action – creating a tiled layout with different width items
Summary
Chapter 8: Getting the Most from Images
Lazy loading images
Time for action – lazy loading images
Creating zoomable images
Time for action – creating zoomable images
Time for action – creating multiple zoomable images
Using fullscreen backgrounds
Time for action – creating a fullscreen background image
Time for action – creating a fullscreen slideshow
Summary
Chapter 9: Improving Typography
Sizing headlines perfectly
Time for action – sizing headlines to the screen width
Creating bold text blocks
Time for action – creating a bold text block with SlabText
Styling individual letters
Time for action – using Lettering.js to style letters
Setting text on a curve
Time for action – setting text on a curve with the ArcText plugin
Summary
Chapter 10: Displaying Data Beautifully
A basic data grid
Time for action – creating a basic data grid
A customized data grid
Time for action – customizing the data grid
Showing graphs and charts
Time for action – showing data in graphs and charts
Time for action – creating a pie chart
Time for action – calculating the ideal size for charts and graphs
Summary
Chapter 11: Reacting to Scrolling
Setting up the document
Time for action – setting up the HTML file
Time for action – setting up HTML for Scrollorama
Time for action – creating a parallax effect
Time for action – creating a horizontal animation
Time for action – adding navigation to sections of the page
Summary
Chapter 12: 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
Validating site visitor entry
Time for action – validating form values on the fly
Improving the appearance
Time for action – improving form appearance
Time for action – adding Fancyform to style the unstyleable
Summary

What You Will Learn

  • Download and include the jQuery library on your website
  • Make tabbed interfaces and custom tooltips
  • Construct an accordion to improve an FAQ page
  • Build an interactive, animated drop-down menu
  • Show images, videos, and other content in lightboxes
  • Create slideshows, sliders, and carousels
  • Improve responsive designs and topography
  • React to users scrolling down your page
  • Improve forms to make them more beautiful and more usable

In Detail

This book offers approachable and beginner-friendly lessons for designers with little or no background in JavaScript. It helps unmask the popular JavaScript library by simplifying how to create dynamic website features such as animated slideshows, parallax scrolling effects, responsive design, and more!

Starting with an introduction to the jQuery library, and a brief description of JavaScript, you will then work through a few simple tasks before diving into using plugins to quickly and simply add complex effects with just a few lines of code. You'll learn how to build an animated drop-down menu, how to show content in lightboxes, and how to create an assortment of slideshows and sliders. Create impressive effects on your web pages with just a few lines of code.

Authors

Table of Contents

Chapter 1: 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
Adding a paragraph
Time for action – adding a new paragraph
Summary
Chapter 2: Enhancing Links
Simple tabs
Time for action – creating simple tabs
Designer, meet plugins
Simple custom tooltips
Time for action – simple custom tooltips
Customizing PowerTip's appearance
Time for action – customizing PowerTip
Enhancing navigation with tooltips
Time for action – building a fancy navigation bar
Showing other content in tooltips
Time for action – showing custom content in tooltips
Summary
Chapter 3: Making a Better FAQ Page
Marking up the FAQ page
Time for action – setting up the HTML file
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
Chapter 4: Building an Interactive Navigation Menu
The horizontal drop-down menu
Time for action – creating a horizontal drop-down menu
The vertical fly-out menu
Time for action – creating a vertical fly-out menu
Customizing the navigation menu
Styling the :focus pseudoclass
Time for action – customizing Superfish menus
The hoverIntent plugin
Time for action – incorporating custom animations
Summary
Chapter 5: Showing Content in Lightboxes
A 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
A one-page web gallery
Time for action – creating a one-page web gallery
Summary
Chapter 6: Creating Slideshows and Sliders
Planning a slideshow or slider
A simple crossfade slideshow
Time for action – creating a simple crossfade slideshow
Using the Basic Slider plugin
Time for action – building a Basic Slider
Creating a Cycle2 slideshow
Time for action – building a slideshow with Cycle2
The Cycle2 carousel
Time for action – building a Cycle2 carousel
Combining a carousel with a slideshow
Time for action – creating the carousel controller
Time for action – adding the slideshow
Time for action – connecting the carousel and the slider
Summary
Chapter 7: Working with Responsive Designs
Using FitVids for responsive videos
Time for action – resizing videos
Responsive menus
Time for action – making our menu responsive
Creating a tiled layout
Time for action – creating a masonry layout
Time for action – creating a tiled layout with different width items
Summary
Chapter 8: Getting the Most from Images
Lazy loading images
Time for action – lazy loading images
Creating zoomable images
Time for action – creating zoomable images
Time for action – creating multiple zoomable images
Using fullscreen backgrounds
Time for action – creating a fullscreen background image
Time for action – creating a fullscreen slideshow
Summary
Chapter 9: Improving Typography
Sizing headlines perfectly
Time for action – sizing headlines to the screen width
Creating bold text blocks
Time for action – creating a bold text block with SlabText
Styling individual letters
Time for action – using Lettering.js to style letters
Setting text on a curve
Time for action – setting text on a curve with the ArcText plugin
Summary
Chapter 10: Displaying Data Beautifully
A basic data grid
Time for action – creating a basic data grid
A customized data grid
Time for action – customizing the data grid
Showing graphs and charts
Time for action – showing data in graphs and charts
Time for action – creating a pie chart
Time for action – calculating the ideal size for charts and graphs
Summary
Chapter 11: Reacting to Scrolling
Setting up the document
Time for action – setting up the HTML file
Time for action – setting up HTML for Scrollorama
Time for action – creating a parallax effect
Time for action – creating a horizontal animation
Time for action – adding navigation to sections of the page
Summary
Chapter 12: 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
Validating site visitor entry
Time for action – validating form values on the fly
Improving the appearance
Time for action – improving form appearance
Time for action – adding Fancyform to style the unstyleable
Summary

Book Details

ISBN 139781783284535
Paperback398 pages
Read More