I am facing an issue with my ASP.NET site where I have used an Ajax Control Toolkit Animation Extender to animate a div flying out, which contains a simple treeview.
Upon selecting a node in the treeview, a protected sub is triggered, setting the source of an IFRAME on the page to another aspx page:
Protected Sub TreeView1_SelectedNodeChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TreeView1.SelectedNodeChanged
if1.Attributes.Add("src", "Open.aspx")
if1.Style.Add("z-index", "-1")
if1.Style.Add("position", "absolute")
End Sub
In the open.aspx page, I am reading a PDF file into a byte stream:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Response.Clear()
Response.ContentType = "application/pdf"
Dim xByteStream(1) As Byte
Dim b = File.ReadAllBytes(Server.MapPath("reportFrameset.pdf"))
Response.BinaryWrite(b)
Response.End()
End Sub
The problem arises before the iframe loads the PDF, where the div appears on top of the iframe but then moves behind it once the pdf is opened.
I have tried various positioning and z-index adjustments without success:
<div style="position:absolute; top:50px; left:20px; z-index:-1; width:400px; height:300px;">
<iframe id="if1" name="if1" width="100%" height="50px" runat="server">
</iframe>
</div>
I am seeking assistance to ensure that the menu always appears on top of the iframe even when a PDF is loaded. If needed, you can access the website project in Visual Studio 2008 format via Dropbox: