Click here to Skip to main content
Click here to Skip to main content

A workaround to overlap an ActiveX with an HTML element

, 10 Nov 2005
Rate this:
Please Sign up or sign in to vote.
This workaround allows you to show HTML elements on top of ActiveX elements (an tag).

Sample Image - OverlapActiveX.jpg

Introduction

Every HTML writer knows a problem with overlapping dropdown lists (<SELECT> tag) and ActiveX-s. Any effort to bring a DIV or any HTML element on top of an ActiveX has no effect. An ActiveX stays always on top even if it has higher z-index than an HTML element. The reason is the way the Explorer renders its content. See http://support.microsoft.com/default.aspx?scid=kb;en-us;177378.

There are two types of controls: Windowed and Windowless elements, and they are rendered on separate planes. All windowed elements paint themselves on top of all windowless elements, despite the wishes of their container. However, windowed elements do follow the z-index attribute with respect to each other, just as windowless elements follow the z-index attribute with respect to each other.

All windowless elements are rendered on the same MSHTML plane, and windowed elements draw on a separate MSHTML plane. You can use z-index to manipulate elements on the same plane, but not mix and match with elements in different planes. You can rearrange the z-indexing of the elements on each plane, but the windowed plane always draws on the top of the windowless plane.

The <OBJECT> tag is, in most cases, windowed. That is why it always stays on top.

The Workaround

My workaround is as simple as stupid. When you want to show an HTML element (a <DIV>, for instance) above an ActiveX, you create a screenshot of an ActiveX, save it to a temporary folder, and replace the ActiveX with this image. Finally, you revert these changes, hide the image, and show the ActiveX.

Implementation

I use capture routines from the Microsoft article How To Capture and Print the Screen, a Form, or Any Window (http://support.microsoft.com/default.aspx?scid=kb;en-us;Q161299). And then I save it to file using a memory stream. All this is implemented in VB6, but it can be easily ported to C++ because most of the functionality is in the Windows API calls. A public function GetImageFileName() of an ActiveX is responsible for creating of a screenshot and returns the full name of the created file.

JavaScript bound to the checkbox operates the replacement procedure.

Installation and Demo

In the Zip file, you will find the following:

  • VB6 project of an ActiveX: OverlapDemoControl.vbp.
  • Compiled ActiveX: OverlapDemoControl.ocx.
  • HTML containing the <OBJECT> tag, the <DIV> tag, and the appropriate JavaScript: OverlapActiveX.htm.

To run the example from Visual Basic, you need just to open and compile the project. Otherwise you can just register OverlapDemoControl.ocx using regsvr32. To test, just click on the CheckBox.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

George Mamaladze
Software Developer
Germany Germany
Tweeter: @gmamaladze
Google+: gmamaladze
Blog: gmamaladze.wordpress.com
Follow on   Twitter

Comments and Discussions

 
GeneralA COM grid control that wont render. Pinmemberbgriffin_tpa26-Jul-07 4:29 
GeneralJust wondering about iFrame Pinmembereug_acc (Eugene Akimov)11-Nov-05 14:10 
AnswerRe: Just wondering about iFrame PinmemberGeorge Mamaladze14-Nov-05 22:46 
Bugerror details PinmemberJUDERAJ20113-Jan-12 2:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 10 Nov 2005
Article Copyright 2005 by George Mamaladze
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid