Cover image for jQuery for Designers Beginner's Guide

jQuery for Designers Beginner's Guide

Author Natalie MacLees
Release Date: 2012/04/01
ISBN: 9781849516709
Topic:
0%
138
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

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
    1. jQuery for Designers
    2. Credits
    3. About the Author
    4. About the Reviewers
    5. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
        1. Time for action — heading
          1. What just happened?
          2. Pop quiz — heading
          3. Have a go hero — heading
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    7. 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
      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
      10. Time for action — adding a new paragraph
      11. Summary
    8. 2. Enhancing Links
      1. Opening links in a new window
      2. Time for action — opening a link in a new window
      3. Adding icons to links
      4. Time for action — creating a list of links
      5. Simple tabs
      6. Time for action — creating simple tabs
      7. Summary
    9. 3. Making a Better FAQ Page
      1. FAQ page markup
      2. Time for action — setting up the HTML
      3. Time for action — moving around an HTML document
      4. Sprucing up our FAQ page
      5. Time for action — making it fancy
      6. We're almost there!
      7. Time for action — adding some final touches
      8. Summary
    10. 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
      6. Adding arrow controls
      7. Time for action — adding up and down arrows
      8. Customizing the Scrollbar Style
      9. Time for action — adding our own styles
      10. Smooth scrolling
      11. Time for action — setting up smooth scrolling
      12. Summary
    11. 5. Creating Custom Tooltips
      1. Simple custom text tooltips
      2. Time for action — simple text tooltips
      3. Customizing qTip's appearance
      4. Time for action — customizing qTips
      5. Custom styles for tooltips
      6. Time for action — writing custom tooltip styles
      7. Enhancing navigation with tooltips
      8. Time for action — building a fancy navigation bar
      9. Showing other content in tooltips
      10. Time for action — building custom Ajax tooltips
      11. Summary
    12. 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
      4. Vertical fly-out menu
      5. Time for action — creating a vertical fly-out menu
      6. Customizing the navigation menu
        1. :hover and .sfHover
        2. Cascading inherited styles
      7. Vendor prefixes
      8. Time for action — customizing Superfish menus
      9. Time for action — incorporating custom animation
      10. The hoverIntent plugin
      11. Time for action — adding the hoverIntent plugin
      12. Summary
    13. 7. Navigating Asynchronously
      1. Simple asynchronous navigation
      2. Time for action — setting up a simple website
      3. Time for action — adding Ajax magic
      4. Deluxe asynchronous navigation
      5. Time for action — building deluxe asynchronous navigation
      6. Time for action — using the BBQ plugin
      7. Time for action — highlighting the current page in the Navigation
      8. Time for action — adding a loading animation
      9. Summary
    14. 8. Showing Content in Lightboxes
      1. Simple photo gallery
      2. Time for action — setting up a simple photo gallery
      3. Customizing Colorbox's behavior
        1. Transition
      4. Time for action — using a custom transition
      5. Time for action — setting a fixed size
        1. Creating a slideshow
      6. Time for action — creating a slideshow
      7. Fancy login
      8. Time for action — creating a fancy login form
      9. Video player
      10. Time for action — showing a video in a lightbox
      11. One-page web gallery
      12. Time for action — creating a one-page web gallery
      13. Summary
    15. 9. Creating Slideshows
      1. Planning a slideshow
      2. Simple crossfade slideshow
      3. Time for action — creating a simple crossfade slideshow
      4. Nivo Slider
      5. Time for action — creating a Nivo Slider slideshow
      6. Galleriffic slideshow
      7. Time for action — creating a Galleriffic slideshow
      8. The CrossSlide plugin
      9. Time for action — building a CrossSlide slideshow
      10. Summary
    16. 10. Featuring Content in Carousels and Sliders
      1. Basic jCarousel
      2. Time for action — creating a basic carousel
      3. Animated news ticker
      4. Time for action — creating an animated news ticker
      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
      9. Carousel slideshow
      10. Time for action — creating a thumbnail slideshow
      11. Time for action — adding the slideshow
      12. Time for action — activating the Next and Previous Buttons
      13. Summary
    17. 11. Creating an Interactive Data Grid
      1. Basic data grid
      2. Time for action — creating a basic data grid
      3. Customizing the data grid
      4. Time for action — customizing the data grid
      5. Summary
    18. 12. Improving Forms
      1. An HTML5 web form
      2. Time for action — setting up an HTML5 web form
      3. Setting focus
      4. Time for action — setting focus to the first field
      5. Placeholder text
      6. Time for action — adding placeholder text
      7. Validating user entry
      8. Time for action — validating form values on the fly
      9. Improving appearance
      10. Time for action — improving form appearance
      11. Time for action — adding uniform for styling the unstylable
        1. Styles for all
      12. Time for action — styling the styleable
      13. Time for action — creating a custom uniform theme
      14. Summary
18.117.183.150