May
15
2011

HTTP meta tag and smooth page transition

Introduction

Smooth page transition effect is not desirable in most of the web sites (specially commercial) as it could be irritating for some users, but still it is hugly used in personal blogs etc. Its intresting to know what is HTTP meta tag and how it is used.

Background

Many developers want to use page transition effect wherein page loads and unloads smoothly with some appearance effect and generally they are adviced to use Jquery to acheive that. With fadein method of JQuery you can easily create page transition effect. However, there is more easy (and traditional) way of doing it. With the help Meta tag.

Article Body

Smooth Page Transition

before reading ahead, pleae note that page transition effect using meta tag does not work in Netscape navigator and may not work in Firefox directly. We will first see how you can use meta tga for simple smooth page transition and then dive into HTTP headers and tags.

Consider you have a web site consisting of 2 pages page1.html and page2.html. page1.html contains link to page2.html. when user clicks the link, you want to open the page2 with smooth transition. add following meta tag inside <head> tags in page2.html

<META http-equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=23)">

Duration field is in seconds and can be modified as per requirement of how long transition effect to continue. Transition field indicate the effect type. 23 denotes random effect and is maximum transition trype. If you are intrested, you can try changing this number from 0 to 23 and see diffrent transition effects (you can easily get list of transition types and its effect in internet. so, i am not including this information here).

Remember, if you have many pages in your web site and you want this effect to be applied for all the pages of your web site, then you should add this meta tag in all the pages individually or If you have applied MasterPage to all pages, then MasterPage is the perfect place to add the tag. Simply add above meta tag in <head> section of MasterPage (Thats why i love MasterPages). 

What is Meta tag and how page transition works

As name suggests, meta tags are metadata of html document. its contents are not to be displayed but provides more information about HTML docuement to browser.

meta tag always has Name and value(content) pair. Content field provides information about the keyword specified in name/http-equiv

<META name="keyword" content="descriptionOfKeyword">

or

<META http-equiv="name" content="value">

Most of name kewords are intended for the use by externals such as search engine spiders, web crawlers. Typically, information such as author, abstract, doc-type etc. is specified using name keyword. Whereas http-equiv tags give more information of the document to browser rendering the page it forms header of the html page and give details like content-type, content-language, page-enter, page-exit etc. (there's big list of name/http-equiv keywords which can be easily searched on internet. So, i am avoiding to include it here)

Not all but most of the meta tags are supported by major browsers. But support for page transition varies browser to browser and also version of the browser. revealTrans effect has duration and transition fields duration field defines effect period in seconds while transition field has following predefined meaning.

Transition=0  Box in
Transition=1  Box out
Transition=2  Circle in
Transition=3  Circle out
Transition=4  Wipe up
Transition=5  Wipe down
Transition=6  Wipe right
Transition=7  Wipe left
Transition=8  Vertical Blinds
Transition=9  Horizontal Blinds
Transition=10  Checkerboard across
Transition=11  Checkerboard down
Transition=12  Random Disolve
Transition=13  Split vertical in
Transition=14  Split vertical out
Transition=15  Split horizontal in
Transition=16  Split horizontal out
Transition=17  Strips left down
Transition=18  Strips left up
Transition=19  Strips right down
Transition=20  Strips right up
Transition=21  Random bars horizontal
Transition=22  Random bars vertical
Transition=23  Random

In our first example, revealTrans effect is triggered by Page-Enter (http-equiv keyword)

Meta tags can be quite complex and can provide lot of other information to requesting client (browser) as well as to web spiders. Here, we tried to empasize only on page transition effect with intention of writing another note about other meta tags.

Conclusion

With the help of simple meta tag, page transition effect can be created very easily. Although use of more sophisticated way like JQuery to create such effect is more advicable. But for small web sites and personal blogs, addition of small tag in head can change look and feel of your web site

About Me

You are visiting personal website of Kedar (KK)

Please go here to know more about me

Disclaimer

The opinions expressed here represent my own and not those of my past or present employers.

The concept/code provided on this site may not work as described. If you are using any code provided on this site. Then, please test it thoroughly. I shall not be responsible for any issues arising in the code. 

Month List