jQuery for Designers: Beginner’s Guide


There is a newer version of this book available - jQuery for Designers Beginner's Guide Second Edition
jQuery for Designers: Beginner’s Guide
eBook: $23.99
Formats: PDF, PacktLib, ePub and Mobi formats
$20.39
save 15%!
Print + free eBook + free PacktLib access to the book: $63.98    Print cover: $39.99
$39.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Reviews
Support
Sample Chapters
  • Enhance the user experience of your site by adding useful jQuery features
  • Learn the basics of adding impressive jQuery effects and animations even if you've never written a line of JavaScript
  • Easy step-by-step approach shows you everything you need to know to get started improving your website with jQuery

Book Details

Language : English
Paperback : 332 pages [ 235mm x 191mm ]
Release Date : April 2012
ISBN : 1849516707
ISBN 13 : 9781849516709
Author(s) : Natalie MacLees
Topics and Technologies : All Books, Web Development, Beginner's Guides, jQuery, Open Source, Web Development

Table of Contents

Preface
Chapter 1: Designer, Meet jQuery
Chapter 2: Enhancing Links
Chapter 3: Making a Better FAQ Page
Chapter 4: Building Custom Scrollbars
Chapter 5: Creating Custom Tooltips
Chapter 6: Building an Interactive Navigation Menu
Chapter 7: Navigating Asynchronously
Chapter 8: Showing Content in Lightboxes
Chapter 9: Creating Slideshows
Chapter 10: Featuring Content in Carousels and Sliders
Chapter 11: Creating an Interactive Data Grid
Chapter 12: Improving Forms
Index
  • Chapter 1: Designer, Meet jQuery
    • What is jQuery?
    • Why is jQuery awesome for designers?
      • Uses CSS selectors you already know
      • 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
    • 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
    • Chapter 2: Enhancing Links
      • Opening links in a new window
        • Why not just use the target attribute?
      • Time for action – opening a link in a new window
      • Adding icons to links
      • Time for action – creating a list of links
      • Simple tabs
      • Time for action – creating simple tabs
      • Summary
      • Chapter 3: Making a Better FAQ Page
        • FAQ page markup
        • Time for action – setting up the HTML
        • 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
        • Chapter 4: Building Custom Scrollbars
          • Designer, meet plugins
            • Choosing a plugin
          • Setting up some scrollable HTML
          • Time for action – scrollable HTML
          • Adding custom scrollbars
          • Time for action – simple custom scrollbars
          • Adding arrow controls
          • Time for action – adding up and down arrows
          • Customizing the Scrollbar Style
          • Time for action – adding our own styles
          • Smooth scrolling
          • Time for action – setting up smooth scrolling
          • Summary
          • Chapter 5: Creating Custom Tooltips
            • Simple custom text tooltips
            • Time for action – simple text tooltips
            • Customizing qTip's appearance
            • Time for action – customizing qTips
            • Custom styles for tooltips
            • Time for action – writing custom tooltip styles
            • Enhancing navigation with tooltips
            • Time for action – building a fancy navigation bar
            • Showing other content in tooltips
            • Time for action – building custom Ajax tooltips
            • Summary
            • Chapter 6: Building an Interactive Navigation Menu
              • Horizontal drop-down menu
              • Time for action – creating a horizontal drop-down menu
              • Time for action – improving the drop-down menu with jQuery
              • Vertical fly-out menu
              • Time for action – creating a vertical fly-out menu
              • Customizing the navigation menu
                • :hover and .sfHover
                • Cascading inherited styles
              • Vendor prefixes
              • Time for action – customizing Superfish menus
                • Custom animation
              • Time for action – incorporating custom animation
              • The hoverIntent plugin
              • Time for action – adding the hoverIntent plugin
              • Summary
              • Chapter 7: Navigating Asynchronously
                • Simple asynchronous navigation
                • Time for action – setting up a simple website
                • Time for action – adding Ajax magic
                • Deluxe asynchronous navigation
                • Time for action – building deluxe asynchronous navigation
                • Time for action – using the BBQ plugin
                • Time for action – highlighting the current page in the Navigation
                • Time for action – adding a loading animation
                • Summary
                • Chapter 8: Showing Content in Lightboxes
                  • Simple photo gallery
                  • Time for action – setting up a simple photo gallery
                  • Customizing Colorbox's behavior
                    • Transition
                  • Time for action – using a custom transition
                    • Fixed size
                  • Time for action – setting a fixed size
                    • innerWidth/innerHeight
                    • InitialWidth/initialHeight
                    • maxWidth/maxHeight
                  • Creating a slideshow
                • 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
                • One-page web gallery
                • Time for action – creating a one-page web gallery
                • Summary
                  • Chapter 9: Creating Slideshows
                    • Planning a slideshow
                    • Simple crossfade slideshow
                    • Time for action – creating a simple crossfade slideshow
                    • Nivo Slider
                    • Time for action – creating a Nivo Slider slideshow
                    • Galleriffic slideshow
                    • Time for action – creating a Galleriffic slideshow
                    • The CrossSlide plugin
                    • Time for action – building a CrossSlide slideshow
                    • Summary
                    • Chapter 10: Featuring Content in Carousels and Sliders
                      • Basic jCarousel
                      • Time for action – creating a basic carousel
                      • Animated news ticker
                      • Time for action – creating an animated news ticker
                      • Featured content slider
                      • Time for action – creating a featured content slider
                        • Pagination controls
                      • Time for action – adding pagination controls
                        • Next and previous buttons
                      • Time for action – adding next and previous buttons
                      • Carousel slideshow
                      • Time for action – creating a thumbnail slideshow
                        • Slideshow
                      • Time for action – adding the slideshow
                        • Next and previous buttons
                      • Time for action – activating the Next and Previous Buttons
                      • Summary
                        • Chapter 12: 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
                          • Placeholder text
                          • Time for action – adding placeholder text
                          • Validating user entry
                          • Time for action – validating form values on the fly
                          • Improving appearance
                          • Time for action – improving form appearance
                            • Styling the unstylable
                          • Time for action – adding uniform for styling the unstylable
                            • Styles for all
                          • Time for action – styling the styleable
                            • Our own theme
                          • Time for action – creating a custom uniform theme
                          • Summary

                          Natalie MacLees

                          Natalie MacLees is a frontend web developer and UI designer, and the founder and principal of the interactive agency Purple Pen Productions. She founded and runs the jQuery LA users' group and together with Noel Saw, she heads the Southern California WordPress  user's group, organizing WordPress meetups, help sessions, and workshops. She was the lead organizer for WordCamp Los Angeles 2013 and 2014 and organized the first annual Website Weekend LA. She's also the founder of the Los Angeles chapter of Girl Develop It, bringing affordable and accessible coding classes to the community.

                          She makes periodic appearances on the WPwatercooler podcast and co-hosts the WP Unicorn Project podcast with Suzette Franck. She makes her online home at nataliemac.com. Her obsession with the Web began when she bought her first computer in 1996 and promptly used it to build her first website. She spends the few moments she manages to be offline each day watching baseball, crafting, reading, baking, belly dancing, collecting Hello Kitty items, and avoiding avocados and olives at all costs.

                          Code Downloads

                          Download the code and support files for this book.


                          Submit Errata

                          Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                          Errata

                          - 7 submitted: last submission 25 Jul 2014

                          Errata type: Typo| Page number: 32 | Errata date: 23 May 12

                          *The closing tag for

                          Errata type: code| Page number: 16 | Errata date: 06 April 12

                          <script src="scripts/scripts.js"></scripts>
                          should be:
                          <script src="scripts/scripts.js"></script>

                          Errata type: Code| Page number: 39

                          Point number 10, last line of code block }); is missing after .filter(':first').click();

                           

                          Errata type:Code| Page Number:28

                          Line 1, paragraph 1

                          "e" parameter is to be added inside the parentheses of the function of the added click action

                          Errata type:Code| Page Number:32

                          Point Number 3

                          .gif should be replaced by .png

                          Errata type:Code| Page Number:13

                          The following code line has quotes missing:

                          var dog = Magdelena Von Barkington;

                          It should be:

                          var dog = 'Magdelena Von Barkington';

                          Errata type:Code | Page Number:16

                          In paragraph 5., the last "script" is plural but should be singular "script".  
                          Is: <script src="scripts/scripts/scripts.js"></scripts> Should be: <script  
                          src="scripts/scripts/scripts.js"></script>

                          Sample chapters

                          You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                          Frequently bought together

                          jQuery for Designers: Beginner’s Guide +    jQuery UI 1.10: The User Interface Library for jQuery =
                          50% Off
                          the second eBook
                          Price for both: £23.65

                          Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                          What you will learn from this book

                          • Download and include the jQuery library on your website
                          • Build browsable photo galleries and animated slideshows, along with carousels and sliders
                          • Create tabbed interfaces in a few lines of code without a plugin
                          • Include custom scrollbars that fit the design of your site but are still easy for your site visitors to use
                          • Use AJAX to only load up the changing content area rather than the whole page
                          • Enhance the navigation on your site by using animations and custom tooltips
                          • Enhance web forms to make them easier for your site visitor to use

                           

                          In Detail

                          jQuery is awesome for designers – it builds easily on the CSS and HTML you already know and allows you to create impressive effects with just a few lines of code. However, without a background in programming, JavaScript – on which jQuery is built – can feel intimidating and impossible to grasp. This book will show you how simple it can be to learn the basics and then extend your capabilities by taking advantage of jQuery plugins.

                          jQuery for Designers offers approachable lessons for designers with little or no background in JavaScript. The book begins by introducing the jQuery library and a small and simple introduction to JavaScript. Then you'll step through a few simple tasks to get your feet wet before diving into using plugins to quickly and simply add complex effects with just a few lines of code.

                          You'll be surprised at how far you can get with JavaScript when you start with the power of the jQuery library and this book will show you how. We'll cover common interface widgets and effects such as tabbed interfaces, custom tooltips, and custom scrollbars. You'll learn how to create an animated navigation menu and how to add simple AJAX effects to enhance your site visitors' experience. Then we'll wrap up with interactive data grids which make sorting and searching data easy.

                          Approach

                          Part of Packt’s Beginner’s Guide series, each chapter focuses on a specific part of your website and how to improve its design with the use of jQuery. There are plenty of screenshots and practical step-by-step instructions making it easy to apply jQuery to your site.

                          Who this book is for

                          This book is for designers who have the basics of HTML and CSS, but want to extend their knowledge by learning to use JavaScript and jQuery.

                          Code Download and Errata
                          Packt Anytime, Anywhere
                          Register Books
                          Print Upgrades
                          eBook Downloads
                          Video Support
                          Contact Us
                          Awards Voting Nominations Previous Winners
                          Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                          Resources
                          Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software