Click to return to the Essentials home page    
Web Workshop  |  Essentials

No Problem Too Small, No Screen Too Big

Jeff Brown
Rafael M. Muñoz
Microsoft Corporation

Updated: February 16, 1999

The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices) "Web Men Talking" column.

Ask the Web Men! Don't apologize. That's why they're here -- to answer any query, tackle any dilemma. They live for the challenge. Well, that and a few other things.

Contents
No mountain too small - Navigation through the use of radio buttons
Tick, tock - Using timers in DHTML
Christmas comes early!sample - Accessing the DHTML programming model through Java
Now playing on the big screen - Full-screen mode in Internet Explorer

This month, our answer guys turn their super-sleuthing senses to that all-time favorite, Dynamic HTML. They also discuss Internet Explorer Kiosk Mode and redirects using radio buttons. As for the hot-button issue, read on to find out what that's all about.

No mountain too small

Dear Web Men:

I am a an MSDN Online member and I read Web Men Talking regularly. Web site development is a hobby for me.

I'm not terribly advanced in JScript or VBScript, so forgive me if this question is too basic for the site. It's a question I have posed to numerous "experts" on the Web (C|Net, JavaScript Pro, JavaScript Source, etc.) and have not gotten an answer. I avoided you guys because I thought it might be too basic for you two.

Anyway, I would like to create a form with a menu of options in a radio button array. When the user hits SUBMIT, I want the form to redirect the user to a Web page, based on the value of the radio button chosen. In other words, if the form were to look like this:

Please select an option:

() Send e-mail
() Search MSN
() Return to home page

[NEXT-->]

The user selects Search MSN; upon clicking NEXT--> (the submit button), the form would redirect the user to "search.msn.com". The concept is very similar to a "Wizard" seen in Microsoft Office or Windows 98.

I have seen this type of redirect done with a drop-down list, but never with radio buttons.

Thanks in advance for your help.

Paul Alfieri

The Web Men reply:

Paul, no mountain is too huge -- or too small -- for us us to climb for our readers. Rest assured we'd never get too big for our fans! Plus, being looked at as experts above the others you listed is quite a compliment.

You want to create something like a wizard using radio buttons and a submit button. But think about it: Do you really want to use a form? A form will require you to send user input back to the server for processing -- and if all you want to do are simple things, such as you mention above, some basic HTML and script will do the trick. Now, if you want to process the input to access something, such as a database, to determine what to do next, a form is definitely the way to go.

Being the type of guys that we are, we won't squelch those creative juices. We'll provid you with both solutions, and will leave it up to you to choose. First, here is the script you need to create the basic HTML page with the effect you want.

<script language=javascript>
function nextdestination()
{
  if (radio1[0].checked)
    site = "mailto: Webmen@microsoft.com";
  else if (radio1[1].checked)
    site = "http://search.msn.com/";
  else if (radio1[2].checked)
    site = "http://www.microsoft.com/";
  else
    site = "stay"

  if (site != "stay")
    location.href=site;
  else
    alert ("Need to make a selection");
}
</script>
<P><INPUT name=radio1 type=radio>Send Mail</P>

<P><INPUT name=radio1 type=radio>Search MSN</P>

<P><INPUT name=radio1 type=radio>
Return to home page</P>

<P><INPUT id=button1 name=button1 type=button
value="Next -->" onclick="nextdestination();"></P>

Looking at the sample, you will see three radio buttons, all with the same NAME. This groups the radio buttons so that only one can be selected at a time. We then add our own BUTTON to the page, capturing the ONCLICK event and calling our JavaScript function nextdestination(). In our function, we determine which radio button has been CHECKED and then set a variable that is used to set the LOCATION object's HREF member to the specific URL location. We even put in a check to ensure a radio button has been selected for the case that someone comes to our page and hits the Next button too soon.

With some slight modifications we can create a form. The main change, besides adding the FORM tag, is that each radio button now has a unique VALUE, so that back on our server, we can use an Active Server Pages (ASP) file to determine which one is checked.

<form method=post
action="http://rafaelmu1/webmen/whattodo.asp">

<P><INPUT name=radio1 type=radio value="task1">
Send Mail</P>

<P><INPUT name=radio1 type=radio value="task2">
Search MSN</P>

<P><INPUT name=radio1 type=radio value="task3">
Return to home page</P>

<P><INPUT id=submit1 name=submit1 type=submit
value=Submit></P>
</form>

The ASP file is very similar to our script in the first example, except that we check for the parameters being passed back to the server to see what the value of radio1 is. Then we set the location.href to the appropriate location -- and we are on our way.

<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Visual Studio 6.0">
</HEAD>
<BODY>
<%'= Request.Form ("radio1")
if Request.Form ("radio1") = "task1" then %>
<h1>Thanks for sending mail.</h1>

