jQuery for Designers Beginner's Guide

Book description

An approachable introduction to web design in jQuery for non-programmers with this book and ebook.

  • 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

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.

Table of contents

  1. jQuery for Designers Beginner's Guide
    1. Table of Contents
    2. jQuery for Designers Beginner's Guide
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Time for action – heading
        1. What just happened?
        2. Pop quiz – heading
        3. Have a go hero – heading
      6. Reader feedback
      7. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Designer, Meet jQuery
      1. What is jQuery?
      2. Why is jQuery awesome for designers?
        1. Uses CSS selectors you already know
        2. Uses HTML markup you already know
        3. Impressive effects in just a few lines of code
        4. Huge plugin library available
        5. Great community support
      3. JavaScript basics
        1. Progressive enhancement and graceful degradation
        2. Gotta keep 'em separated
          1. Content
          2. Presentation
          3. Behavior
      4. Designer, meet JavaScript
        1. Variables
        2. Objects
        3. Functions
      5. Downloading jQuery and getting set up
      6. Time for action – downloading and attaching jQuery
      7. Another option for using jQuery
      8. Your first jQuery script
      9. Time for action – getting ready for jQuery
        1. What just happened?
        2. Adding a paragraph
      10. Time for action – adding a new paragraph
        1. What just happened?
      11. Summary
    9. 2. Enhancing Links
      1. Opening links in a new window
        1. Why not just use the target attribute?
      2. Time for action – opening a link in a new window
        1. What just happened?
      3. Adding icons to links
      4. Time for action – creating a list of links
        1. What just happened?
      5. Simple tabs
      6. Time for action – creating simple tabs
        1. What just happened?
      7. Summary
    10. 3. Making a Better FAQ Page
      1. FAQ page markup
      2. Time for action – setting up the HTML
        1. What just happened?
      3. Time for action – moving around an HTML document
        1. What just happened?
      4. Sprucing up our FAQ page
      5. Time for action – making it fancy
        1. What just happened?
      6. We're almost there!
      7. Time for action – adding some final touches
        1. What just happened?
      8. Summary
    11. 4. Building Custom Scrollbars
      1. Designer, meet plugins
        1. Choosing a plugin
      2. Setting up some scrollable HTML
      3. Time for action – scrollable HTML
      4. Adding custom scrollbars
      5. Time for action – simple custom scrollbars
        1. What just happened?
      6. Adding arrow controls
      7. Time for action – adding up and down arrows
        1. What just happened?
      8. Customizing the Scrollbar Style
      9. Time for action – adding our own styles
        1. What just happened?
        2. Have a go hero – style the scrollbars the way you want
      10. Smooth scrolling
      11. Time for action – setting up smooth scrolling
        1. What just happened?
      12. Summary
    12. 5. Creating Custom Tooltips
      1. Simple custom text tooltips
      2. Time for action – simple text tooltips
        1. What just happened?
      3. Customizing qTip's appearance
      4. Time for action – customizing qTips
        1. What just happened?
      5. Custom styles for tooltips
      6. Time for action – writing custom tooltip styles
        1. What just happened?
        2. Have a go hero – create a tooltip of your own design
      7. Enhancing navigation with tooltips
      8. Time for action – building a fancy navigation bar
        1. What just happened?
      9. Showing other content in tooltips
      10. Time for action – building custom Ajax tooltips
      11. Summary
    13. 6. Building an Interactive Navigation Menu
      1. Horizontal drop-down menu
      2. Time for action – creating a horizontal drop-down menu
      3. Time for action – improving the drop-down menu with jQuery
        1. What just happened?
      4. Vertical fly-out menu
      5. Time for action – creating a vertical fly-out menu
        1. What just happened?
      6. Customizing the navigation menu
        1. :hover and .sfHover
        2. Cascading inherited styles
      7. Vendor prefixes
      8. Time for action – customizing Superfish menus
        1. What just happened?
        2. Custom animation
      9. Time for action – incorporating custom animation
        1. What just happened?
      10. The hoverIntent plugin
      11. Time for action – adding the hoverIntent plugin
        1. Have a go hero – set your own speed
      12. Summary
    14. 7. Navigating Asynchronously
      1. Simple asynchronous navigation
      2. Time for action – setting up a simple website
        1. What just happened?
      3. Time for action – adding Ajax magic
        1. What just happened?
      4. Deluxe asynchronous navigation
      5. Time for action – building deluxe asynchronous navigation
        1. What just happened?
      6. Time for action – using the BBQ plugin
        1. What just happened?
      7. Time for action – highlighting the current page in the Navigation
        1. What just happened?
      8. Time for action – adding a loading animation
        1. What just happened?
      9. Summary
    15. 8. Showing Content in Lightboxes
      1. Simple photo gallery
      2. Time for action – setting up a simple photo gallery
        1. What just happened?
      3. Customizing Colorbox's behavior
        1. Transition
      4. Time for action – using a custom transition
        1. What just happened?
        2. Fixed size
      5. Time for action – setting a fixed size
        1. What just happened?
          1. innerWidth/innerHeight
          2. InitialWidth/initialHeight
          3. maxWidth/maxHeight
        2. Creating a slideshow
      6. Time for action – creating a slideshow
        1. What just happened?
      7. Fancy login
      8. Time for action – creating a fancy login form
        1. What just happened?
      9. Video player
      10. Time for action – showing a video in a lightbox
        1. What just happened?
      11. One-page web gallery
      12. Time for action – creating a one-page web gallery
        1. What just happened?
      13. Summary
    16. 9. Creating Slideshows
      1. Planning a slideshow
      2. Simple crossfade slideshow
      3. Time for action – creating a simple crossfade slideshow
        1. What just happened?
      4. Nivo Slider
      5. Time for action – creating a Nivo Slider slideshow
        1. What just happened?
        2. Have a go hero – customize the slideshow
      6. Galleriffic slideshow
      7. Time for action – creating a Galleriffic slideshow
        1. What just happened?
      8. The CrossSlide plugin
      9. Time for action – building a CrossSlide slideshow
        1. What just happened?
      10. Summary
    17. 10. Featuring Content in Carousels and Sliders
      1. Basic jCarousel
      2. Time for action – creating a basic carousel
        1. What just happened?
      3. Animated news ticker
      4. Time for action – creating an animated news ticker
        1. What just happened?
        2. Have a go hero – design your own carousel
      5. Featured content slider
      6. Time for action – creating a featured content slider
        1. Pagination controls
      7. Time for action – adding pagination controls
        1. Next and previous buttons
      8. Time for action – adding next and previous buttons
        1. What just happened?
      9. Carousel slideshow
      10. Time for action – creating a thumbnail slideshow
        1. What just happened?
        2. Slideshow
      11. Time for action – adding the slideshow
        1. What just happened?
        2. Next and previous buttons
      12. Time for action – activating the Next and Previous Buttons
        1. What just happened?
      13. Summary
    18. 11. Creating an Interactive Data Grid
      1. Basic data grid
      2. Time for action – creating a basic data grid
        1. What just happened?
      3. Customizing the data grid
      4. Time for action – customizing the data grid
        1. What just happened?
      5. Summary
    19. 12. Improving Forms
      1. An HTML5 web form
      2. Time for action – setting up an HTML5 web form
        1. What just happened?
      3. Setting focus
      4. Time for action – setting focus to the first field
        1. What just happened?
      5. Placeholder text
      6. Time for action – adding placeholder text
        1. What just happened?
      7. Validating user entry
      8. Time for action – validating form values on the fly
        1. What just happened?
      9. Improving appearance
      10. Time for action – improving form appearance
        1. What just happened?
        2. Styling the unstylable
      11. Time for action – adding uniform for styling the unstylable
        1. Styles for all
      12. Time for action – styling the styleable
        1. What just happened?
        2. Our own theme
      13. Time for action – creating a custom uniform theme
        1. What just happened?
      14. Summary
    20. Index

Product information

  • Title: jQuery for Designers Beginner's Guide
  • Author(s): Natalie MacLees
  • Release date: April 2012
  • Publisher(s): Packt Publishing
  • ISBN: 9781849516709