Book Image

jQuery for Designers Beginner's Guide Second Edition

By : Natalie Maclees
Book Image

jQuery for Designers Beginner's Guide Second Edition

By: Natalie Maclees

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
jQuery for Designers Beginner's Guide Second Edition
Natalie Maclees
Jul, 2014 | 398 pages
No titles found
Table of Contents (21 chapters)
jQuery for Designers Beginner's Guide Second Edition
jQuery for Designers Beginner's Guide Second Edition
Credits
Credits
About the Author
About the Author
Acknowledgments
Acknowledgments
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Designer, Meet jQuery
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
2
Enhancing Links
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
3
Making a Better FAQ Page
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
4
Building an Interactive Navigation Menu
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
5
Showing Content in Lightboxes
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
6
Creating Slideshows and Sliders
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
7
Working with Responsive Designs
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
8
Getting the Most from Images
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
9
Improving Typography
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
10
Displaying Data Beautifully
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
11
Reacting to Scrolling
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
12
Improving Forms
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
Pop Quiz Answers
Pop Quiz Answers
Chapter 1, Designer, Meet jQuery
Chapter 2, Enhancing Links
Chapter 4, Building an Interactive Navigation Menu
Chapter 5, Showing Content in Lightboxes
Chapter 6, Creating Slideshows and Sliders
Chapter 7, Working with Responsive Designs
Chapter 8, Getting the Most from Images
Chapter 9, Improving Typography
Chapter 10, Displaying Data Beautifully
Chapter 11, Reacting to Scrolling
Chapter 12, Improving Forms
Index
Index

A simple photo gallery

A simple photo gallery is probably the most common use for lightboxes. We'll set up a page that shows thumbnails of each photo and displays the full-size image in a lightbox when the thumbnail is clicked. To get started, you'll need a series of photographs with smaller-sized thumbnails of each.

Previous Section
End of Section 2
Next Section