<script language=javascript>
location.href="mailto: Webmen@microsoft.com";
</script>
<%elseif Request.Form ("radio1") = "task2" then%>
<script language=javascript>
location.href="http://search.msn.com/"
</script>
<%elseif Request.Form ("radio1") = "task3" then%>
<script language=javascript>
location.href="http://www.microsoft.com/"
</script>
<%else%>
<script language=javascript>
location.href="http://webmen/radioopt.htm"
</script>
<%end if%>
</BODY>
</HTML>

TopBack to top

Tick, tock

Dear Web Men:

I'm trying to make a Web page that shows a text message, one after the other, using DHTML and VBScript. I am kind of avoiding JavaScript to see if it's possible to do the same thing with both languages.

To wait in Visual Basic, I would use the SLEEP API...; no such thing in VBScript. I haven't heard of a way to define APIs through script yet. I found a way to kind of wait, but it seems to have a problem. My script does not visually update the Web page until it is finished executing.

Here is kind of an example of what I was trying to do. The result will be that when I load this document, four seconds will pass and the words "Text line 4" will appear on the screen. 

<body onload="StartProgram" language="vbscript">
<span id="TheMessage"></span>
</body>
<script language="vbscript">
<!--
' ---------------------------------------------
Option Explicit

Dim Message(4)

Message(1) = "Text line 1"
Message(2) = "Text line 2"
Message(3) = "Text line 3"
Message(4) = "Text line 4"
' ---------------------------------------------
Public Sub StartProgram
Dim CurNum
For CurNum = 1 to 4
TheMessage.innerHtml = Message(CurNum)
PleaseWait(1)
Next
End Sub
' ---------------------------------------------
Public Sub PleaseWait(SecondsToWait)
Dim TimerStart
TimerStart = Timer
Do
' nothing
Loop While Timer < TimmerStart + SecondsToWait
End Sub
' ---------------------------------------------
'-->
</script>

Now, I did put a [ MsgBox "Testing" ] after the message has been written to check and make sure things are happening. When I was messaged, the page appeared to have updated itself.

Any clues or ideas for how to update the Web page while the script is still running?

Lewis Moten

The Web Men reply:

We can see why you headed down the path you did, but what you really need are timers, which we'll refer to as intervals. They are available through the Dynamic HTML (DHTML) object model. They are not part of the scripting language. You can work with intervals through Visual Basic® Scripting Edition (VBScript) or JavaScript, or any other favorite scripting language supported by Internet Explorer.

