jQuery for Designers Beginners Guide 2nd Edition

Natalie Maclees pdf download

https://ebookname.com/product/jquery-for-designers-beginners-
guide-2nd-edition-natalie-maclees/

Get Instant Ebook Downloads – Browse at https://ebookname.com

Instant digital products (PDF, ePub, MOBI) available
Download now and explore formats that suit you...

jQuery Cookbook Solutions Examples for jQuery

Developers Animal Guide 1st Edition Cody Lindley

https://ebookname.com/product/jquery-cookbook-solutions-examples-
for-jquery-developers-animal-guide-1st-edition-cody-lindley-2/

jQuery Cookbook Solutions Examples for jQuery

Developers Animal Guide 1st Edition Cody Lindley

https://ebookname.com/product/jquery-cookbook-solutions-examples-
for-jquery-developers-animal-guide-1st-edition-cody-lindley/

Ergonomics For Beginners A Quick Reference Guide 2nd

Edition Jan Dul

https://ebookname.com/product/ergonomics-for-beginners-a-quick-
reference-guide-2nd-edition-jan-dul/

Smart Buildings Systems for Architects Owners and

Builders James M Sinopoli

https://ebookname.com/product/smart-buildings-systems-for-
architects-owners-and-builders-james-m-sinopoli/
The Spectre of Capital 1st Edition Christopher John
Arthur

https://ebookname.com/product/the-spectre-of-capital-1st-edition-
christopher-john-arthur/

Nonlinear Partial Differential Equations for Scientists

and Engineers Second Edition Lokenath Debnath

https://ebookname.com/product/nonlinear-partial-differential-
equations-for-scientists-and-engineers-second-edition-lokenath-
debnath/

Modern Antenna Design Second Edition Thomas A.

Milligan(Auth.)

https://ebookname.com/product/modern-antenna-design-second-
edition-thomas-a-milliganauth/

American Cinematographer Magazine Vol 87 no 01 January

2006 1st Edition Martha Winterhalter (Publisher)

https://ebookname.com/product/american-cinematographer-magazine-
vol-87-no-01-january-2006-1st-edition-martha-winterhalter-
publisher/

Socioculturally Attuned Family Therapy Guidelines for

Equitable Theory and Practice 1st Edition Teresa
Mcdowell

https://ebookname.com/product/socioculturally-attuned-family-
therapy-guidelines-for-equitable-theory-and-practice-1st-edition-
teresa-mcdowell/
Blake in Our Time Essays in Honour of G E Bentley Jr
1st Edition Karen Mulhallen

https://ebookname.com/product/blake-in-our-time-essays-in-honour-
of-g-e-bentley-jr-1st-edition-karen-mulhallen/
jQuery for Designers
Beginner's Guide
Second Edition

Design interactive websites to improve user experience

by using the popular JavaScript library

Natalie MacLees

BIRMINGHAM - MUMBAI
jQuery for Designers Beginner's Guide
Second Edition

Copyright © 2014 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system,
or transmitted in any form or by any means, without the prior written permission of the
publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the
information presented. However, the information contained in this book is sold without
warranty, either express or implied. Neither the author, nor Packt Publishing, and its
dealers and distributors will be held liable for any damages caused or alleged to be
caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the
companies and products mentioned in this book by the appropriate use of capitals.
However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2012

Second edition: July 2014

Production reference: 1220714

Published by Packt Publishing Ltd.

Livery Place
35 Livery Street
Birmingham B3 2PB, UK.

ISBN 978-1-78328-453-5
www.packtpub.com

Cover image by Suresh Mogre ([email protected])

 Credits

Author Project Coordinators

Natalie MacLees Priyanka Goel
Danuta Jones
Reviewers
Olivier Pons Proofreaders
M. Ali Qureshi Simran Bhogal
Dan Wellman Maria Gould
Ameesha Green
Acquisition Editor
Vinay Argekar Indexers
Hemangini Bari
Content Development Editor Mehreen Deshmukh
Neeshma Ramakrishnan
Rekha Nair
Tejal Soni
Technical Editors
Priya Subramani
Pramod Kumavat
Pooja Nair
Graphics
Mukul Pawar
Valentina D'silva

Copy Editors
Production Coordinators
Janbal Dharmaraj
Pooja Chiplunkar
Deepa Nambiar
Manu Joseph
Alfida Paiva

Cover Work
Pooja Chiplunkar
 About the Author

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.
 Acknowledgments
Gracious thanks first and foremost to John Resig and the rest of the jQuery team for creating
and sharing such a useful and elegant library with the rest of us.

A big thank you to Marlene Angel, Ninno DePatrick, Ed Doolittle, Crystal Ehrlich, Suzette Franck,
Teresina Goheen, LeHang Huynh, Michelle Kempner, Mark Tapio Kines, Chloë Nguyễn, Mario
Noble, Joss Rogers, Noel Saw, Kimberly Wilkinson, and Tammy Wilson for their support, advice,
and cheerleading—I couldn't ask for better friends.

Thank you to Beebe Lee and Brittany Brooks, my Purple Pen support team.

Thank you to my sisters, Stefanie Elder and Bethany MacLees, for being properly impressed
that somebody wanted me to write a book. Thank you to my mom, Patricia Demby, and
stepfather, John Demby, for being proud of me no matter what.

Thank you to all members of our local WordPress and jQuery communities including Dre
Armeda, Lucy Beer, Andrew Behla, Glenn Bennett, Stephen Carnam, Jason Cosper, Ryan
Cowles, Joe Chellman, Gregory Dahl, Greg Douglas, Brandon Dove, Chris Ford, Gregg Franklin,
Megan Gray, Lane Halley, John Hawkins, Susie Karasic, Chris Lema, Paul Lumsdaine, Kari Leigh
Marucchi, Karim Marucchi, Karen McCamy, Andrei Mignea, Troy Miles, Konstantin Obenland,
Joseph Karr O'Connor, David Oshima, Sé Reed, Andy Roberts, Mike Schroder, Adam Silver,
Verious Smith, Jason Tucker, Nathan Tyler, Alex Vasquez, Sarah Wefald, Steve Zehngut, Jeffery
Zinn, and too many others to count or mention.

