Page 1 of 1

Overlay div tag with "Teechart" object tag

Posted: Thu Sep 29, 2011 6:57 am
by 15050347
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

Re: Overlay div tag with "Teechart" object tag

Posted: Thu Sep 29, 2011 12:08 pm
by Marc
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