CHAPTER 10
Dynamic Interaction

The classes in this chapter are designed to offer features that could only otherwise be created using JavaScript. For example, both the HTML5 placeholder and autofocus attributes have been emulated as dynamic classes, so you can now offer these features on most JavaScript-enabled browsers.

Also, there is a powerful system for adding citations to a web page, and automatically creating a list of them all at the article end, giving you the ability to use names to refer to objects, which are then automatically converted into numbers you can use to create labels or captions such as Figure 1, Table 3, and so on. During this, the numbering is kept consistent even if you move the referenced objects about on the page.

Finally, there’s a simple class for preventing casual users from trying to copy and paste the contents of your web page.

PLUG-IN 86: Placeholder (placeholder[prompt])

Plug-in 86 provides similar functionality to the HTML5 placeholder attribute for input fields. With it, you can specify default text you would like to appear in a field that has no input—for use as a prompt for the user—as shown in Figure 10-1.

In Figure 10-2, once the user starts entering data into the field, the placeholder is forgotten and will not reappear unless the data entered is deleted by the user.

FIGURE 10-1 A placeholder prompt is displayed in an empty field.

FIGURE 10-2 The placeholder prompt is removed when data is entered into the field.

Variables, Functions, and Properties

About the Class

This class uses the replace() function to pass the argument containing the placeholder text to the FieldPrompt() function, via the arguments[] array. The origcname string variable is used for the replace() function, rather than the usual cnamecopy string, since it retains any uppercase characters that should be used in the placeholder. But before applying the placeholder text to a field, it checks whether the browser already has an HTML5 placeholder value set, and if so, it does nothing, allowing that to override this class.

How to Use It

To insert a placeholder prompt in a field, place the prompt text within square brackets following the class name, in the class argument of an object, like this:

<input type='text' name='name' class='placeholder[Enter your name]' />

The JavaScript

if (classname.search(/placeholder/, 0) != -1 &&
   tagname == 'input')
{
   origcname.replace(/placeholder[([^]]*)]/, function()
   {
      if (thistag.placeholder == '' ||
         typeof thistag.placeholder == UNDEF)
         FieldPrompt(thistag, arguments[1])
   } )
}

PLUG-IN 87: Autofocus (autofocus)

With Plug-in 87, you can specify which object should have focus when a page loads, in the same way that google.com, for example, automatically places the input cursor into the search field so it’s ready for you to enter your search term.

In Figure 10-3, normally no field would have focus on page load, but by using this class the input field has been focused, and the text cursor is now displaying within it.

FIGURE 10-3 Use this class to give focus to any object you choose.

Variables, Functions, and Properties

About the Class

This class checks whether the tag name is one of input, select, textarea, or button, and proceeds only if it is. Next it checks whether the tag type has the value hidden, and if so, it then uses the focus() function to give the tag focus.

How to Use It

To use this class, enter its name into the class argument of any <input>, <select>, <textarea>, or <button> object, like this:

<input type='text' name='name' class='autofocus' />

The JavaScript

if (classname.search(/autofocus/, 0) != -1 &&
   tagname == 'input'    || tagname == 'select' ||
   tagname == 'textarea' || tagname == 'button')
{
   if (tagtype != 'hidden') thistag.focus()
}

PLUG-IN 88: Cite (cite[citation])

Using Plug-in 88, you can easily add citations as you compile an article, which will then be automatically numbered, hyperlinked in superscript text, and referenced at the end of the article. For example, Figure 10-4 features a short biography of Sir Timothy Berners-Lee (inventor of the World Wide Web) that incorporates two references to articles on other sites, which have been marked as they occur in the text and detailed at the article end.

FIGURE 10-4 This class makes handling citations extremely easy.

Variables, Functions, and Properties

About the Class

This class makes a note of all cite[] class references as they occur and places the citation details from each into the array cites[]. A superscript link is then made to the list of citations, which will appear once all have been processed. Using these links, you can jump directly to the matching citation later in the web page.

How to Use It

To use this class, you need to include some citation details within the square brackets of a cite[] class argument, like this:

Global warming may be increasing<span class='cite[Wikipedia]'></span>.

Or you can include a link within the citation details if you prefer, like this:

Global warming may be increasing<span class="cite[<a href='
http://en.wikipedia.org/wiki/Global_warming'>Wikipedia</a>]"></span>.

In this case, the class argument is enclosed in double quotation marks so that the URL within it can be placed in single quotation marks.

Once you have placed all your citations in the article text, you must then place an object with the ID name of citations somewhere on your web page, which will then be used for placing the citation details in once they have all been processed, like this:

<div id='citations'></div>

To see this work in practice, here is the HTML used for Figure 10-4:

<h3>Sir Timothy Berners-Lee</h3>

Sir Timothy Berners-Lee, OM, KBE, FRS, FREng, FRSA, born 8 June 1955<span
class="cite[<a href='http://www.w3.org/People/Berners-Lee/Longer.html'>
w3.org</a>]"></span>, is a British engineer and computer scientist and
MIT professor credited with inventing the World Wide Web, making the
first proposal for it in March 1989<span class="cite[<a href='http://205.
188.238.181/time/time100/scientist/profile/bernerslee.html'>Time</a>]">
</span>. On 25 December 1990, with the help of Robert Cailliau and a
young student at CERN, he implemented the first successful communication
between an HTTP client and server via the Internet.

<div id='citations'</div>

The JavaScript that Creates the Citation List

If you are interested in how this works, the following code runs after all the dynamic classes in a web page have been processed, but only if cindex has a value greater than 0 (indicating there is at least one citation):

if (cindex > 0)
{
   var html = '<ol>'

   for (index = 0 ; index < cindex ; ++index)
      html += InsVars('<a name=cite#1></a><li>#2</li>',
         index + 1, cites[index])

   if (typeof O('citations') != UNDEF) Html('citations', html + '</ol>')
}

