You are previewing jQuery for Designers : Beginner's Guide - Second Edition.
O'Reilly logo
jQuery for Designers : Beginner's Guide - Second Edition

Book Description

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

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.

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
  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

    Table of Contents

    1. jQuery for Designers Beginner's Guide Second Edition
      1. Table of Contents
      2. jQuery for Designers Beginner's Guide Second Edition
      3. Credits
      4. About the Author
      5. Acknowledgments
      6. About the Reviewers
      7. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      8. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Time for action – heading
          1. What just happened?
          2. Pop quiz – heading
          3. Have a go hero – heading
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      9. 1. Designer, Meet jQuery
        1. What is jQuery?
        2. Why is jQuery awesome for designers?
          1. It uses CSS selectors you already know
          2. It uses HTML markup you already know
          3. Impressive effects in just a few lines of code
          4. Huge plugin library available
          5. Great community support
        3. JavaScript basics
          1. Progressive enhancement and graceful degradation
          2. Gotta keep 'em separated
            1. Content
            2. Presentation
            3. Behavior
        4. Designer, Meet JavaScript
          1. Variables
          2. Objects
          3. Functions
        5. Downloading jQuery and getting set up
        6. Time for action – downloading and attaching jQuery
          1. What just happened?
          2. Pop quiz – setting up a new project
        7. Another option for using jQuery
        8. Your first jQuery script
        9. Time for action – getting ready for jQuery
          1. What just happened?
        10. Adding a paragraph
        11. Time for action – adding a new paragraph
          1. What just happened?
          2. Have a go hero – adding more content
        12. Summary
      10. 2. Enhancing Links
        1. Simple tabs
        2. Time for action – creating simple tabs
          1. What just happened?
          2. Pop quiz – working with events
        3. Designer, meet plugins
          1. Choosing a plugin
        4. Simple custom tooltips
        5. Time for action – simple custom tooltips
          1. What just happened?
        6. Customizing PowerTip's appearance
        7. Time for action – customizing PowerTip
          1. What just happened?
        8. Enhancing navigation with tooltips
        9. Time for action – building a fancy navigation bar
          1. What just happened?
        10. Showing other content in tooltips
        11. Time for action – showing custom content in tooltips
          1. What just happened?
          2. Have a go hero – create clickable tooltips for an image gallery
        12. Summary
      11. 3. Making a Better FAQ Page
        1. Marking up the FAQ page
        2. Time for action – setting up the HTML file
          1. What just happened?
        3. Time for action – moving around an HTML document
          1. What just happened?
        4. Sprucing up our FAQ page
        5. Time for action – making it fancy
          1. What just happened?
        6. We're almost there!
        7. Time for action – adding some final touches
          1. What just happened?
        8. Summary
      12. 4. Building an Interactive Navigation Menu
        1. The horizontal drop-down menu
        2. Time for action – creating a horizontal drop-down menu
          1. What just happened?
        3. The vertical fly-out menu
        4. Time for action – creating a vertical fly-out menu
          1. What just happened?
        5. Customizing the navigation menu
          1. :hover and .sfHover
          2. Cascading inherited styles
          3. Pop quiz – understanding the cascade in CSS
        6. Styling the :focus pseudoclass
        7. Time for action – customizing Superfish menus
          1. What just happened?
        8. The hoverIntent plugin
        9. Time for action – incorporating custom animations
          1. What just happened?
          2. Have a go hero – further customizing the Superfish menu
        10. Summary
      13. 5. Showing Content in Lightboxes
        1. A simple photo gallery
        2. Time for action – setting up a simple photo gallery
          1. What just happened?
        3. Customizing Colorbox's behavior
          1. Transition
        4. Time for action – using a custom transition
          1. What just happened?
          2. Fixed size
        5. Time for action – setting a fixed size
          1. What just happened?
          2. Creating a slideshow
        6. Time for action – creating a slideshow
          1. What just happened?
        7. Fancy login
        8. Time for action – creating a fancy login form
          1. What just happened?
        9. Video player
        10. Time for action – showing a video in a lightbox
          1. What just happened?
          2. Pop quiz – loading content into Colorbox
        11. A one-page web gallery
        12. Time for action – creating a one-page web gallery
          1. What just happened?
          2. Have a go hero – create a custom Colorbox
        13. Summary
      14. 6. Creating Slideshows and Sliders
        1. Planning a slideshow or slider
        2. A simple crossfade slideshow
        3. Time for action – creating a simple crossfade slideshow
          1. What just happened?
          2. Pop quiz – working with jQuery chaining
        4. Using the Basic Slider plugin
        5. Time for action – building a Basic Slider
          1. What just happened?
          2. Have a go hero – customize the Basic Slider
        6. Creating a Cycle2 slideshow
        7. Time for action – building a slideshow with Cycle2
        8. The Cycle2 carousel
        9. Time for action – building a Cycle2 carousel
        10. Combining a carousel with a slideshow
          1. Setting up the carousel
        11. Time for action – creating the carousel controller
          1. Adding the slideshow
        12. Time for action – adding the slideshow
          1. Connecting the carousel and the slider
        13. Time for action – connecting the carousel and the slider
        14. Summary
      15. 7. Working with Responsive Designs
        1. Using FitVids for responsive videos
        2. Time for action – resizing videos
          1. What just happened?
          2. Pop quiz – choosing breakpoints for responsive design
        3. Responsive menus
        4. Time for action – making our menu responsive
          1. What just happened?
          2. Have a go hero – create a custom menu
        5. Creating a tiled layout
        6. Time for action – creating a masonry layout
          1. What just happened?
          2. Creating a tiled layout with items of different widths
        7. Time for action – creating a tiled layout with different width items
          1. What just happened?
        8. Summary
      16. 8. Getting the Most from Images
        1. Lazy loading images
        2. Time for action – lazy loading images
          1. What just happened?
          2. Pop quiz – building accessible pages
        3. Creating zoomable images
        4. Time for action – creating zoomable images
          1. What just happened?
          2. Zooming in on multiple images
        5. Time for action – creating multiple zoomable images
          1. What just happened?
        6. Using fullscreen backgrounds
        7. Time for action – creating a fullscreen background image
          1. What just happened?
          2. Creating a fullscreen slideshow
        8. Time for action – creating a fullscreen slideshow
          1. What just happened?
        9. Summary
      17. 9. Improving Typography
        1. Sizing headlines perfectly
        2. Time for action – sizing headlines to the screen width
          1. What just happened?
        3. Creating bold text blocks
        4. Time for action – creating a bold text block with SlabText
          1. What just happened?
          2. Pop quiz – sizing text in responsive designs
        5. Styling individual letters
        6. Time for action – using Lettering.js to style letters
          1. What just happened?
          2. Have a go hero – creating fancy effects with Lettering.js
        7. Setting text on a curve
        8. Time for action – setting text on a curve with the ArcText plugin
          1. What just happened?
        9. Summary
      18. 10. Displaying Data Beautifully
        1. A basic data grid
        2. Time for action – creating a basic data grid
          1. What just happened?
        3. A customized data grid
        4. Time for action – customizing the data grid
          1. What just happened?
          2. Pop quiz – building correct tables
        5. Showing graphs and charts
        6. Time for action – showing data in graphs and charts
          1. What just happened?
          2. Creating pie charts
        7. Time for action – creating a pie chart
          1. Using charts and graphs in responsive designs
        8. Time for action – calculating the ideal size for charts and graphs
          1. What just happened?
        9. Summary
      19. 11. Reacting to Scrolling
        1. Setting up the document
        2. Time for action – setting up the HTML file
          1. What just happened?
          2. Setting up HTML for scrolling animations
        3. Time for action – setting up HTML for Scrollorama
          1. What just happened?
          2. Adding a parallax effect
        4. Time for action – creating a parallax effect
          1. What just happened?
          2. Creating other animations
        5. Time for action – creating a horizontal animation
          1. What just happened?
          2. Have a go hero – add custom animations
          3. Adding navigation
        6. Time for action – adding navigation to sections of the page
          1. What just happened?
          2. Pop quiz – using Scrollorama in responsive design
        7. Summary
      20. 12. Improving Forms
        1. An HTML5 web form
        2. Time for action – setting up an HTML5 web form
          1. What just happened?
          2. Pop quiz – working with HTML5 form elements
        3. Setting focus
        4. Time for action – setting focus to the first field
          1. What just happened?
        5. Validating site visitor entry
        6. Time for action – validating form values on the fly
          1. What just happened?
        7. Improving the appearance
        8. Time for action – improving form appearance
          1. What just happened?
          2. Styling the unstyleable
        9. Time for action – adding Fancyform to style the unstyleable
          1. Have a go hero – a fully custom form
        10. Summary
      21. A. Pop Quiz Answers
        1. Chapter 1, Designer, Meet jQuery
          1. Pop quiz – setting up a new project
        2. Chapter 2, Enhancing Links
          1. Pop quiz – working with events
        3. Chapter 4, Building an Interactive Navigation Menu
          1. Pop quiz – understanding the cascade in CSS
        4. Chapter 5, Showing Content in Lightboxes
          1. Pop quiz – loading content into Colorbox
        5. Chapter 6, Creating Slideshows and Sliders
          1. Pop quiz – working with jQuery chaining
        6. Chapter 7, Working with Responsive Designs
          1. Pop quiz – choosing breakpoints for responsive design
        7. Chapter 8, Getting the Most from Images
          1. Pop quiz – building accessible pages
        8. Chapter 9, Improving Typography
          1. Pop quiz – sizing text in responsive designs
        9. Chapter 10, Displaying Data Beautifully
          1. Pop quiz – building correct tables
        10. Chapter 11, Reacting to Scrolling
          1. Pop quiz – using Scrollorama in responsive design
        11. Chapter 12, Improving Forms
          1. Pop quiz – working with HTML5 form elements
      22. Index