 | ||
|
| ||
| ||
|
| ||
Jeff Brown
Rafael M. Muñoz
Microsoft Corporation
December 7, 1998
The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices) "Web Men Talking" column.
Contents
Klickity klak, now
hear this - Playing sounds when depressing a button
Mocking menus - Creating custom context menus
They just
don't mix - Using zIndex on different objects
Getting published - Building an online publishing tool
The Gregorian calendar is fairly zipping to a close, and the answer guys have decided to do a little pre-Boxing Day boxing up of some miscellaneous questions. They've come up with queries on background sounds, custom menus, zIndex ordering, and building an online publishing tool. Call it extra-early spring cleaning, or call it what you will. The Web Men always like to be ahead of the game.
Dear Web Men:
I have been using the pop-up
image DHTML script from Dynamic Drive 
that gives me the effect
of having an image that serves as a button when
depressed. But I can't seem to find any script
that allows me to include a clicking sound to the button
to give the click sound when the button is depressed.
Can you help?
Craig Ikerd
The Web Men reply:
Craig, we must thank you for the hidden tip; our first stop for DHTML and other Internet technologies is always the Site Builder Network, but we must say we found Dynamic Drive an interesting site to swing through. We took a look at the pop-up image DHTML script you referred to -- and with some magic of our own, we can put together exactly what you want!
First, you need a slick way to play a sound. We have this wonderful object, <BGSOUND>, which allows us to create background sounds. If we set the ID attribute of this object and placed it in the <HEAD> tag of our HTML page, we would have:
<BGSOUND id=snd1>
Now, that little bit of magic comes in our simple, yet soon to be powerful, script:
<script Language="JScript">
<!--
function playSnd(sndName)
{
snd1.src = sndName;
}
-->
</script>
As you can see, all we do in playSnd() is set the SRC attribute of the <BGSOUND> object causing the background sound to play immediately. You can also see that we've kept our function generic, so we can pass any sound we want. A quick call to our function, and we have sound:
<INPUT id=button1 name=button1 type=button value=Button onmousedown="playSnd(myfavorite.wav')">
In the case of the pop-up image DHTML script you got from Dynamic Drive, simply put the function call "playSnd('myfavorite.wav')" in the updownshadow() function where you are checking the onmousedown event.
Dear Web Men:
I have a question concerning the browser context menu. I am using Internet Explorer 4.1 and attempting to create a mock pop-up menu. I've used Cascading Style Sheets (CSS) to create the look and feel of the menus, but now I am running into the problem of the context menu popping up every time an element is right-clicked. If I hit escape to clear the menu, my mock menu is there. I've tried to use event.cancelBubble to prevent it (but it appears that cancelbubble cancels the event only for elements in the document ... not the browser ... am I wrong in this?), and I have also tried to return false from the onmouseup event, but that didn't seem to work either. Here is a snippet of code for both methods:
Cancel Bubble:
Back to top
<div ID=ProductWants onmouseup=
"if (window.event.button == 2)
{myMENU(1,1, window.event.x,
window.event.y);window.event.cancelBubble=true;}">
Return False:
<div ID=ProductWants onmouseup=
"if (window.event.button == 2)
{myMENU(1,1, window.event.x, window.event.y)
;return false;}">
myMENU just moves the menu to the X,Y coordinates and sets some display options.
As I said, everything works great except for the context menu popping up.
Any help would be greatly appreciated!!
Thanks,
Michael A. Stoner
The WebMen reply:
It sounds like Internet Explorer's default context menus are making a mockery of your mock menu. Unfortunately, there's really no way to prevent Internet Explorer 4.x from displaying its standard context menus -- at least not through script.
You can add items to the standard menus by setting values in the Windows Registry. But you will need to do this for the Internet Explorer installation of every user that accesses your Web pages. You can find out more about this in Microsoft Knowledge Base article Q177241, HOWTO: Adding to the Standard Context Menus of the WebBrowser 
. Or, if you want to get really down and dirty, and have complete control over the context menus, toolbars, and other parts of the browser's user interface, you can create an application that hosts the MSHTML component (Caution: Not for the faint of heart).
Thankfully in Internet Explorer 5, it is incredibly simple to create custom context menus using script. You can also prevent the standard ones from being displayed. This is possible by handling the new oncontextmenu event, and returning false to indicate that the default action for the event should not performed:
<BODY oncontextmenu="showMenu(); return false">
The oncontextmenu event bubbles up from the source element to its parent elements if the event is not handled. In the previous code, the event is being handled for the <BODY> element, so a custom context menu will be displayed no matter where in the entire document the user right-clicks the mouse.
Michael Wallent described creating custom context menus in a previous DHTML Dude column. If you have Internet Explorer 5 installed, you can try out his sample. Have fun.
Dear WebMen:
I have noticed a weird situation with zIndex: It doesn't work if I want to toggle between a text area and an ActiveX control, such as the tree view control.
Do you have any idea if there is any solution for this problem?
Gerlinde Hulin
The Web Men reply:
Gerlinde, you can think of your problem as if you were playing with oil and water -- and unfortunately, the two just don't mix.
The problem you are experiencing has to do with the fact that you are playing in two different playing fields, a window plane and an HTML plane. The zIndex property works fine with the ActiveX® controls in the window plane, because each control is contained in its own window and the objects can be positioned by ordering their individual windows.
On the other hand, when we discuss a <DIV> area in the HTML plane, we are talking about objects in the same window or HTML plane. Moving these objects around within their plane works fine -- but when we try to mix these objects with ActiveX controls that are contained in their own windows, things just don't mix well together.
You need to create windowless ActiveX controls to have everyone work better in the z-order of our 2-D HTML layout. To begin researching windowless controls, refer to Building ActiveX Controls for Internet Explorer 4.0.
Dear Web Men:
Firstly let me simply say "Great Column!"
I'm building an online publishing tool using Active Server Pages (ASP) technology/Internet Information Server (IIS)/SQL Server. The pages are built using text areas where users can cut and paste their text; this is then dropped into the database and pulled out by the front-end pages. The question I have has been raised by one of the users of the publishing tool: They can put HTML into the text areas if they wish, but this is only really for those with an understanding of HTML. What they would like to be able to do is just, for example, bold some of the words in the text area box. Is it possible to highlight a word(s) in the text area and click a button (that runs the relevent script) that would insert the bold tag before the selection and insert the close bold tag after the selection?
Cheers
Jason Walker
The Web Men reply:
Thanks for the compliment Jason. We do aim to please.
We touched on your topic in our Making a <B>Statement</B> answer earlier this year. We don't know if you need to support people using browsers other than Internet Explorer. If so, you could implement things using a marker type of system, as we described. You may also be able to insert the formatting tags by writing script using the Document Object Model in the browser. We gave some suggestions for how to do this using Internet Explorer's DOM.
Another option that has become available since our previous answer is to incorporate the Microsoft Dynamic HTML (DHTML) Editing Component into your publishing tool. The DHTML Editing Component can be inserted into a Web page as an ActiveX control, and provides WYSIWYG (What You See Is What You Get) HTML editing functionality, among other things. It is an extremely powerful and useful component that exposes properties, methods, and events for scripting on a Web page. Go download the DHTML Editing Component SDK, and check out the samples included with it.
Jeff Brown, when not forcing family and friends to listen to Zydeco and country blues music, manages the development of the 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.
December 7, 1998
Q: Igloria wants to learn about the Microsoft Agent.
A: See the MSDN Library and
the book Developing For Microsoft Agent:
Microsoft ActiveX Technology for Interactive
Animated Characters .
Q: Martin Suchý asks how to include double quotes within a text string using VBScript.
A: Use the Chr function with 34 as the character code. Concatenate this with the rest of the string using the & operator:
strTemp = Chr(34) & "quote me" & Chr(34)
Q: Doug St. Clair wants more information on printing documents from Internet Explorer.
A: Refer to Scripting Support for Web Page Printing.
Q: Hien Luu asks if DHTML scriptlets are being replaced by DHTML behaviors in Internet Explorer 5.
A: Yes. Internet Explorer 5 features DHTML behaviors using HTML Components (HTC). See Implementing DHTML Behaviors in Script.
Q: David Aiken wants to know if there are plans to support the XLL draft.
A: There are no plans to support XML-Link (XLL) so early in the
standardization process. Using Extensible Stylesheet Language or the Document Object Model can achieve similar results.
Q: Martin Corriveau asks if a selection box and combo box are available in HTML supported by Internet Explorer.
A: Yes, use the SELECT element. Set the SIZE attribute to the number of entries in the list for a list box (selection box). For a drop-down list (combo box), set SIZE=1.
Q: Martin Corriveau also wants documentation for HTML controls and ActiveX control methods, properties, and events.
A: See the DHTML, HTML & CSS section of the Web Workshop. Get ActiveX control documentation from the control's provider.
Q: The Viverettes want to change link color during the mouseover event.
A: Use the hover pseudo-class to set the style of the A object.