By the way, Visual Basic for Windows has no SLEEP function (there's a Timer function, as you tried to use in your sample code), so we're guessing you suffered a momentary flashback to days as a Visual Basic for MS-DOS programmer. Yikes! We're glad you're back with us here in 1998.

There are two ways you can work with intervals. You can have script run as a one time thing after a specified time interval has passed, or you can have script run repeatedly each time a specified time interval passes. You call methods of the window object to set up these intervals. A set method sets up the interval, and a clear method cancels it. You use the set method to specify the script to run and the duration of the interval in milliseconds.

In the first case, where you want to have some script run only once, you use window.setTimeout and window.clearTimeout. For the second case, which is what you want to do, you use window.setInterval and window.clearInterval.

To accomplish what you want to do, you'll also need to change how your code is set up. You should only use your StartProgram procedure to set up the interval, because it is called when the page first loads. The script that changes the message text should be in a separate procedure that is called repeatedly in response to a time interval passing.

We have modified your script to use window.setInterval and window.clearInterval. It changes the message text every second (equal to 1000 milliseconds), by calling the DisplayMessage procedure, until the last message is displayed. When the last message has been displayed, the procedure cancels the interval. 

<HTML>
<BODY ONLOAD="StartProgram" LANGUAGE="VBSCRIPT">
<SPAN ID="TheMessage"></SPAN>
<SCRIPT LANGUAGE="VBSCRIPT">
<!--
Option Explicit

Dim Message(4)

Message(1) = "Text line 1"
Message(2) = "Text line 2"
Message(3) = "Text line 3"
Message(4) = "Text line 4"

Dim CurNum
Dim IntervalID

Sub StartProgram
CurNum = 1
IntervalID = Window.setInterval("DisplayMessage",
1000)
End Sub

Sub DisplayMessage
TheMessage.innerHTML = Message(CurNum)
CurNum = CurNum + 1
If CurNum > 4 Then Window.clearInterval(IntervalID)
End Sub
'-->
</SCRIPT>
</BODY>
</HTML>

TopBack to top

Christmas comes early!

Dear Web Men:

Can you help me on this one? How do you access Internet Explorer's Document Object Model from Java? Specifically, I want to be able to write directly into a <DIV> on the same Web page as the applet using the insertAdjacentHTML() method.

Thanks in advance.

Jonathan Cross

The Web Men reply:

Jonathan, if you would have asked us just a month ago, we would probably have shaken our heads and said, "Well, yes but only if you are a glutton for punishment!" You would have had to write all the classes yourself. But now, we can smile and say, "Definitely, through the use of the Windows Foundation Classes." Why don't you just consider this an early Christmas gift from the Web Men. (Oh, let's don't forget to thank the Visual J++™ product team also.)

Visual J++ 6.0 is now on the market, and with it comes the Windows Foundation Classes (WFC), which will allow you to access the DHTML programming model.

WFC contains many new Java packages. For our purposes, we're most interested in the com.ms.wfc.html package, which allows us to access the DHTML. Let's first take a look at some straight HTML that displays a GIF within a designated <DIV> area.

<div id="mydiv" style="position:absolute; top:50;
     left:0; width:150; height:150;
     background:lightblue">
<img src="webmen-a.gif" width=79 height=79
     style=" POSITION: relative; TOP: 20;LEFT: 25">
<center>
<p style="MARGIN-TOP: 30">
Brought to you by the Web Men</p>
</center>
</div>

The actual HTML page for our Java solution looks like this:

<div id="mydiv" style="position:absolute; top:50;
    left:0; width:150; height:150;
    background:lightblue">
<!-- here we add our WFC object to perform the
insertAdjacentHTML()equivalent -->
<OBJECT classid="java:com.ms.wfc.html.DhModule"
height=0 width=0 ... VIEWASTEXT id=OBJECT1>
<PARAM NAME=__CODECLASS VALUE=Class1>
<PARAM NAME=CABBASE VALUE=wfchtml.CAB>
</OBJECT>
<center>
<p style="margin-top:30">
Brought to you by the Web Men</p>
</center>
</div>

The OBJECT tag is inserting the WFC object that we create, producing the same effect that our plain HTML page did. We have included the main Java function below with comments, and have also included a working sample that you can download and run to see how things work.

The new Java object is created using WFC and the WFC HTML package. In fact, we are able to create the Java object two different ways. We've used Conditional Compilation to switch back and forth between our examples. Example one, HTMLPERSON, is more for the fluent HTML person. We use the DhRawHTML class to create the actual HTML text we want to insert, and then insert that text into the <DIV> by using the DhForm classes.

Example two, MOREABSTRACT, is a little more abstract -- and for the programmers' mentality. Here, we use the DhImage class and actually create a new image, defining the size, position, and location of the object. Using the DhForm class again, we can insert the image into the <DIV> -- but at no time do we create the HTML text, as we did in example one.

Either way, the result is the same as the basic HTML above, but is accomplished using Java.

#define HTMLPERSON
#undef MOREABSTRACT

DhForm divAddition;
#if HTMLPERSON
DhRawHTML newImage;
#elif MOREABSTRACT
DhImage newImage;
#endif

protected void onDocumentLoad(Object sender, Event e)
{
#if HTMLPERSON
// HTML text to be added to our <DIV> tag
String str = "<img src=webmen.gif
       width=79 height=79
       style='position:relative; top:20;left:25'>";

// create the raw HTML to be added
newImage = new DhRawHTML();
newImage.setHTML (str);
#elif MOREABSTRACT
// create a new bitmap file to display
newImage = new DhImage();
newImage.setURL("webmen-a.gif");

// set size, position and location
newImage.setSize(79,79);
newImage.setPosRelative();
newImage.setLocation(25,20);
// we now have the equivalent of our raw HTML
// from the code above
#endif

// find the element we are looking for and cast
//the element to DhForm
// casting it allows us to use it as a DIV element
divAddition = (DhForm) findElement("mydiv");

// WFC's equivalent to insertAdjacentHTML() method
divAddition.add(newImage,null,
DhInsertOptions.BEGINNING);
}

sample Download sample. (zipped, 18K)

To find out more on the Java packages and WFC, refer to the Visual J++ Documentation in the Microsoft Developer Network Library Online. Now, if you want to use your favorite Java development environment, the WFC classes are also available in the latest Microsoft Virtual MachineNon-MSDN Online link.

TopBack to top

Now playing on the big screen

Dear Web Men:

I'm presently working on an Internet application for the U.S. Federal Aviation Administration's field safety inspectors, and have been able to restrict usage to Internet Explorer 4.0. However, one issue that has been raised again and again is would we be able to dynamically hide the user's taskbar or force the browser to go to full screen mode using either JavaScript or VBScript. Any help you could give would be EXTREMELY appreciated!

Shawn Evans

The Web Men reply:

So your application is ready for the big screen? Maybe it had humble beginnings as a stand-alone Win32 application, but now has garnered that special star quality that can be experienced completely only in full-screen Internet Explorer? Okay, we'll cut to the chase.

From script within a page, you can open up a new full-screen browser window, using the open method of the window object. One of the parameters that you can pass in is fullscreen=yes. This mode hides the browser's title bar and menus. The script to do this would look similar to the following: 

window.open "http://example.microsoft.com", "",
"fullscreen=yes"

This opens up a new, full-screen browser window in addition to the current one where the script runs. You can either leave the original browser window open, and have the user manually close it after closing the full-screen window, or you can close the original window by calling window.close after calling window.open.

But when you try to close the window this way, Internet Explorer will display a dialog box warning that script is trying to close the window. This is a good thing from a security perspective, but could be a little distracting to the user of your application.

One thing to keep in mind is that when you remove all of Internet Explorer's toolbars and menus by opening a window in full-screen mode, you need to have a clear way for the user to close the window (your application). You should probably include a button to close the window, or include a note that reminds the user they can close the window by pressing ALT+F4 on the keyboard.

Another approach to getting the behavior that you want is to just start your application using the kiosk mode of Internet Explorer, rather than using script. To start Internet Explorer in kiosk (full-screen) mode, you include the -k command line option when starting IEXPLORE.EXE, such as the following: 

iexplore -k example.microsoft.com

For more information, see Microsoft Knowledge Base article Q154780, How to Use Kiosk Mode in Microsoft Internet Explorer.

TopBack to top

 

This Month's Hot-Button Issue: A First Aid kit to Cure '80004005' Database-Related Errors

Everything is fine. Everything is normal. But suddenly something happens. Lo and behold, on the screen appears a message whose meaning only a fortunate few can comprehend -- but whose effect all can feel. The browser that was so full of life before is now lifeless. The '80004005 error' has struck again.

Yes, the '80004005 error' is one of the most common enemies of our Web applications. Unlike most of the other errors, the '80004005 error' has many forms, each form identified by the error message that gets displayed on the screen when it strikes. But even though the error is common, it is not lethal. So most of the times when this error strikes, our Web application does not need a surgeon, but a simple First Aid kit.

Let us go ahead and build a First Aid kit for our Web application, so that the next time the '80004005 error' strikes, we will be better prepared. Since we know that our enemy has different forms we should be sure that our First Aid kit is effective against any form it may take. The First Aid kit consists of nothing more than a couple of quick check sheets, with handy references to critical KB articles.

Quick Check Sheet: Configuration
Quick Check Sheet: Programming

Have fun with your '80004005 error' First Aid kit!

 

Jeff Brown, when not forcing family and friends to listen to Zydeco and country blues music, manages the development of viewer and authoring tools for the Microsoft Mastering Series.

Rafael M. Muñoz is a part-time Adonis, and full-time support engineer for Microsoft Technical Support. He takes it very, very personally every time you flame Microsoft.

Thyagi Lakshmanan is a member of the Active Server Pages Escalation Team at Microsoft Developer Support. He drinks coffee only in a Microsoft cup and hence his wife calls him a Microsoft fanatic!

The Web Men in short

November 4, 1998

Q: Eric Cone wants to find out about properties and attributes of DHTML tags.

A: See the DHTML reference information in the Web Workshop.

Q: Gustavo Badauy wants to include a copyright message that stays in the same location when the user scrolls the page.

A: See Screen Positioning and Be More Dynamic.

Q: Frank Helgesen wants to set page breaks in the printed output of his HTML page.

A: Some incorrect information was posted on this subject; check the Microsoft Knowledge Base article Q180856, DOC: Page Break Styles Supported Only with Block ElementsNon-MSDN Online link for the correct solution.

Q: Lakshmi wants books about DHTML and sample code in VBScript.

A: Check out Web Workshop Recommended ReadingNon-MS link at the MSDN Online Bookstore, and the Microsoft Scripting Technologies site.

Q: Andrzej Partyka wants to query a SQL database with input received from a textbox.

A: Set the value of the INPUT type=text Element to a variable in your ASP file:

myresult =
request.form("textboxname")

then use this variable in your SQL statement:

"SELECT * FROM table WHERE
field= '" & myresult & "'"

Q: Scott Barber asks how to use script to detect the default font the user has selected in the browser.

A: There isn't a direct way to do this. Instead, specify fonts for your content using Cascading Style Sheets.

Q: How do I get ActiveX controls to work in Netscape Navigator?

A: Ncompass Labs IncNon-MS link creates an ActiveX Plug-in for Netscape Navigtor.

Q: Ben asks how to detect browser and Java Virtual Machine versions.

A: See More Sniffing for Browsers, Java Virtual Machines, and Operating Systems.

The Web Men's Greatest Hits

List of Web Men Topics


Back to topBack to top

Did you find this article useful? Gripes? Compliments? Suggestions for other articles? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.