Tip:
Highlight text to annotate it
X
Using the DOM to create Pull Quotes
A really great way
to break up a page with lots of text is to use a technique
call Pull Quotes. Here is an example, here is a page
with a lot of Lorem Ipsum text and I've highlighted
this section in bold that I want to have in the Pull Quote.
When the JavaScript runs, as the page loads,
using the DOM, the browser pulls out this span of text
and it displays it here on the side as a Pull Quote.
The beauty of this is if the user has JavaScript
turned off, the pull quote won't display,
but the text is still there inside the main block of the text.
So, we have followed the basic premise that we always
want to keep the information in the content, in the main XHTML page,
and if we use JavaScript, that's like an extra layer on top.
Granted, with the JavaScript turned on, the user gets a much better experience
but they don't lose the essential information if they have JavaScript turned off.
Let's go in and take a look and see how this is done.
First, we are going to look
at the HTML page
and the name of this file is: pullQuote.html. (You may want to bring it up in your own editor so you can work with the code yourself.)
The first thing that is done is to pull in the external JavaScript
file. This is an external JavaScript file.
The JavaScript file is called: pullQuote.js
Looking at the HTML you can see where we've done some CSS.
If you go down the page, you can see that the quote that I wanted
is surrounded by
span tags. I also put a bold element around it
in order to make it show up clearly on the demonstration page. You normally
wouldn't do that on a regular page.
I set up this span. What the span tag is that it allows
a quote or a section of text to be
highlighted. If I had done this as a div tag it would have made a new block on the page.
But, by using a span element, it keeps it in-line, as part of the paragraph.
I used the class=" " attribute which allows me to repeat several times
throughout the web page. I named the class: pullQuote.
Notice that this is a lowercase 'q'.
Normally, with my naming conventions I would make this an upper case "Q"
but as I'm using Robert Johannsen's code, he designated
all lower case, to match his JavaScript coding style.
And here is the stop span.
And that is the only changes that have been made to the HTML code.
What the JavaScript is going to do, is go through
the DOM (Document Object Model) of this entire page
and it is going to look for every span element
that has a class="pullquote"
The JavaScript will put those in an array and step through each one
creating a new entity or
a new paragraph that can be
styled as the pull quote on the side of the page.
Let's go and look at that JavaScript.
Open up the file: pullQuote.js
Go all the way down to the bottom
and you can see on the very last line that there is a function called
addEvent( ). This is how we are going to add this event
action to the web page when it first opens up.
This is from a contest that
listed out on the quirksMode page
so you can see that Robert Johannson wrote the
pull quote demo
but he also went out to the quirksMode page and borrowed this code
for adding an event. I'm not going to go through this addEvent( ) function
which fits more in the event handling module, but just
be aware of it. There is a reference to the web page if you want to read more about how this particular block of code works.
Basically, this block of code adds
the event of the pullquotes to the web page.
Here is the actual function (near the top of the .js file)
We are going to start out with
pullquote and
the very first thing you want to do when you work with the DOM
is to double check the browser that is being used, to make sure it can handle the DOM
In the old days we would 'sniff' out to see what browser was being used and
we would say if this is IE3, do this, if it is
another browser, do this,
and that quickly became outdated as the browser
were changed and their names changed.
So, this new technique is much better. Basically,
we are going to use several functions from the DOM
and we are going to test for each one of those.
The functions include: getElementById(), we are going to createElement( )
and we are going to appendChild( ). This is how
we build that pullquote block. And, what we do
is try that function. If it
returns a false, we are basically going to say, "If this returns a false
then leave this function. Return to the web page.
So, we are making a shortcut telling the browser, "Hey, if you don't understand these three
functions, then you can't run this code."
And, "go away!" We are telling that to the browser.
This exclamation mark (or ***) means not, or the reverse of
and these two pipe symbols mean OR
So, we are saying
can you understand getElementbyID?
OR can you understand getElement( )?
OR can you understand appendChild( ), and if any one of those
are false, then we send the browser on its way without running the JavaScript code.
On the next line
we set up several variables to hold our information. You can see
that they are named so you know exactly what
contained in each one. The 'o' stands for 'object'.
Next, we go out into the HTML code and find all the span elements.
In the example that I'm using
there are two span tags, and that is saved in an array
of elements called arrElement.
Next, a regular expression is set up. A regular expression is
basically a super search/find. It uses character matching
Here we are saying look at the beginning "^"
for the word "pullquote". So, we are going to be
looking for this array of elements that we got from
the getElementsById( ) function
and we are going to see if any of them has a class="pullquote"
as part of it.
Let me go back to the pullquote and we are basically going to be looking for this right here (highlighting the class="pullquote")
Next, we will go through the list. So, if we have several pullquotes on the page,
this will handle all of them. We are going to look at the first
element,
if it matches the regular expression (regEx) and has the word "pullquote"
in it.... now there might be several span elements on the page that don't have "pullquote" in them...
but if the span matches our pullquotes regex,
then we are going to
create a new element named "blockquote"
we are going to give it a class name the same as the span tag (pullquote)
and we are going to add in a p tag inside that element.
Now we have a paragraph with the quoted text
inside of the blockquote. But, it is just hanging out in memory.
So, we need to insert/append this into the DOM (which is the web page in the computer's memory)
For each of these child nodes we basically
append their child, and basically take the paragraph
and add it right into the DOM. We aren't changing
the actual text on the web page, we are only changing the memory.
Here you can see where we used appendChild( ) to
actually add the paragraph to the blockquote.
Finally, we insert the blockQuote using insertBefore( ) to add it right before the span element of the apge.