Open in new window

Social Icons

Sunday, November 13, 2011

Dynamically resize an iframe height according to its contents (same domain)

The following is from a demonstration page on my website www.eagleware.net that has several examples and code on how to dynamically resize an iframe.

 

There are many programming situations that require the use of iframes for one reason or another. Iframes require you to specify a fixed height or they default to a height of around 50px. If the content of a iframe is greater or lesser than the height you declare when calling the iframe your iframe depending on the parameters used when declaring it will either have a vertical scrollbar, truncated content or dead empty space.

 

For many programming situations this is not a problem and you can configure the iframe to display your content adequately, but when your iframe contains dynamic content that changes depending on user interaction or frequent code changes you might need a dynamically sized iframe that can automatically change it’s height as required.

 

This tutorial uses two javascript routines, BrowserDetect from http://www.quirksmode.org/js/detect.html and resizeIframe.js from many sources that I pieced together to create a simple way to resize an iframe automatically or as needed.

 

This javascript resizing routine works for me in html, aspx, aspx ajax and has been tested in IE 9, Firefox 5, Opera 11.5, Chrome 14 and Safari 5 and should work without modification although you can customize it to fit most any browser easily.

 

Additionally this routine will let you call nested dynamically resizable iframes; ie: parent-childiframe-childiframe or use it in other 3rd party controls like Devexpress’s ASPxGridview, ASPxPagecontrol (these pages), etc.

 

Note: This routine will not resize an iframe that has a PDF as a source file and also the iframe src MUST be on the same domain.

 

Dynamically resize an iframe height according to its contents (same domain)
read more

DevExpress ASPxPopupControl - Dynamically Resizing the ASPxPopupControl

I created a page on my website eagleware.net that contains examples on how to dynamically resize an ASPxPopupControl.

This samples area deals with the peculiarities of resizing the ASPxPopupControl; in particular:

  • The ASPxPopupControl Width & Height properties do not have any affect on HTML or CSS content placed within the ASPxPopupControl ContentCollection. The controls width & height properties do work when you use the ContentUrl property to load the ASPxPopupControl with content or use an Iframe in the ASPxPopupControl ContentCollection, both of which will allow you to resize the ASPxPopupControl and its content if the AllowResize="true" is specified.
  • If however you place content directly into the ASPxPopupControl you are not so lucky. In this situation the controls Width & Height are in effect ignored by the ASPxPopupControl and it uses whatever CSS formatting is specified for the content to determine the ASPxPopupControl's size. Two exceptions to this (that I know of) are: if your content is wrapped in a div element set with a style width: 100% then the ASPxPopupControl Width property will work allowing the popup to be resized horizontally but leaving white space at the bottom depending on content and size of the popup; if the ASPxPopupControl Height is set higher than your div's content then the ASPxPopupControl uses it's Height property resulting in dead space below your content.

The code to dynamically resize the ASPxPopupControl can be downloaded from my website and here is a short video briefly explaining how the code works:

 

Dynamically Resizing the ASPxPopupControl
read more

DevExpress ASPxPopupControl - Display ASPxPopupControl over a video object

I created a page on my website eagleware.net that contains a simple control you can view with various browsers and test an ASPxPopupControl over a video with various settings and with the video embedded into the page as an <iframe> or <object>..

A previous article DevExpress ASPxMenu - Display dropdown menus over a Video object has short video that relates to this topic and also uses the same web page control to demonstrate different settings of the ASPxPopupControl and their effect.

read more

DevExpress ASPxPopupControl - Display ASPxPopupControl over a 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 ASPxPopupControl over a PDF with various settings and with the video embedded into the page as an <iframe>, <embed>, <object> or using Google Docs.

 

The following short video shows my page control on my website and how to use it. A previous article DevExpress ASPxMenu - Display dropdown menus over a PDF object uses the same code behind techniques and provides code for determining which way to load a dynamic PDF into a page based on the viewing browser.

 

 

ASPxPopupControl Display over a PDF File

Example 1 – DevExpress v11.1.7 ASPxPopupControl

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 Firefox especially difficult problems in achieving the rendering of a page element over a PDF.

 

This Example shows how the ASPxPopupControl used 3 different ways displays 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

ASPxPopupControl

Display over PDF

Settings 1

ASPxPopupControl

Display over PDF Settings 2

ASPxPopupControl

Display over PDF

Settings 3

         

IE 8

I Frame

NO

YES

YES

Embed

NO

YES

YES

Object

NO

YES

YES

GoogleDocs

N/A

N/A

N/A

       

IE 9

I Frame

NO

YES

YES

Embed

NO

YES – NO if PDF has focus

YES – NO if PDF has focus

Object

NO

YES – NO if PDF has focus

YES – NO if PDF has focus

GoogleDocs

N/A

N/A

N/A

       

Chrome 5

I Frame

NO

NO

YES

Embed

NO

YES

YES

Object

NO

YES

YES

GoogleDocs

YES

YES

YES

       

Chrome

I Frame

YES

YES

YES

12.0, 14