It then creates an unordered list and iterates through the cites[] array extracting all the citations into the object that has been given the ID of citations (if it exists).

The code that first processes the cite[] class is shown next.

The JavaScript

if (classname.search(/cite/, 0) != -1)
{
   cnamecopy.replace(/cite[([^]]*)]/, function()
   {
      cites[cindex++]           = arguments[1]
      S(thistag).verticalAlign  = 'super'
      S(thistag).textDecoration = 'none'
      S(thistag).fontSize       = '50%'

      Html(thistag, Html(thistag) +
         InsVars("<a href='#cite#1'>[#1]</a>", cindex))
   } )
}

PLUG-IN 89: Reference (ref[type|name])

Using Plug-in 89, you can refer to sections of an article by special names, and when the article is viewed by a user, all the references are changed to numbers, in the same way that figures in this chapter have numbers that run in order to easily identify them. This means you can relocate the references and sections to which they refer within an article without worrying about having to renumber them all.

For example, in Figure 10-5 there are two figures and one section that are referenced by the main text. Even though these objects do not appear in the same order in which they are referred, they have been given identifying numbers in the correct sequence.

FIGURE 10-5 This class keeps track of referenced objects, renumbering them for you.

Variables, Functions, and Properties

About the Class

This class takes an object type and an object name and then keeps track of where these are used throughout a web page. They are then given numerical values according to the order in which they are encountered, such that (for example) the first figure object is given the value 1, the second is given the value 2, and so on.

How to Use It

To use this class, you must give every object you reference a unique name, so that whenever it is mentioned, the correct number can be placed with it. You also need to specify the type of each object so you can, for instance, have figures and tables, and as many other object types as you need.

So, for example, to announce that an object is a figure, you might use code such as this:

<b>Figure <span class='ref[fig|uniquename]'></span><br />
<img src='animage.jpg' />

In this case, the unique name is uniquename, and the object type is fig. To now reference this figure from anywhere in the web page, you would use code such as this:

(see Figure <span class='ref[fig|uniquename]'></span>)

Leave the contents of the <span> (or other object you use) empty because the class will place the number to display inside it, overwriting anything already there.

Once you have done this, you can move the figure and any references to it to any other places in the article and they will still correctly reference each other—and, if necessary, they will be renumbered should the figure be moved before or after another figure.

Here’s another example that uses this class, and which creates the result seen in Figure 10-5:

<b>Figure <span class='ref[fig|rect]'></span>
(Figure of a rectangle goes here)</b>

<p>A square, as shown in Figure <span class='ref[fig|square]'></span>,
is an example of a rectangle (see Figure <span class='ref[fig|rect]'>
</span>), which is a four-sided shape, as described in Section <span
class='ref[sec|shape]'></span>.</p>

<b>Section <span class='ref[sec|shape ]'></span>
(Description of a shape goes here)</b><br /><br />

<b>Figure <span class='ref[fig|square ]'></span>
(Figure of a square goes here)</b>

I have highlighted the references in bold so you can quickly see them. Three objects in total are referenced:

• fig|rect

• fig|square

• sec|shape

Two of the objects are of type fig and the other is of type sec. What the class does is allocate the fig object numbers in the order in which they first appear in the document (and would do the same for the sec objects, except there is only one).

Therefore, if fig|square is encountered first, it will become Figure 1, but if fig|rect is the first one found, then it will be Figure 1. This means that all the objects will always be ordered correctly according to where they appear in an article (no matter where you move them to), making it easy for your readers to locate them.

The JavaScript

if (classname.search(/ref/, 0) != -1)
{
   cnamecopy.replace(/ref[([^|]*)|([^]]*)]/, function()
   {
      var a1 = arguments[1]
      var a2 = arguments[2]

      if (typeof refers[a1] == UNDEF)
      {
         refers[a1]          = Array()
          refers[a1]['count'] = 1
         refers[a1][a2]       = 1
      }
      else if (typeof refers[a1][a2] == UNDEF)
         refers[a1][a2] = ++refers[a1]['count']

      Html(thistag, refers[a1][a2])
   } )
}

PLUG-IN 90: No Copy (nocopy)

Sometimes you want to prevent idle copying and pasting of your work, or simply wish to prevent the ugly effect that a highlighted section of text might have on your design. You can do so using Plug-in 90, as shown in Figure 10-6, in which the first section of text can be copied, but the second cannot.

Variables, Functions, and Properties

About the Class

This class prevents the use of drag and drop on an object. It works well on most browsers but there is a bug in Internet Explorer in which you can commence a drag operation outside of an object that uses this class and the browser will allow you to continue the drag into it. But IE does correctly prevent starting a drag operation from within objects using this class.

How to Use It

To prevent an object from allowing drag-and-copy operations, mention this class name in the object’s class argument, like this:

<p class='nocopy'>This text is uncopyable</p>

However, due to the Internet Explorer bug, you will have the best results if you attach this class to the <body> section of a web page, like this (so that nothing on a web page can be copied):

<body class='nocopy'>
   … Your web page contents
</body>

FIGURE 10-6 Prevent sections of text from being copied with this plug-in.

Here is the HTML used for Figure 10-6:

<p>The copy feature of a web browser allows you to transfer content from
it to another program. You can, for example, click on this text and drag
the mouse to highlight some of it, which you can then copy.</p>

<p class='nocopy'>On the other hand, when you don't wish this feature
to be enabled, you can turn it off, as with this section of text, which
you will find cannot be copied by dragging with the mouse button held
down.</p>

The JavaScript

if (classname.search(/nocopy/, 0) != -1)
{
   PreventAction(thistag, 'both', true)
}