Lions Den

The Code and Times of Hanan Schwartzberg

About Hanan | Hanan's CV | Contact Hanan

February 12, 2014

Resize an iFrame to match its contents

Filed under: JavaScript — Tags: , , , — Hanan Schwartzberg @ 9:52 am

The Issue

You need to load content into an iFrame, but you don’t know the height of the content ahead of time.

The Solution

Catch the lonload event of the iFrame and resize it to the height of the body of the content

<iframe id="ifArtworkDetails" width="650px" height="420px" scrolling="no" 
        src="someDynamicContent.html" marginheight="0" marginwidth="0" 
        frameborder="0" onload="resizeIframe(this)"></iframe>
    function resizeIframe(objIframe) {
        objIframe.style.height = 
            objIframe.contentWindow.document.body.scrollHeight + 50 + 'px';
    }

July 17, 2012

Google Custom Search Engine – Error: ‘this.zd’ is null or not an object

Filed under: Google,JavaScript — Tags: , , , — Hanan Schwartzberg @ 4:36 pm

The Issue

When using the Google Custom Search Engine control and executing a default query it throws a JavaScript error “Error: ‘this.zd’ is null or not an object”.


Error: 'this.zd' is null or not an object

The Problem Code

google.load('search', '1');
 
function OnLoad() {
  // Create a custom search control that uses a CSE restricted to code.google.com
  var customSearchControl = new google.search.CustomSearchControl('012157912978810372049:-cv6ao3zqua');
 
  // run a query
  customSearchControl.execute('ajax api');
 
  // Draw the control in content div
  customSearchControl.draw('content'); 
}
google.setOnLoadCallback(OnLoad);

The Solution

Sometimes the most obvious mistakes are the hardest to find. After several Google searches it started to seem like no one else ever had this problem. Threre was no obvious connection between this error and the Google CSE. After staring at the examples here http://code.google.com/apis/ajax/playground/#custom_search_control for a while the answer became obvious.

Before executing the default query the control must first be drawn. The last two commands in the OnLoad method in the above code need to be flipped. Here is the correct code:

google.load('search', '1');
 
function OnLoad() {
  // Create a custom search control that uses a CSE restricted to code.google.com
  var customSearchControl = new google.search.CustomSearchControl('012157912978810372049:-cv6ao3zqua');
 
  // Draw the control in content div
  customSearchControl.draw('content'); 
 
  // run a query (ONLY AFTER DRAWING THE CONTROL)
  customSearchControl.execute('ajax api');
}
google.setOnLoadCallback(OnLoad);

August 25, 2009

Show a Wait Message While Waiting for Postback to Complete

Filed under: ASP.NET,Client Side — Tags: , , , , — Hanan Schwartzberg @ 10:13 am

Scenario

Among the controls on a page is an update panel with a button that when clicked causes a partial postback that takes at least a few seconds. During this time you want to show the user a wait message that will disappear as soon as the postBack completes.

(more…)

August 12, 2009

Default a TabContainer to No Tabs Selected

Question

Under normal circumstances when a page loads with a tabContainer on it one tab must be selected. The selected tab can be specified via the ActiveTabIndex property. What if the tabContainer needs to default to an empty tab with none of the tabs selected?

Solution

Add a dummy tabPanel to the tabContainer and leave it blank. Use the pageLoad JavaScript function to hide the tab’s header

<cc1:TabContainer ID="TabContainer1" runat="server" 
    Height="200px" Width="200px" ActiveTabIndex="0">
    <cc1:TabPanel runat="server" ID="tpDummy" HeaderText="">
        <ContentTemplate>
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel runat="server" ID="tpName" HeaderText="Name">
        <ContentTemplate>
            Name:
            <asp:TextBox runat="server" ID="txtName" />
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel runat="server" ID="tpEmail" HeaderText="Email">
        <ContentTemplate>
            Email:
            <asp:TextBox runat="server" ID="txtEmail" />
        </ContentTemplate>
    </cc1:TabPanel>
</cc1:TabContainer>
function pageLoad(sender, e)
{
    var objTpDummy = 
        document.getElementById('<%= tpDummy.ClientID %>' + '_tab');
    objTpDummy.style.display = 'none';
}

June 3, 2009

AjaxControlToolkit ComboBox “Invalid argument.”

Filed under: Ajax Control Toolkit,ASP.NET,Client Side — Tags: , , , , , — Hanan Schwartzberg @ 12:03 pm

The Control

Microsoft recently released version 3.0.30512 of the AjaxControlTookit, available here. One of the new controls is the ComboBox, which “provides a DropDownList of items, combined with TextBox.”

The Issue

Placing the ComboBox in a container that has the style attribute “display: none;” throws the error “Invalid argument.” This is true if the container is a panel with the attribute set explicitly, or a different container such as a TabPanel that implicitly has the display attribute set to none when it is not shown.

(more…)

April 1, 2009

Validate Multiple ValidationGroups on One Page

Filed under: ASP.NET,Client Side — Tags: , , , — Hanan Schwartzberg @ 3:37 pm

Scenario

A page has multiple validation groups:

  • vgPrimary
  • vgMain

The submit button on the page is a member of vgMain, so automatically it will only run the validation on that group. A solution is needed that will run validation on multiple groups and block the postback if needed.

(more…)

February 15, 2009

Hide the contents of the page until the entire page has loaded

Filed under: ASP.NET,Client Side — Tags: , , — Hanan Schwartzberg @ 12:14 pm

There are several reasons you may want to keep the controls on the page hidden until the page has loaded. If the user enters data before all the controls are loaded it may cause an error, or you may just not want the user to see the page rendering. The example below shows how to hide the controls from the user and instead display a loading message.

(more…)

January 28, 2009

ModalPopup Flicker When Exiting the Page

Issue

When the user causes a complete postback all of the panels associated with ModalPopupExtenders flicker and become visible for a moment before the page disappears as the browser loads the next page. NOTE: This is occurring while exiting the page, not when the page loads and could not be replicated on other pages.

What did not work

A quick Google search yielded this post relating to the flicker occassionaly seen when the page loads:  http://mattberseth.com/blog/2007/08/how_to_stop_the_modalpopup_fli.html

To get around this, I explicitly set the display style to ‘none’ on the popup Panel.  This has solved the problem.

I tried this two ways (not at the same time):

  • I added display:none; to my css class that each panel uses.
  • I added style=”display:none;” the to the panel’s tag (more…)
Home | Site Design | Banner Design | Code Den | Offsite Posts | Downloads | Photography | About Hanan | Hanan's CV | Contact Hanan
Copyright © 2009 Hanan Schwartzberg. All rights reserved.