In Your Interface
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.
Tom Moran
Rafael M. Muñoz
Microsoft Corporation
April 3, 2000
Contents
He shoots, he scores - Slam-dunk preloading
A metaphorical mix-up - XSL and DSOs
A matter of timing - Refreshing UI elements
Choose everything - A non-standard UI for SELECT?
The Web Men Talking Award - Dynamic Drive
The Web Men in Short
Flush with the excitement of April, and the blooms it brings to this neck of the woods, the Web Men are going straight for the UIwhat it looks like and how it works. Between preloading, refreshing, and multiple-item SELECT elements, they squeeze in some room for XSL-DSO mixed metaphors. (After all, April is U.S. National Poetry Month.) Finally, the answer guys wind up with an award for Dynamic Drive, which brims with UI possibilities.
He shoots, he scores
Dear Web Men:
Is it possible to preload all images on a Web site using DHTML or JavaScript?
For example, I would like to force all images to load into the cache when the first page is loaded, thereby allowing rollovers to be much smoother, and to allow other pages within the Web site to load quicker.
Any info would be much appreciated.
Greg Warriner
The Web Men reply:
In honor of the NCAA Final Four, what we have here is a slam-dunk. As we drive to the basket for our power slam, we'll answer, "Yes you can preload images with the assistance of a little JavaScript".
You want to add your script to the <HEAD></HEAD> section of your HTML page, so that all the work will be done ahead of time. In your case, it's probably not going to be a problembut please note that if you are preloading too much, it may slow down the rendering of your page.
The code for the header will look something like this:
<SCRIPT LANGUAGE=javascript> var image1buf = new Image(); image1buf.src="image1.jpg"; var image2buf = new Image(); image2buf.src="image2.jpg"; </SCRIPT>
Then, in the body of your page, you can do one of two things:
- If you are using a single rollover, you can use inline scripting to call the appropriate onmouseover and onmouseout functions to swap the images.
- If you have an area, such as a menu, you can set up a <SPAN></SPAN> tag to define the area and functions for onmouseover and onmouseout for the area.
For example, the latter would look like the following:
<SPAN ONMOUSEOVER="mymouseover()" ONMOUSEOUT=""> <-- Set up your menu here --> </SPAN>
When looking for JavaScript information and samples, keep in mind the Microsoft Windows Script Technologies 
site and your favorite Search engine. Search engine? Sure. Simply type
"JavaScript," and you'll come up with a bunch of sites that are great references. Many of them have collections of written scripts ready for use, and others will actually generate the script you are looking for real-time.
With the power move to the cage, we finish this one off with a huge two-fisted slam.
A metaphorical mix-up
Dear Web Men:
I am a Web Programmer/Database enthusiast. I use ASP, IIS 5.0 and ADO 2.5 to create XML data sources directly from SQL Server, as seen on MSDN. With this data I can do two things, but not at the same time.
- XSL formatting of hierarchical data
I use expand_xsl.asp and popup_xsl.asp (XSL style sheets modified from the XmlSports sample) and an 8partviewer.asp to view the source and output of each page.
- DSO databinding
I am able to bind data to many different objects using a <xml id="xmlDSO"></xml> and the DATASRC="#xmlDSO" and DATAFLD functionality on an ASP page.
I cannot seem to combine the XSL and DSO technologies. Is there a way to use both at the same time, a hierarchical data source formatted with XSL and data bound?
Thanks,
Bart Wagner
The Web Men reply:
What you want to do is not directly possible, Bartbecause you are mixing metaphors a bit. ActiveX® Data Objects 2.5 allows you to save ADO recordsets directly to the Response object in XML format. Although the data interaction with the database is in XML format, the in-memory representation of the data on the client is an ADO recordset, not an XML document.
XSL operates on XML documents, not ADO recordsets. That is why you've had problems trying to apply the XSL templates to the XML data, which is actually an ADO recordset on the client.
One approach would be to use ASP to generate XML on the server from your ADO recordsets and then apply the output of the ASP as input to an XML data island. For example:
<XML ID="oMyADOXML" SRC="MyADOXML.asp"></XML>
Then the XSL templates could be applied to the in-memory XML document (oMyADOXML).
Piece of cake, eh? Below are a couple of additional references we've selected for you.
- Best Bet: "Binding the XML Data Source Object to Data"
- MSDN Online XML Tutorial Lesson 10
A matter of timing
Dear Web Men:
I've used a lot of client-side JavaScript to dynamically change things on the Web page. However, there's one problem I am not able to solve: When the function is executed in response to the onLoad event of the BODY object, which contains a number of style changes on a number of page objects, the screen is not refreshed until the function is completedand then all the changes are displayed at once. This behavior is the same in Internet Explorer 4.0 and Internet Explorer 5.
What method can be used to enforce the immediate display of object's style changes (such as font, visibility, and others) in this case?
Best regards,
Dejan Dincic
The Web Men reply:
Dejan, the issue here is that the script engine has control of the message pump while it's executing. To allow the UI to update, it's necessary to yield control of the message pump so that UI can respond to changes.
A simple technique is to break up the script into sections separated by calls to setTimeout(). Creating a callback using setTimeout() yields control of the message pump so that the UI can update. For example, if the original UI update code looked something like the following:
function onloadHandler()
{
// ... some init code
if (uiUpdate())
alert("Update succeeded");
else
alert("Update failed");
}
function uiUpdate()
{
// ... update some UI elements
}
then alternative code, which would allow the UI to be partially updated before all UI elements updates were completed, might look like the following example:
var const_iTimeout_UIRepaint = 10; // milliseconds
function uiUpdate_Part1()
{
// ... update some UI elements
// yield to allow resized UI repaint
window.setTimeout("uiUpdate_Part2()", const_iTimeout_UIRepaint);
}
function uiUpdate_Part2()
{
var bUpdateOk = false;
// ... update other UI elements
// set update success flag to reflect successful update
bUpdateOk = true;
// yield to allow resized UI repaint
window.setTimeout("uiUpdate_Completion(" + bUpdateOk + ")",
const_iTimeout_UIRepaint);
}
function uiUpdate_Completion(retVal)
{
if (retVal)
alert("Update succeeded");
else
alert("Update failed");
}
Note that using setTimeout() changes declarative codefor which a return value might have been used to indicate UI update succeed/failto an event-driven model, which requires additional code to handle succeed/fail conditions.
When using setTimeout(), you might consider creating a callback to a function such as uiUpdate_Completion() in the example above. The uiUpdate_Completion() parameter reflects the UI update succeed/fail status. Whatever code might otherwise have been executed upon return from the original declarative code is executed in uiUpdate_Completion instead. In both of the above examples, the completion code simply displays a succeeded/failed message.
Choose everything
Dear Web Men:
I want to use a multiple SELECT element in an HTML form, and I want it to behave in a certain way: When you click an item, I want the selection highlight to toggle (click once to select, click again to deselect).
Also, I don't like the way you have to choose multiple items; I'd prefer to be able to select multiple items by simply clicking them (without using the CTRL or SHIFT keys).
I'm catering for Internet Explorer 5 only, so if there's a neat way to do it for this browser, I'd appreciate any advice.
Adam Young
The Web Men reply:
Adam, we're glad you asked this question. To at least partially answer your question, the DHTML <SELECT> element functions in the same manner as a standard list box that you might implement in the Windows operating system using the Win32 API. Multiple-item selection occurs using the CTRL and SHIFT keys in the same manner as with standard list boxes.
To implement a list box with the custom functionality you have described, you could use a scrollable <DIV> element. As we found out, there are certainly some challenges with that approach, including:
- Managing scrolling so that lines scroll in integral boundaries (for example, the scrolled list appears with items fully showing and not partially scrolled out of the visible region of the <DIV> element)
- Handling mouse clicks/double-clicks for item selection
- Handling keyboard navigation through the list
- Displaying selection state (highlighted/normal)
- Handling keyboard selection of list items
Without going into the pages of source code, you'll want to look at srcElement, which is a property of the event object, which is in turn part of the window object. Full documentation of these objects and properties can be found in—yes, you guessed it—MSDN Online.
The Web Men Talking Award
The Web Men Talking Award this month goes to Dynamic Drive 
. This is an excellent reference site, chock full of great features, and an essential favorite site for anyone doing DHTML coding.
The authors have put together an effective, cleanly designed site. It starts by offering five selections, so you can quickly see what's new, see what's hot, access to the FAQ, and submit DHTML scripts. We're not sure about that bright lime-green down the side, but we suppose that is more personal preference than anything. After all, we're dealing with content here, not color coordination.
The site covers both Microsoft Internet Explorer and Netscape browsers, and they have a good selection of cross-browser scripts that can be added to your own code. They identify each script as being applicable to All browsers, just NS, or just IE. We especially enjoyed the DHTML games and special effects. (We told our editor that our column was late due to a sickness.)
Dynamic Drive has a free newsletter, and even some online wizards that will help you generate code for things, such as drop-down menus. We liked the site, and added it to our Favorites. We think you probably will, too.
The Web Men in Short
Q: Coop wants to put a database-enabled form on his Web page.
A: Use FrontPage 2000 and Microsoft Access. See KB article Q240090 "How to Update Information in a Microsoft Access Database Using FrontPage 2000 and ASP"
Q: Matt wants to know why we chose onblur instead of onkeyup in A one, and a two, and a three .... If you use onkeyup, the count box gets updated for every keystroke; you don't have to wait until the TEXTAREA has lost focus.
A: Appearances aside, we don't actually know everything.
Q: Kassim Kasmani wants to put up a survey on his site.
A: The survey we did last November was completely handled by NetReflector .
Q: Jennifer Mandeville wants to send mail from ASP after a user submits information on her form.
A: Refer to the archived answer Gonna write you a letter.
Q: Carl wants to prevent the "Do you want to disconnect?" dialog box when using Internet Explorer.
A: Refer to the Microsoft KB article Q193555 "No Disconnect Prompt When Quitting Internet Explorer."
Q: Alex Calvo wants to to use XSL to generate HTML that uses the   code for a non-breaking space.
A: Our research shows that you could use one of the following:
- Place this at the top of your style sheet:
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
(This creates a new entity in the XSL document, so that the XSL engine recognizes . Be aware that is not a default entity in XML as it is in HTML.)
- Or replace with   throughout the style sheet.
Rafael M. Muñoz, when not playing or coaching his favorite pastime (volleyball), provides technical assistance as a full-time developer support engineer for Microsoft Developer Support.
Thomas Moran, when not struggling to maintain some semblance of sanity (working with Rafael certainly doesn't help), toils with a prodigious team that creates articles and other content from Microsoft's Developer Support.