Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

It's Better in the Beta: Custom Context Menus, Print from Script, Great Dialogs

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Michael Wallent
Microsoft Corporation

November 4, 1998

Note   This article discusses the Internet Explorer 5 Beta, whereas the final release of Internet Explorer 5.5 is now available.

Contents

It Beta Be Better
You Set the Context
Hardcopy!!
Good Dialog
Performance

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 on 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. 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.

It Beta Be Better

Now, on with the new stuff. For this release of Internet Explorer 5, we had three major focus points:

  • Performance
  • Support for the World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1
  • Common user requests

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:

  • Control over right-click context menu
  • Printing from script
  • Dialog box features (modeless, resizeable, control over status bar)

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.

You Set the Context

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.

View the sample (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.

Hardcopy!!

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.

Good Dialog

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.

View the sample (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.

Performance

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.

 

DHTML Dude

Michael Wallent is Microsoft's group program manager for DHTML and an exceedingly proud new papa.


  
Show:
© 2015 Microsoft