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