jQuery for Designers PDF
Preview jQuery for Designers
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 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 – 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
The list of books you might like
