Overlay div tag with "Teechart" object tag

TeeChart for ActiveX, COM and ASP
Post Reply
Otokon
Newbie
Newbie
Posts: 25
Joined: Thu Sep 18, 2008 12:00 am

Overlay div tag with "Teechart" object tag

Post by Otokon » Thu Sep 29, 2011 6:57 am

Hi,

Hi have the following issue that I hope somebody could help me in the right direction.
I have a page with an embedded teechart activeX object with a sliding div menu that pops-out from the left. When the menu slides out from the left it goes under the object and I would like it to stay on top. Have anybody had this type of issue before with a possible workaround?
Here is an example of the sliding div menu I’m using:
http://www.building58.com/examples/tabSlideOut.html

Regards

Marc
Site Admin
Site Admin
Posts: 1272
Joined: Thu Oct 16, 2003 4:00 am
Location: Girona
Contact:

Re: Overlay div tag with "Teechart" object tag

Post by Marc » Thu Sep 29, 2011 12:08 pm

Hello,

I don't think that can be achieved using this kind of JQuery object. A simple div test on a page confirms that.

For example. In the following test html page code text1 should display over text2 that should display over the TChart. The TChart remains on top. That is because the TChart ActiveX Control sits as a COM object on the page, not as an HTML object.

Code: Select all

<div id="text1" style="position:absolute;left:70;top:120;z-index=120">
    <table bgcolor="FFCCDD"><tr><td>1test text 1 test text1</td></tr></table>
</div>
<div id="text2" style="position:absolute;left:80;top:135;z-index=100">
  <table bgcolor="DDCCFF"><tr><td>2test text 2 test text2</td></tr></table>
</div>
<div id="tchart1" style="position:absolute;left:100;top:100;z-index=80"><object 
   id="Chart1" 
   width="400" 
   height="268" 
   type="application/x-oleobject" 
   hspace="0"
   vspace="0" 
   classid="CLSID:FCB4B50A-E3F1-4174-BD18-54C3B3287258" >
</object></div>
If you wish to plot a box or text or both over the chart then you can use TeeChart's own Canvas methods (see tutorials) but I don't think that's going to give you what you require. Alternatively, you could hide the Chart at the moment that you start moving menus out:

Example:

Code: Select all

<div id="tchart1" style="position:absolute;left:100;top:100;z-index=80;visibility:hidden"><object id="Chart1" ...etc..... </object></div>
By javascript:

Code: Select all

function hideChart()
{
  if (document.getElementById("tchart1")!=null){ 
    alert("here");
    var _chObj = document.getElementById("tchart1");
	_chObj.style.visibility = "hidden";
  }
}
Thus Chart visibility could be toggled at the showing/hiding of the menu.

Regards,
Marc Meumann
Steema Support

Post Reply