 | ||
|
| ||
| ||
|
| ||
Michael Wallent
Lead Program Manager, DHTML
Microsoft Corporation
November 4, 1998
The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices) "DHTML Dude" column. Note also that while this article discusses the Internet Explorer 5.0 Beta, the final release of Internet Explorer 5.0 
is now available.
May I be the first one to welcome you to the Microsoft Internet Explorer 5 release?
Back in the Developer Preview release of Internet Explorer 5, we introduced DHTML behaviors -- a new component model for HTML developers -- to make it easier for Web designers and developers to work together using DHTML.
All you need to do is build your own DHTML behavior and submit it. Entries will be judged their "Coolness, Uniqueness, Usability, and Documentation." The deadline for submissions will be December 15, 1998. Check it out the details in the MSDN Online Member area/sitebuilder/ie/dhtmlbehave.asp. The prizes, as if my personal thanks and gratitude isn't enough, will include three hot (as in "cool," not "stolen") new laptop computers, 10 copies of Visual InterDev™ 6.0, and 100 T-shirts!! Try your hand at building a behavior, and you might win. Winning entries will be posted.
Now, on with the new stuff. For this release of Internet Explorer 5, we had three major focus points:
I have to admit that the last point is a little broad. That's where we filed a set of smaller features that we have been asked about on more than one occasion. Things like:
Another request we heard many times was for the ability to allow a page author to specify simple shapes on the page -- such as lines and ovals -- without using images. To solve this problem, we have implemented Vector Markup Language (VML) based on the W3C VML specification
. Interestingly, we used the mechanisms provided by DHTML behaviors to implement this functionality. Rebecca Norlander shows how VML can be used in conjunction with the DOM and databinding in her article on DOM support. Look for more info on VML in upcoming DHTML Dude articles.
Creating your own context menu is pretty simple. There is a new event -- oncontextmenu -- that all elements now expose. This event bubbles, so it can be caught in the same way that you would handle a mouse onclick.
Here is an example (requires Internet Explorer 5). Right-click anywhere on the page to bring up a custom context menu.
Here's the code:
<html>
<head>
<style>
.menuItem {
font-family:sans-serif; font-size:12pt;
width:220;padding-left:20;
background-color:menu;
color:black
}
.highlightItem {
font-family:sans-serif; font-size:12pt;
width:220; padding-left:20;
background-Color:highlight; color:white;
}
</style>
</head>
<body oncontextmenu="showMenu(); return false">
<h2>Right Click to Bring Up a Context Menu</h2>
<!-- Context Menu -->
<div id=menu1
onclick="clickMenu()"
onmouseover="toggleMenu()"
onmouseout="toggleMenu()"
style="position:absolute;
display:none;
border: 2px outset black;
width:220;
background-color:menu">
<div class="menuItem"
doFunction="alert(el.innerHTML);">Graph</div>
<hr>
<div class="menuItem"
doFunction="alert(el.innerHTML);">
Show News
</div>
<div class="menuItem"
doFunction="alert(el.innerHTML);">Buy
</div>
<hr>
<div class="menuItem"
doFunction="alert(el.innerHTML);">Sell
</div>
<div class="menuItem"
doFunction="alert(el.innerHTML);">
Refresh Portfolio
</div>
</div>
<!-- End of Context Menu -->
<script>
var el;
function showMenu() {
ContextElement=event.srcElement;
menu1.style.leftPos+=10;
menu1.style.posLeft=event.clientX;
menu1.style.posTop=event.clientY;
menu1.style.display="";
menu1.setCapture();
}
function toggleMenu() {
el=event.srcElement;
if (el.className=="menuItem") {
el.className="highlightItem";
} else if (el.className=="highlightItem") {
el.className="menuItem";
}
}
function clickMenu() {
menu1.releaseCapture();
menu1.style.display="none";
el=event.srcElement;
if (el.doFunction != null) {
eval(el.doFunction);
}
}
</script>
</body>
</html>
Catching the oncontextmenu event is simple:
<body oncontextmenu="showMenu(); return false">
In this example, I'm catching it on the body -- so all context menu requests go through here. Note that the event handler returns false. Without this, my custom context menu would appear, then the standard one would appear. Returning false causes the default action to be cancelled, just as in many other events. In this case, the default action is to show a context menu.
Internet Explorer 5 now lets a script author call the window.print() method which prompts the user to print the current page.
Here's how it works:
<html> <body style="font-family: verdana"> Print Me <input type=button value="Print" onclick="window.print()"> </body> </html>
Here's a page that does it (requires Internet Explorer 5).
The print() method is now exposed off the window object, and presents the print dialog for the user to OK or cancel. Pages cannot be printed without user acceptance from this dialog.
So simple.
Internet Explorer 4.0 introduced HTML Dialogs as a way to show modal UI. As cool as that was, we got requests to make modeless HTML Dialogs, HTML Dialogs that could be resized, and oh-so-many requests from the visually minded to get rid of that awful status bar.
Fine.
We did it all.
Here's an example (requires Internet Explorer 5).
Notice how when you bring up the dialog, it's too big? Well, resize away! Want to bring up more than one? Go for it!
<html>
<body style="font-family: verdana">
<h2>New Dialog Features</h2>
<ul>
<li>Modeless
<li>Resizeable
<li>Control over Status Bar
</ul>
<br>
<input type=button value="Modal"
onclick="doDialogModal()">
<input type=button value="Modeless"
onclick="doDialogModeless()">
<script>
function doDialogModal() {
window.showModalDialog("colordlg.htm", document,
"resizable:yes; status:no")
}
function doDialogModeless() {
window.showModelessDialog("colordlg.htm", document,
"resizable:yes; status:no");
}
</script>
</body>
</html>
To create a modeless dialog, just use the window.showModelessDialog() call. The parameters and options are identical to its modal cousin.
The other two new features I discussed -- resizability and removing the status bar -- are done via feature strings. The new feature strings are "status" and "resizable". The code snippet above shows how they are used.
Many times in this space you have seen comments about how to make your pages run faster. Well, I have a very simple suggestion this time -- run your content in Internet Explorer 5. We've made some dramatic enhancements to manipulating and loading documents. This is especially evident in data-bound pages, which have improved as much as 100 times over Internet Explorer 4.0. That's right, 100 times.
Michael Wallent is Microsoft's group program manager for DHTML and an exceedingly proud new papa.
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top