Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying jQuery for Designers Beginner's Guide Second Edition
  • Table Of Contents Toc
jQuery for Designers Beginner's Guide Second Edition

jQuery for Designers Beginner's Guide Second Edition

By : Natalie Maclees
3.5 (2)
Buy this Book
close
close
jQuery for Designers Beginner's Guide Second Edition

jQuery for Designers Beginner's Guide Second Edition

3.5 (2)
By: Natalie Maclees
Buy this Book

Overview of this book

A step-by-step guide that spices up your web pages and designs them in the way you want using the most widely used JavaScript library, jQuery. The beginner-friendly and easy-to-understand approach of the book will help get to grips with jQuery in no time. 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 (15 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Time for action – heading
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Designer, Meet jQuery
chevron up
Icon
1. Designer, Meet jQuery
Icon
What is jQuery?
Icon
Why is jQuery awesome for designers?
Icon
JavaScript basics
Icon
Designer, Meet JavaScript
Icon
Downloading jQuery and getting set up
Icon
Time for action – downloading and attaching jQuery
Icon
Another option for using jQuery
Icon
Your first jQuery script
Icon
Time for action – getting ready for jQuery
Icon
Adding a paragraph
Icon
Time for action – adding a new paragraph
Icon
Summary
2
2. Enhancing Links
Icon
2. Enhancing Links
Icon
Simple tabs
Icon
Time for action – creating simple tabs
Icon
Designer, meet plugins
Icon
Simple custom tooltips
Icon
Time for action – simple custom tooltips
Icon
Customizing PowerTip's appearance
Icon
Time for action – customizing PowerTip
Icon
Enhancing navigation with tooltips
Icon
Time for action – building a fancy navigation bar
Icon
Showing other content in tooltips
Icon
Time for action – showing custom content in tooltips
Icon
Summary
3
3. Making a Better FAQ Page
Icon
3. Making a Better FAQ Page
Icon
Marking up the FAQ page
Icon
Time for action – setting up the HTML file
Icon
Time for action – moving around an HTML document
Icon
Sprucing up our FAQ page
Icon
Time for action – making it fancy
Icon
We're almost there!
Icon
Time for action – adding some final touches
Icon
Summary
4
4. Building an Interactive Navigation Menu
Icon
4. Building an Interactive Navigation Menu
Icon
The horizontal drop-down menu
Icon
Time for action – creating a horizontal drop-down menu
Icon
The vertical fly-out menu
Icon
Time for action – creating a vertical fly-out menu
Icon
Customizing the navigation menu
Icon
Styling the :focus pseudoclass
Icon
Time for action – customizing Superfish menus
Icon
The hoverIntent plugin
Icon
Time for action – incorporating custom animations
Icon
Summary
5
5. Showing Content in Lightboxes
Icon
5. Showing Content in Lightboxes
Icon
A simple photo gallery
Icon
Time for action – setting up a simple photo gallery
Icon
Customizing Colorbox's behavior
Icon
Time for action – using a custom transition
Icon
Time for action – setting a fixed size
Icon
Time for action – creating a slideshow
Icon
Fancy login
Icon
Time for action – creating a fancy login form
Icon
Video player
Icon
Time for action – showing a video in a lightbox
Icon
A one-page web gallery
Icon
Time for action – creating a one-page web gallery
Icon
Summary
6
6. Creating Slideshows and Sliders
Icon
6. Creating Slideshows and Sliders
Icon
Planning a slideshow or slider
Icon
A simple crossfade slideshow
Icon
Time for action – creating a simple crossfade slideshow
Icon
Using the Basic Slider plugin
Icon
Time for action – building a Basic Slider
Icon
Creating a Cycle2 slideshow
Icon
Time for action – building a slideshow with Cycle2
Icon
The Cycle2 carousel
Icon
Time for action – building a Cycle2 carousel
Icon
Combining a carousel with a slideshow
Icon
Time for action – creating the carousel controller
Icon
Time for action – adding the slideshow
Icon
Time for action – connecting the carousel and the slider
Icon
Summary
7
7. Working with Responsive Designs
Icon
7. Working with Responsive Designs
Icon
Using FitVids for responsive videos
Icon
Time for action – resizing videos
Icon
Responsive menus
Icon
Time for action – making our menu responsive
Icon
Creating a tiled layout
Icon
Time for action – creating a masonry layout
Icon
Time for action – creating a tiled layout with different width items
Icon
Summary
8
8. Getting the Most from Images
Icon
8. Getting the Most from Images
Icon
Lazy loading images
Icon
Time for action – lazy loading images
Icon
Creating zoomable images
Icon
Time for action – creating zoomable images
Icon
Time for action – creating multiple zoomable images
Icon
Using fullscreen backgrounds
Icon
Time for action – creating a fullscreen background image
Icon
Time for action – creating a fullscreen slideshow
Icon
Summary
9
9. Improving Typography
Icon
9. Improving Typography
Icon
Sizing headlines perfectly
Icon
Time for action – sizing headlines to the screen width
Icon
Creating bold text blocks
Icon
Time for action – creating a bold text block with SlabText
Icon
Styling individual letters
Icon
Time for action – using Lettering.js to style letters
Icon
Setting text on a curve
Icon
Time for action – setting text on a curve with the ArcText plugin
Icon
Summary
10
10. Displaying Data Beautifully
Icon
10. Displaying Data Beautifully
Icon
A basic data grid
Icon
Time for action – creating a basic data grid
Icon
A customized data grid
Icon
Time for action – customizing the data grid
Icon
Showing graphs and charts
Icon
Time for action – showing data in graphs and charts
Icon
Time for action – creating a pie chart
Icon
Time for action – calculating the ideal size for charts and graphs
Icon
Summary
11
11. Reacting to Scrolling
Icon
11. Reacting to Scrolling
Icon
Setting up the document
Icon
Time for action – setting up the HTML file
Icon
Time for action – setting up HTML for Scrollorama
Icon
Time for action – creating a parallax effect
Icon
Time for action – creating a horizontal animation
Icon
Time for action – adding navigation to sections of the page
Icon
Summary
12
12. Improving Forms
Icon
12. Improving Forms
Icon
An HTML5 web form
Icon
Time for action – setting up an HTML5 web form
Icon
Setting focus
Icon
Time for action – setting focus to the first field
Icon
Validating site visitor entry
Icon
Time for action – validating form values on the fly
Icon
Improving the appearance
Icon
Time for action – improving form appearance
Icon
Time for action – adding Fancyform to style the unstyleable
Icon
Summary
13
A. Pop Quiz Answers
Icon
Chapter 1, Designer, Meet jQuery
Icon
Chapter 2, Enhancing Links
Icon
Chapter 4, Building an Interactive Navigation Menu
Icon
Chapter 5, Showing Content in Lightboxes
Icon
Chapter 6, Creating Slideshows and Sliders
Icon
Chapter 7, Working with Responsive Designs
Icon
Chapter 8, Getting the Most from Images
Icon
Chapter 9, Improving Typography
Icon
Chapter 10, Displaying Data Beautifully
Icon
Chapter 11, Reacting to Scrolling
Icon
Chapter 12, Improving Forms
14
Index
Icon
Index

Chapter 1. Designer, Meet jQuery

You might have heard quite a lot about jQuery over the past couple of years. It has quickly become one of the most popular code packages in use on the Web today. And you might have wondered what all the fuss was about.

Whether you've tried to figure out JavaScript before and have thrown up your hands in frustration or have been too intimidated to even give it a go, you'll find that jQuery is a wonderfully approachable and easy-to-understand way to get started with JavaScript.

In this chapter, we will cover the following topics:

  • What jQuery is and why it's ideal for designers
  • Progressive enhancement and graceful degradation
  • JavaScript basics
  • Downloading jQuery
  • Your first jQuery script
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
jQuery for Designers Beginner's Guide Second Edition
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon