Techforum

Enhance your Web pages with DHTML - II

DHTML is a treasure of useful things. In this era of ASP.NET this powerful feature set is not fully exploited. These articles offer some highlights of how powerful and useful DHTML is.

Last we saw introduction and a feature set called transformations. We continue to explore DHTML further in this article.

Transitions for full page

Now the transitions we applied last time were specific to individual images. What about the entire page? Would you need to apply a transition to it? It would be like a slide show in that case. Of course, this would look odd on a website. But I am sure you will find some kind of pages on your website where the transition would have an impact.

For example, if you have just introduced a new product, clicking on that link should reveal the product home page with some special effect transition. This would have a higher impact than just moving to the new page.

You will not believe how simple it is.

Just add the following meta tag to your page. That’s it!

<META http-equiv=”Page-Enter”

CONTENT=”progid:DXImageTransform.Microsoft.Blinds

(Duration=4)” />

Of course, you can use all other transitions we have seen in past. Full details are available in DHTML help.

Filters

Now, as you know transitions help an image or page to change from one to another. After the transition is over, the image or page does not change.

Filters change the image itself. Those of you who have worked on some image editing software like PhotoShop will already know what filters are.

Here is a visual example. How to emboss an image? No third party tool required. Just Internet Explorer. Here is the syntax

<IMG id=imgf src=”<bitmap name>”

STYLE=”filter:progid:DXImageTransform.Microsoft.engrave()”/>

There are more special effects available. They are very impressive and powerful. Here is a list.

Name Effect

Alpha Adjusts the opacity of the content of the object.

BasicImage Adjusts the color processing, image rotation, or opacity of the content of the object.

Blur Blurs the content of the object so that it appears out of focus.

Chroma Displays a specific color of the content of the object as transparent.

Compositor Displays new content of the object as a logical color combination of the new and original content. The color and alpha values of each version of the content are evaluated to determine the final color on the output image.

DropShadow Creates a solid silhouette of the content of the object, offset in the specified direction. This creates the illusion that the content is floating and casting a shadow.

Emboss Displays the content of the object as an embossed texture using grayscale values.

Engrave Displays the content of the object as an engraved texture using grayscale values.

Glow Adds radiance around the outside edges of the content of the object so that it appears to glow.

ICMFilter Converts the color content of the object based on an Image Color Management (ICM) profile. This enables improved display of specific content, or simulated display for hardware devices, such as printers or monitors.

Light Creates the effect of a light shining on the content of the object.

MaskFilter Displays transparent pixels of the object content as a color mask, and makes the nontransparent pixels transparent.

Matrix Resizes, rotates, or reverses the content of the object using matrix transformation.

MotionBlur Causes the content of the object to appear to be in motion.

Shadow Creates a solid silhouette of the content of the object, offset in the specified direction. This creates the illusion of a shadow.

Wave Performs a sine wave distortion of the content of the object along the vertical axis.

Popups

This is a nice one. Popups in DHTML are not the irrititating ads we see and block all the time. It is just an enhancement in the UI which makes designing Web pages more intuitive and flexible.

The popup is just a simple window, like we get the Alert() or messagebox window. But unlike messagebox, this window is much more flexible and provides full control over its properties.

To create a popup use the following code. This is a simple HTML Page with code which creates popup on various UI events.

<HTML>
   <HEAD>
       <style>         </style>
             <TITLE>Basic Popup Example</TITLE>
         <SCRIPT LANGUAGE=”JScript”>

//

// Creating the popup window object. For predictable

// results, always create the popup globaly.

var oPopup = window.createPopup();
function openPopup()

//function to show the popup

{

//find out which item on page triggered the event

var src = event.srcElement;

//get reference to the body of the popup

var oPopBody = oPopup.document.body;

// Below the HTML that creates the popup content

// looks complex due to the formatting tags.

// Name of the calling element is added to the

// popup text

oPopBody.innerHTML = “<div style=’BORDER-RIGHT: #ff9966 solid; BORDER-TOP: #ff9966 solid; FONT-SIZE: large; BORDER-LEFT: #ff9966 solid; COLOR: yellow; BORDER-BOTTOM: #ff9966 solid; BACKGROUND-COLOR: red; TEXT-ALIGN: center’>” + “Help for :” +src.id + “</div>”

//show the popup just below the element which

// called the popup

oPopup.show(0,src.clientHeight+ 10, 200,35,src);

//end of function

}