Embed

YES

YES

YES

Object

YES

YES

YES

GoogleDocs

YES

YES

YES

 

Firefox 3.6.6

I Frame

NO

NO

YES

3.6.7, 3.6.8

Embed

NO

NO

YES

5, 7

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

       

ASPxPopupControl Settings 1: Normal default settings.

ASPxPopupControl Settings 2: RenderIFrameForPopupElements="True"

ASPxPopupControl Settings 3: RenderIFrameForPopupElements="True", ShowHeader="False" & popup contents placed in asp Panel control.

 

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 (with ASPxPopupcontrol set to RenderIFrameForPopupElements="True") and using Google Docs for Safari and Firefox.

 

A previous article DevExpress ASPxMenu - Display dropdown menus over a PDF object uses the same code behind techniques and provides code for determining which way to load a dynamic PDF into a page based on the viewing browser.

read more

DevExpress ASPxMenu - Display dropdown menus over a Video 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 video with various settings and with the video embedded into the page as an <iframe> or <object>.

The following short video shows my page control on my website and how to use it. The code for the page is downloadable from the web page.

 

read more

DevExpress ASPxMenu - Display dropdown menus over a PDF object

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


 



ASPxMenu display over PDF

read more

Saturday, November 12, 2011

How to build a FAQ page using the DevExpress ASPxNavBar bound to an Access or SQL Datasource

By design the ASPxNavBar supports binding only to hierarchical datasources (those that implement the IHierachicalDataSource interface - e.g. XmlDataSource, SiteMapDataSource) through its DataSourceID and DataSource properties. 

Recently I wanted to build a FAQ page, I have done this before in other ways but this time I wanted to use the ASPxNavBar to display the FAQ page. I quickly found that I could not bind the ASPxNavBar to an Access or SQL datasource at design time and after searching Google and DevExpress I found many questions regarding this (Q201051 shows how to bind an ASPxMenu) but no definitive answers showing how to do it. 

After a little research I found a quick simple way to bind an Access or SQL database to the ASPxNavbar control for use in a FAQ page or for other uses. 

HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Example - FAQ Page Using ASPxNavbar</title>
    <style type="text/css">
        .heading { font-size: large; color: Blue; }
        .divnb { padding-left: 10px; padding-top: 10px; }
        .Question { color: Gray; font-size: 11pt; }
        .Answer { font-size: 11pt; padding-left: 35px; padding-top: 8px; padding-bottom: 8px; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    
    <div style="min-height: 500px;">
        <div class="heading">Frequently Asked Questions</div>
        
        <div class="divnb">
            <dx:ASPxNavBar ID="navFAQ" runat="server" EnableDefaultAppearance="False" ExpandButtonPosition="Left" AutoCollapse="True" GroupSpacing="5px" EncodeHtml="False">
                <GroupHeaderStyle CssClass="Question" ImageSpacing="8px"></GroupHeaderStyle>
                <ItemStyle CssClass="Answer" />
                <CollapseImage url="~/Images/nbCollapse.png"></CollapseImage>
                <ExpandImage url="~/Images/nbExpand.png"></ExpandImage>
            </dx:ASPxNavBar>
        </div>
    </div>
    
    </form>
</body>
</html>

Code behind VB:

Imports System.Data.OleDb
Imports DevExpress.Web.ASPxNavBar
 
Partial Class _Default
    Inherits System.Web.UI.Page
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Load_FAQ()
        End If
    End Sub
 
    Public Sub Load_FAQ()
        Dim SQL As String = "SELECT [Sort], [Question], [Answer] FROM [FAQ] ORDER BY [Sort], [Question]"
        Dim Question, Answer As String
        Dim i As Integer = 0
 
        '// The connectionstring is defined in the web.config file //
        '<connectionStrings>
        '    <add name="DB_Conn_DemoFAQ" connectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|demofaq.mdb" providerName="System.Data.OleDb" />
        '</connectionStrings>
        Dim conn As OleDbConnection = New OleDbConnection(ConfigurationManager.ConnectionStrings("DB_Conn_DemoFAQ").ConnectionString)
 
        Dim SelectCommand As New OleDbCommand(SQL, conn)
        Try
            conn.Open()
            Dim Reader As OleDbDataReader = SelectCommand.ExecuteReader()
            While Reader.Read()
                Question = If(Not IsDBNull(Reader.Item("Question")), Reader.Item("Question"), "")
                If Not Question = "" Then
                    Question = Reader.Item("Question")
                    Answer = Reader.Item("Answer")
                    navFAQ.Groups.Add(Question)
                    navFAQ.Groups(i).Items.Add(Answer)
                    i += 1
                End If
            End While
        Catch ex As Exception
        Finally
            conn.Close()
            conn.Dispose()
            SelectCommand.Dispose()
        End Try
    End Sub
End Class

If it helps anyone else I’ve got a sample FAQ project with downloadable code on my main website and a video below.

How to build a FAQ page using the DevExpress ASPxNavBar bound to an Access or SQL Datasource
read more