And finally, thank you to Diane Colella Jones for believing in me, even before I did.
 About the Reviewers

Olivier Pons is a developer who's been building websites since 1997. He's a teacher
at IngeSup (École Supérieure d'Ingénierie Informatique; for more information visit
http://www.ingesup.com/ and http://www.y-nov.com), at the University
of Sciences (IUT) in Aix-en-Provence/France, and École d'Ingénieurs des Mines de
Gardanne, where he teaches HTML, CSS, jQuery/jQuery Mobile, PHP, MVC fundamentals,
WordPress, Symfony, Linux basics, and advanced VIM techniques. He has already done
some technical reviews, including the books Ext JS 4 First Look, Packt Publishing and
jQuery Mobile Web Development Essentials Second Edition, Packt Publishing, among others.
In 2011, he left a full-time job as a Delphi and PHP developer to concentrate on his own
company, HQF Development (http://hqf.fr). He currently runs a number of websites,
including http://www.benativo.fr, http://www.inesushi.com, http://www.
papdevis.fr, and http://olivierpons.fr, his own web development blog. He works
as a consultant, teacher, project manager, and sometimes a developer.

M. Ali Qureshi, who is a web developer based in Lahore, Pakistan, has been involved
in web development in 2001. Having worked in a number of companies in different
capacities, he is aware of how project goals are achieved efficiently. Ali founded PI Media
(http://parorrey.com) in 2002 and has developed creative, interactive, and usable web
solutions, making them a successful technology investment for clients. He has also worked
on a number of successful products and authored WordPress plugins and themes and
osCommerce and PrestaShop add-ons.

Apart from PI Media, Ali currently works as a software architect for E2ESP (http://e2esp.
com)and ConvoSpark (http://convospark.com). He regularly makes contributions to the
latest tips and trends in web design, PHP, WordPress and CMS development, Flash ActionScript,
and Facebook App Development on his blog http://parorrey.com/blog/.

Ali has previously reviewed jQuery Mobile Web Development Essentials, Packt Publishing.
When not working, he spends his time blogging and exploring new technologies. He is an avid
sports fan and especially likes watching cricket. Pakistan and Australia are his favorite teams.
Dan Wellman is an author and software engineer based in the south coast of the UK.
By day, he works for the Skype division at Microsoft bringing web-based audio and video
calling to the world. By night, he writes books and tutorials for many online digital media
outlets including Nettuts, Infinite Skills, and many others. He has written seven books
so far, mostly centered on jQuery and jQuery UI.
 www.PacktPub.com

Support files, eBooks, discount offers, and more

You might want to visit www.PacktPub.com for support files and downloads related to
your book.

Did you know that Packt offers eBook versions of every book published, with PDF and
ePub files available? You can upgrade to the eBook version at www.PacktPub.com and
as a print book customer, you are entitled to a discount on the eBook copy. Get in touch
with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up
for a range of free newsletters and receive exclusive discounts and offers on Packt books
and eBooks.
TM

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book
library. Here, you can access, read and search across Packt's entire library of books.

Why subscribe?
‹ Fully searchable across every book published by Packt
‹ Copy and paste, print and bookmark content
‹ On demand and accessible via web browser

Free access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib
today and view nine entirely free books. Simply use your login credentials for immediate access.
 Table of Contents
Preface 1
Chapter 1: Designer, Meet jQuery 7
What is jQuery? 7
Why is jQuery awesome for designers? 8
It uses CSS selectors you already know 8
It uses HTML markup you already know 8
Impressive effects in just a few lines of code 9
Huge plugin library available 9
Great community support 10
JavaScript basics 10
Progressive enhancement and graceful degradation 10
Gotta keep 'em separated 11
Content 11
Presentation 11
Behavior 11
Designer, Meet JavaScript 12
Variables 12
Objects 12
Functions 14
Downloading jQuery and getting set up 15
Time for action – downloading and attaching jQuery 15
Another option for using jQuery 19
Your first jQuery script 20
Time for action – getting ready for jQuery 20
Adding a paragraph 21
Time for action – adding a new paragraph 22
Summary 23
Table of Contents

Chapter 2: Enhancing Links 25

Simple tabs 25
Time for action – creating simple tabs 26
Designer, meet plugins 38
Choosing a plugin 39
Simple custom tooltips 39
Time for action – simple custom tooltips 40
Customizing PowerTip's appearance 44
Time for action – customizing PowerTip 44
Enhancing navigation with tooltips 50
Time for action – building a fancy navigation bar 50
Showing other content in tooltips 53
Time for action – showing custom content in tooltips 54
Summary 61
Chapter 3: Making a Better FAQ Page 63
Marking up the FAQ page 63
Time for action – setting up the HTML file 64
Time for action – moving around an HTML document 67
Sprucing up our FAQ page 70
Time for action – making it fancy 70
We're almost there! 72
Time for action – adding some final touches 72
Summary 75
Chapter 4: Building an Interactive Navigation Menu 77
The horizontal drop-down menu 78
Time for action – creating a horizontal drop-down menu 78
The vertical fly-out menu 85
Time for action – creating a vertical fly-out menu 85
Customizing the navigation menu 86
:hover and .sfHover 87
Cascading inherited styles 88
Styling the :focus pseudoclass 89
Time for action – customizing Superfish menus 90
The hoverIntent plugin 94
Time for action – incorporating custom animations 95
Summary 96

[ ii ]
 Table of Contents

Chapter 5: Showing Content in Lightboxes 97

A simple photo gallery 98
Time for action – setting up a simple photo gallery 98
Customizing Colorbox's behavior 104
Time for action – using a custom transition 105
Time for action – setting a fixed size 106
Time for action – creating a slideshow 107
Fancy login 110
Time for action – creating a fancy login form 110
Video player 118
Time for action – showing a video in a lightbox 118
A one-page web gallery 122
Time for action – creating a one-page web gallery 122
Summary 124
Chapter 6: Creating Slideshows and Sliders 125
Planning a slideshow or slider 126
A simple crossfade slideshow 126
Time for action – creating a simple crossfade slideshow 126
Using the Basic Slider plugin 132
Time for action – building a Basic Slider 132
Creating a Cycle2 slideshow 139
Time for action – building a slideshow with Cycle2 140
The Cycle2 carousel 151
Time for action – building a Cycle2 carousel 151
Combining a carousel with a slideshow 162
Time for action – creating the carousel controller 162
Time for action – adding the slideshow 172
Time for action – connecting the carousel and the slider 178
Summary 183
Chapter 7: Working with Responsive Designs 185
Using FitVids for responsive videos 186
Time for action – resizing videos 186
Responsive menus 193
Time for action – making our menu responsive 193
Creating a tiled layout 206
Time for action – creating a masonry layout 207
Time for action – creating a tiled layout with different width items 215
Summary 217

[ iii ]
Table of Contents

Chapter 8: Getting the Most from Images 219

Lazy loading images 219
Time for action – lazy loading images 220
Creating zoomable images 226
Time for action – creating zoomable images 227
Time for action – creating multiple zoomable images 231
Using fullscreen backgrounds 233
Time for action – creating a fullscreen background image 234
Time for action – creating a fullscreen slideshow 240
Summary 242
Chapter 9: Improving Typography 243
Sizing headlines perfectly 243
Time for action – sizing headlines to the screen width 244
Creating bold text blocks 247
Time for action – creating a bold text block with SlabText 248
Styling individual letters 255
Time for action – using Lettering.js to style letters 255
Setting text on a curve 261
Time for action – setting text on a curve with the ArcText plugin 261
Summary 266
Chapter 10: Displaying Data Beautifully 267
A basic data grid 268
Time for action – creating a basic data grid 268
A customized data grid 271
Time for action – customizing the data grid 272
Showing graphs and charts 279
Time for action – showing data in graphs and charts 279
Time for action – creating a pie chart 288
Time for action – calculating the ideal size for charts and graphs 295
Summary 299
Chapter 11: Reacting to Scrolling 301
Setting up the document 301
Time for action – setting up the HTML file 302
Time for action – setting up HTML for Scrollorama 307
Time for action – creating a parallax effect 311
Time for action – creating a horizontal animation 319
Time for action – adding navigation to sections of the page 320
Summary 329

[ iv ]
 Table of Contents

Chapter 12: Improving Forms 331

An HTML5 web form 331
Time for action – setting up an HTML5 web form 332
Setting focus 342
Time for action – setting focus to the first field 342
Validating site visitor entry 343
Time for action – validating form values on the fly 344
Improving the appearance 350
Time for action – improving form appearance 350
Time for action – adding Fancyform to style the unstyleable 355
Summary 368
Appendix: Pop Quiz Answers 371
Index 375

[v]
 Preface
This book is intended for designers who have a basic understanding of HTML and CSS,
but want to advance their skill set by learning basic JavaScript. It's not necessary that you
understand JavaScript well. Even if you've never attempted to write JavaScript before, this
book will guide you through the process of setting up basic JavaScript and accomplishing
common tasks such as collapsing content, drop-down menus, and slideshows; all thanks to
the jQuery library.

What this book covers

Chapter 1, Designer, Meet jQuery, is an introduction to the jQuery library and JavaScript.
You'll learn about jQuery's rise to fame, why it's so great for designers, and how it can help
you create some fancy special effects without having to learn a lot of code. This chapter
also includes a gentle and small introduction to JavaScript, progressive enhancement,
and graceful degradation, and guides you through writing your first JavaScript code.

Chapter 2, Enhancing Links, walks you through some basic enhancements to links. You'll
learn how to use jQuery to turn a list of links into a tabbed interface. Then, we'll take our
first look at jQuery plugins where you'll learn to add custom tooltips to your links using the
jQuery PowerTip plugin.

Chapter 3, Making a Better FAQ Page, will introduce you to collapsing and showing content,
as well as creating simple animations and traversing an HTML document to move from one
element to another. In this chapter, we'll set up a basic FAQ list, then work to progressively
enhance it to make it easier for our site visitors to use.
Preface

Chapter 4, Building an Interactive Navigation Menu, guides you through setting up fully
functioning and visually stunning drop-down and fly-out menus. We'll walk through the
complex CSS required to get these types of menus working, use the Superfish plugin to
fill in features missing from pure CSS solutions, and then take a look at customizing the
appearance of the menus.

Chapter 5, Showing Content in Lightboxes, will walk you through showing photos and
slideshows in a lightbox using the Colorbox jQuery plugin. Once we get the basics down,
we'll also take a look at using the Colorbox plugin to create a fancy login, play a collection
of videos, and even set up a single-page website gallery.

Chapter 6, Creating Slideshows and Sliders, walks you through setting up a simple crossfade
slideshow without a plugin. Then, we'll take a look at the Basic Slider plugin to create a
simple slideshow with controls. Finally, we'll take a look at the Cycle2 plugin, a flexible and
customizable option that can be used to create sliders, slideshows, and carousels.

Chapter 7, Working with Responsive Designs, will dive deep into jQuery techniques for
responsive designs. This includes fitting videos to the viewport, turning a drop-down
menu into a responsive menu, and building a tiled layout for displaying image galleries.

Chapter 8, Getting the Most from Images, walks you through a few techniques to work with
images in a more effective way. We'll take a look at lazy-loading images so that images are
only loaded if our site visitor scrolls to them. We'll add an image zoom capability and finally,
we'll take a look at creating fullscreen background images and slideshows for our pages.

Chapter 9, Improving Typography, shows you techniques to deal with typography effectively
in responsive designs. We'll take a look at the FitText plugin to fit headlines to the width of
the browser window, the SlabText plugin to create multiline headlines, the Lettering.js plugin
to fine-tune kerning and to apply special effects, and finally, the ArcText plugin to set a text
on a curve.

Chapter 10, Displaying Data Beautifully, takes a look at the important task of displaying data
in an easy-to-understand way for your site visitors. First of all, we'll take a look at turning an
ordinary HTML table into an interactive data grid with the DataTables plugin. Then, we'll look
at turning HTML tables into charts and graphs that communicate our data clearly to our site
visitors in an accessible and progressively enhanced way.

Chapter 11, Reacting to Scrolling, dives into the fun task of scrolling animations and parallax
effects. We'll use the Scrollorama plugin to create a parallax effect, trigger animations on
scroll, and activate a navigation bar that reacts to us scrolling down the page.

[2]
 Preface

Chapter 12, Improving Forms, takes a look at how forms can be improved. This chapter
walks you through setting up an HTML form properly using some of the latest HTML5 form
elements. Then, we enhance the form by placing the cursor in the first field and validating
the site visitor's form entries. Finally, we take a look at the FancyForm jQuery plugin, which
allows us to style even the most stubborn and challenging form elements to achieve a
consistent look for our forms across browsers.

What you need for this book

You'll need a text editor to create HTML, CSS, and JavaScript files. Some great free options
available are TextWrangler for Mac or Notepad++ for Windows. There are many other
options available, and you are free to use your favorite text editor for any of the examples
in this book. My personal favorite is Sublime Text, which is easy to work with and has a very
nice feature set. If you haven't tried it before, I encourage you to download an evaluation
copy for free to give it a try.

You'll also need a browser. My personal favorite is Google Chrome, which includes some
really helpful built-in debugging tools for both CSS and JavaScript. Again, you are free to
use your favorite browser for the examples in the book.

If you want to create images for your own designs, then Adobe Photoshop and Adobe
Illustrator will be helpful, though they are not strictly necessary. All images needed to
set up the examples used in this book are included in the sample code.

jQuery and jQuery plugins are being updated all the time. As new browsers are released
with new support and capabilities, and as JavaScript, HTML, and CSS are further developed,
new versions of jQuery and plugins are released to keep pace with the change. On one hand,
this is a great news—jQuery and accompanying plugins get faster and more powerful all
the time. On the other hand, it can be tough to keep up with all the changes. All versions
of the plugins referenced were current at the time of writing the book, but you might find
some differences when you work through the exercises. Plugin developers are usually very
good at documenting the changes and updates, so don't be afraid to read through the
documentation so you can understand what's changed and what adjustments you might
need to make.

Who this book is for

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

[3]
Preface

Conventions
In this book, you will find several headings that appear frequently.

To give clear instructions of how to complete a procedure or task, we use:

Time for action – heading

1. Action 1
2. Action 2
3. Action 3

Instructions often need some extra explanation so that they make sense, so they are
followed with:

What just happened?

This heading explains the working of tasks or instructions that you have just completed.

You will also find some other learning aids in the book, including:

Pop quiz – heading

These are short multiple-choice questions intended to help you test your own understanding.

Have a go hero – heading

These are practical challenges that give you ideas for experimenting with what you have
learned.

You will also find a number of styles of text that distinguish between different kinds of
information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames,
dummy URLs, user input, and Twitter handles are shown as follows: "This returns the <body>
tag wrapped in a jQuery object."

A block of code is set as follows:

var x = 5;
var y = 2;
var z = x + y;

[4]
 Preface

When we wish to draw your attention to a particular part of a code block, the relevant lines
or items are set in bold:
<head>
<title>Practice Page</title>
<link rel="stylesheet" href="styles/styles.css"/>
</head>

New terms and important words are shown in bold. Words that you see on the screen, in
menus or dialog boxes for example, appear in the text like this: "Just go to your browser's
File menu and choose Save Page As... or right-click on the page and select Save As...."

Warnings or important notes appear in a box like this.

Tips and tricks appear like this.

Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this
book—what you liked or may have disliked. Reader feedback is important for us to
develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to [email protected],

and mention the book title through the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or
contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help
you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your
account at http://www.packtpub.com. If you purchased this book elsewhere, you can
visit http://www.packtpub.com/support and register to have the files e-mailed directly
to you.

[5]
Preface

Downloading the color images of this book

We also provide you a PDF file that has color images of the screenshots/diagrams used
in this book. The color images will help you better understand the changes in the output.
You can download this file from the following link:
https://www.packtpub.com/sites/default/files/downloads/4535OS_
ColoredImages.pdf

Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen.
If you find a mistake in one of our books—maybe a mistake in the text or the code—we
would be grateful if you would report this to us. By doing so, you can save other readers from
frustration and help us improve subsequent versions of this book. If you find any errata, please
report them by visiting http://www.packtpub.com/submit-errata, selecting your book,
clicking on the errata submission form link, and entering the details of your errata. Once your
errata are verified, your submission will be accepted and the errata will be uploaded to our
website, or added to any list of existing errata, under the Errata section of that title.

Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media.
At Packt, we take the protection of our copyright and licenses very seriously. If you come
across any illegal copies of our works, in any form, on the Internet, please provide us with
the location address or website name immediately so that we can pursue a remedy.

Please contact us at [email protected] with a link to the suspected

pirated material.

We appreciate your help in protecting our authors, and our ability to bring you
valuable content.

Questions
You can contact us at [email protected] if you are having a problem with any
aspect of the book, and we will do our best to address it.

[6]
 Designer, Meet jQuery
1
You might have heard quite a lot about jQuery over the past couple of years.
It has quickly become one of the most popular code packages in use on the
Web today. And you might have wondered what all the fuss was about.
Whether you've tried to figure out JavaScript before and have thrown up your
hands in frustration or have been too intimidated to even give it a go, you'll find
that jQuery is a wonderfully approachable and easy-to-understand way to get
started with JavaScript.

In this chapter, we will cover the following topics:

‹ What jQuery is and why it's ideal for designers

‹ Progressive enhancement and graceful degradation
‹ JavaScript basics
‹ Downloading jQuery
‹ Your first jQuery script

What is jQuery?
jQuery is a JavaScript library. This means that it's a collection of reusable JavaScript code
that accomplishes common tasks. Since web developers often find themselves solving the
same problems over and over again, it makes sense to collect useful bits of code into a single
package that can be included and used in any project. The creators of jQuery have written
code to smoothly and easily handle the most common and most tedious tasks we want to
accomplish with JavaScript, and they've ironed out all the little differences that need to be
worked out to get the code working in different browsers.
Designer, Meet jQuery

It's important to remember that jQuery is JavaScript, not a language of its own. It has
all the same rules and is written the same way as JavaScript. Don't let this frighten you
away—jQuery really does make writing JavaScript much easier.

jQuery's official tagline is "write less, do more." This is an excellent and accurate description
of the jQuery library—you can really accomplish amazing things in just a few lines of code.
My own unofficial tagline for jQuery is "find stuff and do stuff to it", because finding and
manipulating different parts of an HTML document is extremely tedious with raw JavaScript
and requires lines and lines of code, while jQuery makes that same task painless and quick.
Thanks to jQuery, you can not only quickly create a drop-down menu but you can also create
one that's animated and works smoothly in many different browsers.

Why is jQuery awesome for designers?

So what is it about jQuery that makes it so easy to learn, even if you have limited or no
experience with JavaScript?

It uses CSS selectors you already know

The first thing you'll often do in a jQuery script is select the elements you'd like to work with.
For example, if you're adding some effects to a navigation menu, you'll start by selecting the
items in the navigation menu. The tools you use for this job are selectors—ways to select
certain elements on the page you want to work with.

jQuery borrowed selectors from CSS all the way up through CSS3, and they work even in
browsers that don't support CSS3 selectors just yet.

Even though CSS offers a pretty robust set of selectors, jQuery adds a few more of its own to
make accessing just the elements you need easy.

If you already know how to do things with CSS, such as make all the first-level headings blue
or make all the links green and underlined, you'll easily learn how to select the elements
you'd like to modify with jQuery.

It uses HTML markup you already know

If you want to create new elements or modify existing elements with raw JavaScript, you
better crack your knuckles and get ready to write lots and lots of code—and it won't make
much sense either.

[8]
 Chapter 1

For example, if we wanted to append a paragraph to our page that says This page is
powered by JavaScript, we need to first create the paragraph element, then assign the text
that should be inside the paragraph to a variable as a string, and finally append the string to
the newly created paragraph as a text node. And after all this, we'd still have to append the
paragraph to the document. Phew! (Don't worry if you didn't understand all of that—it was
just to illustrate how much work and code it requires to do something simple.)

With jQuery, adding a paragraph to the bottom of our page is as simple as the following line
of code:
$('body').append('<p>This page is powered by jQuery.</p>');

That's right! You just append a bit of HTML directly to the body, and you're all set. I bet
that without understanding JavaScript at all, you can read the line of code and grasp what
it's doing. This code is appending a paragraph that reads This page is powered by
jQuery. to the body of the HTML document.

Impressive effects in just a few lines of code

You've got better things to do than sit and write lines and lines of code to add fade-in and
fade-out effects. jQuery provides you with a few basic animations and the power to create
your own custom animations right out of the box. Let's say, we wanted to make an image
fade into the page; we will use the following code line for this:
$('img').fadeIn();

Yep, that's it! We use one little line of code in which I select the image and then tell it to fade
in. Later in the chapter, you'll see exactly where this line of code will go in your HTML page.

Huge plugin library available

As I said earlier, web developers often find themselves solving the same problems over
and over again. You're most likely not the first person who wants to build a rotating image
slideshow, an animated drop-down menu, or a news ticker.

jQuery has an impressively large library of scripts available freely—scripts to create tooltips,
slideshows, news tickers, drop-down menus, date pickers, character counters, and on and
on. You don't need to learn how to build all these things from scratch; you just have to learn
how to harness the power of plugins. We'll be covering some of the most popular jQuery
plugins in this book, and you'll be able to apply what you've learned to use any plugin in the
jQuery plugin library.

[9]
Designer, Meet jQuery

Great community support

jQuery is an open source project, which means that it's being collectively built by a team of
super-smart JavaScript coders and is freely available for anyone to use. The success or failure
of an open source project often depends on the community behind the project, and jQuery
has a large and active community that supports it.

This means that jQuery itself is being constantly improved and updated. And on top of that,
there are thousands of developers out there who are creating new plugins, adding features
to existing plugins, and offering support and advice to newcomers. You'll find new tutorials,
blog posts, and podcasts on a daily basis for just about anything you want to learn.

JavaScript basics
In this section, we're going to cover a few basics of JavaScript that will make things go more
smoothly. We're going to look at a little bit of code and step through how it works. Don't be
intimidated; this will be quick and painless, and then we'll be ready to get on with actually
doing something with jQuery.

Progressive enhancement and graceful degradation

There are a few different schools of thought when it comes to enhancing your HTML pages
with JavaScript. Let's talk about some of the things we should consider before we dive into
the cool stuff.

Progressive enhancement and graceful degradation are essentially two sides of the
same coin. They both mean that our page with its impressive JavaScript animations and
special effects will still work for users who have less capable browsers or devices. Graceful
degradation means that we create our special effect and then make sure it fails gracefully if
JavaScript is not enabled. If we take the progressive enhancement approach, we'll first build
out a bare bones version of our page that works for everyone, and then enhance it by adding
our JavaScript special effects. I tend to favor the progressive enhancement approach.

Why should we care about users who don't have JavaScript enabled? Well, some of the
Web's biggest users and search engines have either no JavaScript capabilities or very limited
JavaScript capabilities. When search engines are crawling and indexing your pages, they will
not have access to all of the content and features that are being added to your pages by
JavaScript. This is often referred to as dynamic content, and it can't be reliably indexed or
found by search engines if it can't be reached with JavaScript disabled.

[ 10 ]
Exploring the Variety of Random
Documents with Different Content
PART I
BOOK I
1. Thomas the Rhymer
 I
True Thomas lay on Huntlie bank;
A ferlie[5] he spied wi’ his e’e;
And there he saw a ladye bright
Come riding down by the Eildon Tree.

II
Her skirt was o’ the grass-green silk,
Her mantle o’ the velvet fyne;
At ilka tett[6] o’ her horse’s mane
Hung fifty siller bells and nine.

III
True Thomas he pu’d aff his cap,
And louted low down on his knee:
‘Hail to thee, Mary, Queen of Heaven!
For thy peer on earth could never be.’

IV
‘O no, O no, Thomas,’ she said,
‘That name does not belang to me;
I’m but the Queen o’ fair Elfland,
That am hither come to visit thee.

‘Harp and carp[7], Thomas,’ she said;

‘Harp and carp along wi’ me;
d f d k l
And if ye dare to kiss my lips,
Sure of your bodie I will be.’

VI
‘Betide me weal, betide me woe,
That weird[8] shall never daunten me.’
Syne he has kiss’d her rosy lips,
All underneath the Eildon Tree.

VII
‘Now ye maun go wi’ me,’ she said,
‘True Thomas, ye maun go wi’ me;
And ye maun serve me seven years,
Thro’ weal or woe as may chance to be.’

VIII
She’s mounted on her milk-white steed,
She’s ta’en true Thomas up behind;
And aye, whene’er her bridle rang,
The steed gaed swifter than the wind.

IX
O they rade on, and farther on,
The steed gaed swifter than the wind;
Until they reach’d a desert wide,
And living land was left behind.

X
‘Light down, light down now, true Thomas,
Light down, light down now, true Thomas,
And lean your head upon my knee;
Abide ye there a little space,
And I will show you ferlies three.

XI
‘O see ye not yon narrow road,
So thick beset wi’ thorns and briers?
That is the Path of Righteousness,
Though after it but few inquires.

XII
‘And see ye not yon braid, braid road,
That lies across the lily leven[9]?
That is the Path of Wickedness,
Though some call it the Road to Heaven.

XIII
‘And see ye not yon bonny road
That winds about the fernie brae?
That is the Road to fair Elfland,
Where thou and I this night maun gae.

XIV
‘But, Thomas, ye sall haud your tongue,
Whatever ye may hear or see;
For speak ye word in Elflyn-land,
Ye’ll ne’er win back to your ain countrie.’

XV
O they rade on, and farther on,
And they waded rivers abune the knee;
And they saw neither sun nor moon,
But they heard the roaring of the sea.

XVI
It was mirk, mirk night, there was nae starlight,
They waded thro’ red blude to the knee;
For a’ the blude that’s shed on the earth
Rins through the springs o’ that countrie.

XVII
Syne they came to a garden green,
And she pu’d an apple frae a tree:
‘Take this for thy wages, true Thomas;
It will give thee the tongue that can never lee.’

XVIII
‘My tongue is my ain,’ true Thomas he said;
‘A gudely gift ye wad gie to me!
I neither dought[10] to buy or sell
At fair or tryst where I might be.

XIX
‘I dought neither speak to prince or peer,
Nor ask of grace from fair ladye!’—
‘Now haud thy peace, Thomas,’ she said,
‘For as I say, so must it be.’

XX
 XX

He has gotten a coat of the even cloth[11],

And a pair o’ shoon of the velvet green;
And till seven years were gane and past,
True Thomas on earth was never seen.

FOOTNOTES:
[5] ferlie = marvel.
[6] tett = tuft.
[7] harp and carp = play and recite (as a minstrel).
[8] weird = doom.
[9] leven =? lawn.
[10] dought = could.
[11] even cloth = smooth cloth.
2. Tam Lin
 I
‘O I forbid you, maidens a’,
That wear gowd on your hair,
To come or gae by Carterhaugh,
For young Tam Lin is there.

II
‘For even about that knight’s middle
O’ siller bells are nine;
And nae maid comes to Carterhaugh
And a maid returns again.’

III
Fair Janet sat in her bonny bower,
Sewing her silken seam,
And wish’d to be in Carterhaugh
Amang the leaves sae green.

IV
She’s lat her seam fa’ to her feet,
The needle to her tae[12],
And she’s awa’ to Carterhaugh
As fast as she could gae.

V
And she has kilted her green kirtle
A little abune her knee;
And she has braided her yellow hair
And she has braided her yellow hair
A little abune her bree[13];
And she has gaen for Carterhaugh
As fast as she can hie.

VI
She hadna pu’d a rose, a rose,
A rose but barely ane,
When up and started young Tam Lin;
Says, ‘Ladye, let alane.

VII
‘What gars ye pu’ the rose, Janet?
What gars ye break the tree?
What gars ye come to Carterhaugh
Without the leave o’ me?’

VIII
‘Weel may I pu’ the rose,’ she says,
‘And ask no leave at thee;
For Carterhaugh it is my ain,
My daddy gave it me.’

IX
He’s ta’en her by the milk-white hand,
And by the grass-green sleeve,
He’s led her to the fairy ground
At her he ask’d nae leave.

X
Janet has kilted her green kirtle
A little abune her knee,
And she has snooded her yellow hair
A little abune her bree,
And she is to her father’s ha’
As fast as she can hie.

XI
But when she came to her father’s ha’,
She look’d sae wan and pale,
They thought the lady had gotten a fright,
Or with sickness she did ail.

XII
Four and twenty ladies fair
Were playing at the ba’,
And out then came fair Janet
Ance the flower amang them a’.

XIII
Four and twenty ladies fair
Were playing at the chess,
And out then came fair Janet
As green as onie glass.

XIV
Out then spak’ an auld grey knight
’Lay owre the Castle wa’,
And says, ‘Alas, fair Janet!
For thee we’ll be blamèd a’ ’
 For thee we’ll be blamèd a’.’

XV
‘Hauld your tongue, ye auld-faced knight,
Some ill death may ye die!
Father my bairn on whom I will,
I’ll father nane on thee.

XVI
‘O if my love were an earthly knight,
As he is an elfin gay,
I wadna gie my ain true-love
For nae laird that ye hae.

XVII
‘The steed that my true-love rides on
Is fleeter nor the wind;
Wi’ siller he is shod before,
Wi’ burning gold behind.’

XVIII
Out then spak’ her brither dear—
He meant to do her harm:
‘There grows an herb in Carterhaugh
Will twine[14] you an’ the bairn.’

XIX
Janet has kilted her green kirtle
A little abune her knee,
And she has snooded her yellow hair
A little abune her bree,
And she’s awa’ to Carterhaugh
As fast as she can hie.

XX
She hadna pu’d a leaf, a leaf,
A leaf but only twae,
When up and started young Tam Lin,
Says, ‘Ladye, thou’s pu’ nae mae.

XXI
‘How dar’ ye pu’ a leaf?’ he says,
‘How dar’ ye break the tree?
How dar’ ye scathe[15] my babe,’ he says,
‘That’s between you and me?’

XXII
‘O tell me, tell me, Tam,’ she says,
‘For His sake that died on tree,
If ye were ever in holy chapel
Or sain’d[16] in Christentie?’

XXIII
‘The truth I’ll tell to thee, Janet,
Ae word I winna lee;
A knight me got, and a lady me bore,
As well as they did thee.

XXIV
 XXIV
‘Roxburgh he was my grandfather,
Took me with him to bide;
And ance it fell upon a day,
As hunting I did ride,

XXV
‘There came a wind out o’ the north,
A sharp wind an’ a snell[17],
A dead sleep it came over me
And frae my horse I fell;
And the Queen o’ Fairies she took me
In yon green hill to dwell.

XXVI
‘And pleasant is the fairy land
For those that in it dwell,
But ay at end of seven years
They pay a teind[18] to hell;
I am sae fair and fu’ o’ flesh
I’m fear’d ’twill be mysell.

XXVII
‘But the night is Hallowe’en, Janet,
The morn is Hallowday;
Then win me, win me, an ye will,
For weel I wat ye may.

XXVIII
‘ h h d ll ’
‘The night it is gude Hallowe’en,
The fairy folk do ride,
And they that wad their true-love win,
At Miles Cross they maun bide.’—

XXIX
‘But how should I you ken, Tam Lin,
How should I borrow[19] you,
Amang a pack of uncouth[20] knights
The like I never saw?’—

XXX
‘You’ll do you down to Miles Cross
Between twel’ hours and ane,
And fill your hands o’ the holy water
And cast your compass roun’.

XXXI
‘The first company that passes by,
Say na, and let them gae;
The neist company that passes by,
Say na, and do right sae;
The third company that passes by,
Then I’ll be ane o’ thae.

XXXII
‘O first let pass the black, ladye,
And syne let pass the brown;
But quickly run to the milk-white steed,
Pu’ ye his rider down.
 XXXIII
‘For some ride on the black, ladye,
And some ride on the brown;
But I ride on a milk-white steed,
A gowd star on my crown:
Because I was an earthly knight
They gie me that renown.

XXXIV
‘My right hand will be gloved, ladye,
My left hand will be bare,
And thae’s the tokens I gie thee:
Nae doubt I will be there.

XXXV
‘Ye’ll tak’ my horse then by the head
And let the bridle fa’;
The Queen o’ Elfin she’ll cry out
“True Tam Lin he’s awa’!”

XXXVI
‘They’ll turn me in your arms, ladye,
An aske[21] but and a snake;
But hauld me fast, let me na gae,
To be your warldis make[22].

XXXVII
‘They’ll turn me in your arms ladye
They ll turn me in your arms, ladye,
But and a deer so wild;
But hauld me fast, let me na gae,
The father o’ your child.

XXXVIII
‘They’ll shape me in your arms, ladye,
A hot iron at the fire;
But hauld me fast, let me na go,
To be your heart’s desire.

XXXIX
‘They’ll shape me last in your arms, Janet,
A mother-naked man;
Cast your green mantle over me,
And sae will I be won.’

XL
Janet has kilted her green kirtle
A little abune the knee;
And she has snooded her yellow hair
A little abune her bree,
And she is on to Miles Cross
As fast as she can hie.

XLI
About the dead hour o’ the night
She heard the bridles ring;
And Janet was as glad at that
As any earthly thing.
 XLII
And first gaed by the black, black steed,
And syne gaed by the brown;
But fast she gript the milk-white steed
And pu’d the rider down.

XLIII
She’s pu’d him frae the milk-white steed,
An’ loot[23] the bridle fa’,
And up there rase an eldritch[24] cry,
‘True Tam Lin he’s awa’!’

XLIV
They shaped him in her arms twa
An aske but and a snake;
But aye she grips and hau’ds him fast
To be her warldis make.

XLV
They shaped him in her arms twa
But and a deer sae wild;
But aye she grips and hau’ds him fast,
The father o’ her child.

XLVI
They shaped him in her arms twa
A hot iron at the fire;
But aye she grips and hau’ds him fast
 To be her heart’s desire.

XLVII
They shaped him in her arms at last
A mother-naked man;
She cast her mantle over him,
And sae her love she wan.

XLVIII
Up then spak’ the Queen o’ Fairies,
Out o’ a bush o’ broom,
‘She that has borrow’d young Tam Lin
Has gotten a stately groom.’

XLIX
Out then spak’ the Queen o’ Fairies,
And an angry woman was she,
‘She’s ta’en awa’ the bonniest knight
In a’ my companie!

L
‘But what I ken this night, Tam Lin,
Gin I had kent yestreen,
I wad ta’en out thy heart o’ flesh,
And put in a heart o’ stane.

LI
‘And adieu, Tam Lin! But gin I had kent
A ladye wad borrow’d thee,
 y ,
I wad ta’en out thy twa grey e’en
Put in twa e’en o’ tree[25].

LII
‘And had I the wit yestreen, yestreen,
That I have coft[26] this day,
I’d paid my teind seven times to hell
Ere you had been won away!’

FOOTNOTES:
[12] tae = toe.
[13] bree = eye-brow.
[14] twine = part, sunder.
[15] scathe = harm.
[16] sain’d = blessed, baptised.
[17] snell = keen, cold.
[18] teind = tithe.
[19] borrow = ransom.
[20] uncouth = unknown.
[21] aske = newt, lizard.
[22] make = mate, husband.
[23] loot = let.
[24] eldritch = unearthly.
[25] tree = wood.
[26] coft = bought.
3. Sir Cawline
 I
Jesus, Lord mickle of might,
That dyed for us on roode,
So maintaine us in all our right
That loves true English blood!

II
Sir Cawline [was an English knight]
Curteous and full hardye;
[And our King has lent him] forth to fight,
Into Ireland over the sea.

III
And in that land there dwells a King,
Over all the bell does beare;
And he hath a ladye to his daughter,
Of fashion[27] she hath no peere;
Knights and lordes they woo’d her both,
Trusted to have been her feere[28].

IV
Sir Cawline loves her best of onie,
But nothing durst he say
To discreeve[29] his councell to no man,
But dearlye loved this may[30].

V
Till it befell upon a day,
Great dill[31] to him was dight[32];
The mayden’s love removed his mind,
To care-bed[33] went the knight.

VI
One while he spread his armes him fro,
And cryed so pittyouslye:
‘For the mayden’s love that I have most minde
This day shall comfort mee,
Or else ere noone I shall be dead!’
Thus can Sir Cawline say.

VII
When the parish mass that itt was done,
And the King was bowne[34] to dine,
Says, ‘Where is Sir Cawline, that was wont
To serve me with ale and wine?’

VIII
But then answer’d a curteous knight
Fast his hands wringìnge:
‘Sir Cawline’s sicke and like to be dead
Without and a good leechìnge[35].’

IX
‘Feitch ye downe my daughter deere,
She is a leeche full fine;
Ay, and take you doe and the baken bread,
And [drinke he of] the wine soe red
 And [drinke he of] the wine soe red,
And looke no daynty’s for him too deare,
For full loth I wo’ld him tine[36].’

X
This ladye is gone to his chamber,
Her maydens following nye;
‘O well,’ she saith, ‘how doth my lord?’
‘O sicke!’ againe saith hee.

XI

‘But rise up wightlye[37], man, for shame!

Ne’er lie here soe cowardlye!
Itt is told in my father’s hall
For my love you will dye.’—

XII
‘Itt is for your love, fayre ladye,
That all this dill I drie;
For if you wo’ld comfort me with a kisse,
Then were I brought from bale to bliss,
No longer here wo’ld I lye.’—

XIII
‘Alas! soe well you know, Sir Knight,
I cannot be your feere.’—
‘Yet some deeds of armes fain wo’ld I doe
To be your bacheleere.’—

XIV
‘On Eldritch Hill there grows a thorn,
Upon the mores[38] brodinge[39];
And wo’ld you, Sir Knight, wake there all night
To day of the other morninge?

XV
‘For the Eldritch King, that is mickle of might,
Will examine[40] you beforne[41]:
There was never a man bare his life away
Since the day that I was born.’—

XVI
‘But I will for your sake, ladye,
Walk on the bents[42] soe browne,
And I’ll either bring you a readye token,
Or I’ll ne’er come to you again.’

XVII
But this ladye is gone to her chamber,
Her maydens following bright;
And Sir Cawline’s gone to the mores soe broad,
For to wake there all night.

XVIII
Unto midnight that the moone did rise
He walkèd up and downe,
And a lightsome bugle then heard he blow
Over the bents so browne;
S h ‘A d if [43] t h t
Sayes he, ‘And if cryance[43] come to my heart,
I am farr from any good towne.’

XIX
And he spyèd, e’en a little him by,
A furyous king and a fell,
And a ladye bright his brydle led
[More] seemlye [than onie can tell].

XX
Soe fast he call’d on Sir Cawline,
‘O man, I rede thee flye!
For if cryance come untill thy heart
I’m afeard lest thou maun dye!’—

XXI
He sayes, ‘No cryance comes to my heart,
Nor i’faith I fear not thee;
For because thou ming’d[44] not Christ before,
The lesse me dreadeth thee.’

XXII
But Sir Cawline then he shooke a speare;
The King was bold, and abode:
And the timber those two children bare
Soe soon in sunder slode[45]:
Forth they tooke and two good swords,
And they layden on good loade[46].

XXIII
 XXIII
The Eldritch King was mickle of might,
And stiffly to the ground did stand;
But Sir Cawline with an aukeward[47] stroke
He brought from him his hand—
Ay, and flying over his head so hye
It fell down of that lay land[48].

XXIV
His ladye stood a little thereby,
Fast her hands wringìnge:
‘For the mayden’s love that you have most minde,
Smyte you noe more [this King].

XXV

‘And he’s never[49] come upon Eldritch Hill

Him to sport, gammon or play,
And to meet no man of middle-earth[50]
That lives on Christ his lay[51].’

XXVI
But he then up, that Eldritch King,
Set him in his sadle againe,
And that Eldritch King and his ladye
To their castle are they gone.

XXVII
Sir Cawline took up that eldritch sword
As hard as any flynt,
 As hard as any flynt,
Soe did he [the hand with] ringès five
Harder than fyer, and brent[52].

XXVIII
The watchmen cryed upon the walls
And sayd, ‘Sir Cawline’s slaine!’
Then the King’s daughter she fell downe,
‘For peerlesse is my payne!’—

XXIX
‘O peace, my ladye!’ sayes Sir Cawline,
‘I have bought thy love full deare;
O peace, my ladye!’ sayes Sir Cawline,
‘Peace, ladye, for I am heere!’

XXX
He’s presented to the King’s daughter
The hand, and then the sword
[And he has claimed the King’s daughter
According to her word].

XXXI

And the King has betaken[53] him his broad lands

And all his venison[54];
[Sayes] ‘Thou shalt have my daughter deare,
[And be my onelye son’].

FOOTNOTES:
[27] fashion = form, beauty.
[28] feere = mate, consort.
[29] discreeve = discover.
[30] may = maid.
[31] dill = dole, grief.
[32] dight = ordained.
[33] care-bed = sick-bed.
[34] bowne = made ready, gone.
[35] without and, &c. = unless he have a good leech, or
physician.
[36] tine = lose.
[37] wightlye = briskly, stoutly.
[38] mores = moors.
[39] brodinge = growing, sprouting.
[40] examine = put to the test.
[41] beforne = before (morning).
[42] bents = rough grasses.
[43] cryance = yielding, cowardice.
[44] ming’d = mentioned, spoke the name of.
[45] slode = split.
[46] good loade = heavily.
[47] aukeward = back-handed.
[48] lay land = lea, land not under cultivation; here = ground.
[49] he’s never = he will never.
[50] middle-earth = this earth, as midway between heaven and
hell.
[51] lay = law, faith.
[52] brent = smooth.
[53] betaken = given, made over.
[54] venison = i. e. deer-forests.
4. Sir Aldingar
 I
Our King he kept a false steward,
Men call’d him Sir Aldingar;
[He would have woo’d our comely Queene
To be his paramour].

II
He would have woo’d our comely Queene,
Her deere worship to betray:
Our Queene she was a good woman
And evermore said him nay.

III
Sir Aldingar was offended in ’s mind,
With her he was ne’er content,
But he sought what meanès he could find
In a fyer to have her brent[55].

IV
There came a lame lazar to the King’s gate,
A lazar ’was blind and lame;
He took the lazar upon his backe,
Upon the Queene’s bed did him lay.

V
Said, ‘Lye still, lazar, whereas thou lyest,
Looke thou goe not away;
I’le make thee a whole man and a sound
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

ebookname.com