</SCRIPT>
</HEAD>

<BODY>

<!— define two textboxes and a button—-->

Textbox 1 <input onfocus=”openPopup()”

type=”text” id= “textbox1”>

<br>
<br>
<br>
<br>

Textbox 2 <input type=”text” id= “textbox2”>

<br>
<br>

<input type =button onclick=”openPopup()”
value =”Click to open popup” id= “button1” >

<br>
<BR>
<BR>
<BR>

</BODY>

</HTML>

Run this file. Move around the textboxes. Click on the button, the popup appears below it.

When textbox1 has focus, the popup appears just below it. Notice that you can continue to type in the textbox. When you move out of the textbox, it disappears. Also, if the user clicks anywhere outside, the popup disappears.

Why am I harping on this POPUP feature so much? Because it can revamp and enhance the user interaction with your website dramatically.

Imagine being able to give online, customised popup-based help to users on a Web page. Users don’t have to press any key, you can provide help to ensure common mistakes are not done and the help can even change based upon what the user types within the element.

You can also use Popup object to create context sensitive (right-click) menus on Web pages.

The POPUP object is better than Dialog Box (messagebox or alert) or Tooltips because :

1. Popup does not interfere with user activity. Users can continue to work on the Web page. The focus continues to be on the Web page.

2. You can change the appearance of the Popup window exactly as you want. Dialogs provide very little customisation capabilities

3. On the other hand, Tooltip is too transient. It closes when user starts typing.

4. Also, tooltip has a fixed appearance. It can not be changed.

So go ahead and use Popups. While doing so, you must be also aware of some rules about popups.

1. Popup cannot have textboxes in it.

2. Nothing inside a popup can be selected (by mouse or keyboard).

3. You can have links within a popup. But clicking on popup itself does not have any navigational capabilities.

4. The position of the Popup is defined by the code. User cannot change it.

5. Only one Popup can be active at a time. If another popup is shown, the existing popup is automatically closed.

How to suppress the right-click menu in a Web page?

In some cases, you don’t want users to view source or download pictures and so on. Usually the right-click menu offers all these features. How do you disable this menu?

Just one attribute is enough. Here is the syntax:

<body oncontextmenu= “return false” >

... all the elements in body

</body>

Great! Is it not?

Dynamic content

All the items we have discussed today work on the HTML elements which were originally rendered when the page displayed. What if we want to add new content in the page after the page has rendered on the browser – that too without having to make a server trip. This apparently impossible feat (considering the way HTML is designed to work) is also possible with DHTML.

There are two methods available for this purpose.

insertAdjacentHTMLInserts full features HTML at the specified locationinsertAdjacentTextInserts only pure text at the specified locationFor each of these methods we must specify the base element. In addition we can specify where to exactly insert the text / HTML. Before/after – begin or before /after end

Here is a quick example.

<HTML>

<script>

function Addnew()

{

   document.body.insertAdjacentHTML( “BeforeEnd”,”<br>
   <input value = ‘automatically inserted’><br>”) ;

}

</script>

<body>

   <input type=”button” value=”Add textbox”
   onclick=”Addnew()” accesskey=”A”>

<br>

<input id=”text1”>

<br>

</body>

</HTML>

Run this example and click on the Add textbox button. Everytime you click on it, a new textbox will be added.

Here the main command is the insertAdjacentHTML method. This applies the insertion to the body. We need to add it before end because the textbox needs to be added within the body. The second parameter is full featured HTML. That’s it.

Of course with little effort we can data bind these when the page is posted. Using this features, you can create UI which increases data entry elements dynamically without any server trip.

In the next article we will complete our exploration of DHTML. We will cover one very important topic next time—how do you mix server-side ASP.NET code with client-side DHTML code and call one from the other. With this knowledge you can really create very powerful and high performance Web functionality.

About the Author:Dr Nitin Paranjape is the Chairman and MD of Maestros (Mediline). He is a consultant with many organisations, covering appropriate technology utilisation, business application of relevant technology, application architecture and audit as well as knowledge transfer. He has authored more than 650 articles on various technology-related subjects. He can be contacted at nitin@mediline.co.in