This article explores various settings and methods to allow the DevExpress ASPxMenu dropdown submenus to render over the top of an embedded PDF object.
I created a page on my website eagleware.net that contains a simple control you can view with various browsers and test an ASPxMenu's dropdown submenu over a PDF with various settings and with the PDF embedded into the page as an <iframe>, <embed>, <object> or as a Google Docs object. The video at the end of this article shows how to use this control.
Below is my current test results as of 11/13/2011:
ASPxMenu Display Sub-Menus over a PDF File
Saturday, July 25, 2010 - It’s a recurring problem trying to display anything over an embedded PDF file. PDF’s by default are rendered on top of everything else on the screen and different browsers, operating systems, 3rd party programming controls, etc all interact differently with varying results in attempting to render a page element over a PDF.
Recently to this date, Adobe Acrobat and/or Firefox (v 3.6.6, 3.6.7, 3.6.8) have had updates that caused difficult problems (Firefox especially) in achieving the rendering of a page element over a PDF.
This Example shows how the ASPxMenu used 3 different ways displays sub-menus over a PDF depending on which browser is viewing the page.
Wednesday, Oct 3, 2011 – Updated for current generation of browsers and DevExpress v11.1.7
| Browser | PDF Inserted With | ASPxMenu Display over PDF Settings 1 | ASPxMenu Display over PDF Settings 2 | ASPxMenu Display over PDF Settings 3 |
| IE 7, 8, 9 | I Frame | NO | YES | YES |
| | Embed | NO | YES | YES |
| | Object | NO | YES | YES |
| | GoogleDocs | N/A | N/A | N/A |
| | | |||
| Chrome 5 | I Frame | NO | NO | NO |
| | Embed | NO | YES | YES |
| | Object | NO | YES | YES |
| | GoogleDocs | YES | YES | YES |
| | | |||
| Chrome | I Frame | YES | YES | YES |
| v12.0.742 | Embed | YES | YES | YES |
| | Object | YES | YES | YES |
| | GoogleDocs | YES | YES | YES |
| | | |||
| Firefox 3.6.6, 3.6.7, | I Frame | NO | NO | YES |
| 3.6.8, 5.0, 7.01 | Embed | NO | NO | YES |
| | Object | NO | NO | YES |
| | GoogleDocs | YES | YES | YES |
| | ||||
| Opera 10.6 | I Frame | NO | NO | NO |
| | Embed | NO | NO | NO |
| | Object | NO | NO | NO |
| | GoogleDocs | YES | YES | YES |
| | | |||
| Opera 11.5 | I Frame | YES | YES | YES |
| | Embed | YES | YES | YES |
| | Object | YES | YES | YES |
| | GoogleDocs | YES | YES | YES |
| Safari 5 | I Frame | NO | NO | NO |
| | Embed | NO | NO | NO |
| | Object | NO | NO | NO |
| | GoogleDocs | YES | YES | YES |
| | |
ASPxMenu Settings 1: Normal default settings.
ASPxMenu Settings 2: RenderIFrameForPopupElements="True"
ASPxMenu Settings 3: RenderIFrameForPopupElements="True", RenderMode=”Lightweight”
PDF Insert Code:
- Iframe: <iframe src="pdfFilename" width="100%" height="1210" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"></iframe>
- Embed: <embed src="pdfFilename" width="100%" height="1210" parem="name" value="opaque"></embed>
- Object (w/menus): <object data="pdfFilename" type="application/pdf" width="100%" height="1210"></object>
- Object (w/out menus): <object data="pdfFilename#toolbar=0&navpanes=0" type="application/pdf" width="100%" height="1210"></object>
- GoogleDocs: <iframe id="if_google" runat="server" src= "http://docs.google.com/gview?url=pdfFilename&embedded=true" width="100%" height="1210" scrolling="no" marginheight="0" marginwidth="0" frameborder="0">
Note about using Google Docs to display your PDF: The PDF must reside on the web already. Code is erratic in IE causing script errors and timeouts. In the developer environment if the <iframe> src is set it will generate script errors if compiling with IE as your browser. Check on page load for browser type and set the <iframe> src if NOT “IE”. Using Google Docs to display PDF’s works in all other major browsers.
Looking at the chart you might think Google Docs is an easy way to go however it is not compatible with Internet Explorer with default settings. Since about 80% of your users are using IE and the fact that 95% of them will not know how to reset their IE browsers security settings to display a Google Document I don’t recommend it. Also a Google Docs PDF may be of a lower resolution and may not be acceptable to your requirements. I suggest checking for browser type on page load and displaying the PDF as an <iframe> for IE, Chrome, Opera & Firefox (with the ASPxMenu set using Settings 3) and using Google Docs for Safari.
Using the ASPxMenu setting of RenderMode=”Lightweight” may cause you some initial programming setup headaches depending on your menu display settings. The “Lightweight” mode renders the menu in a different way (no tables) which also is probably the reason it may display over a PDF. Some of the menu properties in the designer are ignored and have no effect but can usually be set by the menu CSS if you can find it. A few settings such as the SubMenuItem Width command apparently have no effect at all. To center a less than page width menu on the page I had to place the menu in a table which was in a div. Trying to find which DevX CSS setting that compares to it’s corresponding designer setting is a problem. For many menus however it is not a problem if you are using a default theme.
Conclusions:
- Safari cannot display a ASPxMenu submenu over a PDF unless the PDF is loaded as a Google Docs object.
- Firefox cannot display a ASPxMenu submenu over a PDF unless the ASPxMenu is set to RenderMode=”Lightweight”
- IE, Chrome & Opera (recent versions) will display an ASPxMenu submenu over a PDF with the ASPxMenu set to RenderIFrameForPopupElements="True"
I currently check for the users browser type and load the PDF into the page in different ways depending on the viewing browsers type and version like this:
VB Code-behind
Private Sub SomeRoutine()
'// determine if pdf should be shown in an iframe, object or google docs
Dim browserinfo() As String = GetBrowserName()
Dim pdfType As String = ""
Select Case browserinfo(0)
Case "Internet Explorer"
pdfType = "iframe"
Case "Firefox", "Safari"
pdfType = "google"
Case "Chrome"
pdfType = If(Val(browserinfo(1)) >= 12, "iframe", "object")
Case "Opera"
pdfType = If(Val(browserinfo(1)) >= 11.5, "iframe", "google")
Case Else
pdfType = "google"
End Select
Dim samplePDF_filename As String = ""
Dim pdfObject As New Literal
Select Case pdfType
Case "iframe"
pdfObject.Text = "<iframe src=""" & samplePDF_filename & """ width=""100%"" height=""910"" scrolling=""no"" marginheight=""0"" marginwidth=""0"" frameborder=""0""></iframe>"
Case "object"
pdfObject.Text = "<object data=" & samplePDF_filename & "#toolbar=0&navpanes=0"" type=""application/pdf"" width=""100%"" height=""905""></object>"
Case "google"
pdfObject.Text = "<iframe src=""http://docs.google.com/gview?url=" & samplePDF_filename & "&embedded=true"" width=""100%"" height=""940"" scrolling=""no"" marginheight=""0"" marginwidth=""0"" frameborder=""0""></iframe>"
End Select
PlaceHolder1.Controls.Add(pdfObject)
End Sub
Public Function GetBrowserName() As String()
Dim browserinfo(1) As String
Dim userAgent As String = Request.UserAgent
If userAgent.Contains("MSIE 5.0") Then
browserinfo(0) = "Internet Explorer" : browserinfo(1) = "5.0" : Return browserinfo
ElseIf userAgent.Contains("MSIE 6.0") Then
browserinfo(0) = "Internet Explorer" : browserinfo(1) = "6.0" : Return browserinfo
ElseIf userAgent.Contains("MSIE 7.0") Then
browserinfo(0) = "Internet Explorer" : browserinfo(1) = "7.0" : Return browserinfo
ElseIf userAgent.Contains("MSIE 8.0") Then
browserinfo(0) = "Internet Explorer" : browserinfo(1) = "8.0" : Return browserinfo
ElseIf userAgent.Contains("MSIE 9.0") Then
browserinfo(0) = "Internet Explorer" : browserinfo(1) = "9.0" : Return browserinfo
ElseIf userAgent.Contains("Firefox") Then
Dim agentPart As String = userAgent.Substring(userAgent.IndexOf("Firefox/"))
browserinfo(0) = "Firefox" : browserinfo(1) = Mid(agentPart, 9) : Return browserinfo
ElseIf userAgent.Contains("Opera") Then
Dim agentPart As String = userAgent.Substring(userAgent.IndexOf("Version/"))
browserinfo(0) = "Opera" : browserinfo(1) = Mid(agentPart, 9) : Return browserinfo
ElseIf userAgent.Contains("Chrome") Then
Dim agentPart As String = userAgent.Substring(userAgent.IndexOf("Chrome/"))
agentPart = Mid(agentPart, 8)
Dim i As Integer
i = InStr(agentPart, " ")
agentPart = Left(agentPart, i - 1)
browserinfo(0) = "Chrome" : browserinfo(1) = agentPart : Return browserinfo
ElseIf userAgent.Contains("Safari") Then
Dim agentPart As String = userAgent.Substring(userAgent.IndexOf("Version/"))
agentPart = Mid(agentPart, 9)
Dim i As Integer
i = InStr(agentPart, " ")
agentPart = Left(agentPart, i - 1)
browserinfo(0) = "Safari" : browserinfo(1) = agentPart : Return browserinfo
ElseIf userAgent.Contains("Konqueror") Then
Dim agentPart As String = userAgent.Substring(userAgent.IndexOf("Konqueror/"))
agentPart = Mid(agentPart, 11)
Dim i As Integer
i = InStr(agentPart, ";")
agentPart = Left(agentPart, i - 1)
browserinfo(0) = "Konqueror" : browserinfo(1) = agentPart : Return browserinfo
ElseIf userAgent.ToLower.Contains("bot") Or userAgent.ToLower.Contains("search") Then
browserinfo(0) = "Search Bot" : browserinfo(1) = "" : Return browserinfo
End If
browserinfo(0) = "Unknown Browser or Bot" : browserinfo(1) = "" : Return browserinfo
End Function
0 comments:
Post a Comment