Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

XML Applications : Page 4

Behaviors are an enhancement to Internet Explorer 5 that allow designers to add scripting elements without having to do the scripting needed to make them work. Behaviors are also a way in which scripters can write a script once and turn it over to designers for use whenever needed.


advertisement

Footnote Behavior
If you've ever seen a Web document with footnotes you know what a problem it is to read a relevant footnote and then scroll back up the document to find where you had stopped reading. This behavior changes that. It will bring the footnotes to the user

(1) without the need for them to scroll away from their place in the page.

Let's face it too, footnotes can be ugly things tacked to the bottom of a page. By implementing a footnote tag via a behavior and XML we can give a designer complete control over what the footnote is going to look like when it appears for the user. Everything about the way the footnote looks can be adjusted via CSS.



Since FOOTNOTE is set up via XML so you'll need to create an appropriate namespace before you can use it. We're doing it as XML so that older browsers aren't affected adversely. It also let's us define a brand new tag. The namespace is set up in the <html> tag on your Web page. Here's the one we're using on this page:


<html xmlns:pub>

The next step is to define XML tag we'll be using. This is done in the specific media type. In this case the behavior will apply to the screen so will place its CSS properties there and we associate it with our namespace by prefixing the namespace to the declaration. Our declaration looks like this:


<style>
<!--
@media screen {
   pub\:FOOTNOTE {behavior:url(footnote.htc)}
   .footstyle {width: 250;
   		position: absolute;
		left:-1000;
		color: black;
		background-color: #9999cc;
		text-align: justify;
		border-color: #404040;
		border-width: thin;
		border-style: solid;
		padding: 1em;
		font-family: arial;
		font-size: 10pt;
		}
	.closer {cursor: hand;
		 color="#ffff00";
		 text-align: right;
		 margin-top: 1em;
		 }
	.fhilite {cursor: hand;
		  color: chocolate;
		  font-family: "Arial";
		  text-decoration: none;
		  }
}
-->
</style>

As you can see, FOOTNOTE only needs the behavior property. It must point to the behavior file, footnote.htc. You can download the footnote.htc file here. Once you have it just make sure it's on your server and that the url is specified properly in your CSS.

There are three CSS classes defined in the namespace as well. These are all used by the footnote behavior. The first is footstyle. This defines how the footnote will look when the user calls it. It should and applied to the division holding the footnote and it's important that it have at least three properties:

  • width sets the display width in pixels of all footnotes.
  • left property is used to hide the footnote until it is called.
  • postition: absolute frees the footnote so that it can be postitioned anywhere on the page.

The closer class describes how the word "close" will look in the displayed footnote block. This word is added to the bottom right corner of footnotes so that there is an option to remove them from the page display.

Lastly, the class fhilite describes how the footnote link will appear and adds a hand cursor for user feedback.

You'll need to create individual divisions for each footnote to be displayed. Here's what one from this page looks like:


<div id=foot1 class=footstyle>
<a name="footnote1"></a>
(1) A user used to be someone who was heavily into drugs.
Here a user simply refers to the person using a Web page.
In this case, you.
</div>

The id of the division is extremely important. It is via this id that the behavior manipulates the footnote. The name can be anything you like as long as it is unique. You'll be using it in the FOOTNOTE tag to link the action to the division. In this case we used the id of foot1. This would be referenced in the FOOTNOTE tag as footName="foot1"

(2).

Let's take a look now at how that last footnote was called:


<pub:FOOTNOTE footName="foot2">
<a href="#footnote2">(2)</a></pub:FOOTNOTE>

It's that simple. Notice we've placed it around working HTML which would scroll down to the footnote in older browsers. The footnote behavior will erase that for IE5 and replace it with appropriate HTML to call our enhanced footnotes leaving just the text that is present within the tag.

You should note that footName is a required property. If you forget to include it you won't get an error message. The enhanced footnote behavior will simply do nothing.

Ok, so consider yourself armed, er, footed. You should now know everything you need to apply footnotes to your pages.

(1) A user used to be someone who was heavily into drugs. Here a user simply refers to the person using a Web page. In this case, you.
(2) The division id for this particular footnote, the second one, is foot2 and is referenced in the FOOTNOTE tag as footName="foot2".



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date