Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

Accordion Content Clipped in iframe by Height of Shortest Pane

$
0
0

Hi,  I have reviewed all the posts having to do with my problem but have not found a resolution as  yet.

The website I have inherited has a seven-pane Accordion control that is loaded into an iframe element.  The iframe element sets the height of the accordion control dynamically with some JavaScript code that was obtained from the DynamicDrive website:  IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com).  Everything works fine with the Accordion control and its panes until a button is clicked somewhere (inside or outside of the Accordion) that causes a server post-back.  Then the height of the Accordion is clipped to whatever the height of the last pane expanded is.  Ithink it's the iframe element that is getting its scrollheight measurement from the height of whichever Accordion pane was last used and which is much shorter than the top Accordion pane (the default expanded pane on first load).  The iframe then sets the height limit for the whole Accordion control based on that, so that the content is clipped for all the panes, based on the height of the shorter panes. 

The Accordion control's property settings are as follows:

AutoSize = none (don't like scrollbars in the content panes)
RequireOpenedPane = false
SuppressHeaderPostbacks = true

I was wondering if a possible solution might be to add some code to the iframe JavaScript method that will check for a minimum scrollheight before setting the height of the iframe, so that the iframe height will beat least x pixels in height; maybe in the resizeIframe( ) function?  I'm not too strong in JavaScript so any help here would be appreciated.  Also, if there is a better solution, I am agreeable to that as well.  Setting a manual minimum height is not the best of all solutions, becuase most records viewed would probably be shorter than that and so the user would have to scroll down to see the other 6 collapsed panes.

Edit:  On further reflection, I think what I need most is to set the minimum height of the iframe to the total height of the Accordion with the first pane expanded , because that pane's content will always be the longest.  So how do I persist that value and pass it from the ASPX page where the Accordion sits to the Default.ASPX page where the iframe sits, and also to the MasterPage where the iframe's height is set in JavaScript?
End Edit

Here is the JavaScript that sets the height of the iframe element:

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
    var iframeids = ["ctl00_ContentPlaceHolder1_MainFrame"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
var ExtraHeight = 30

function resizeCaller()
{
	var dyniframe=new Array()
	for (i=0; i<iframeids.length; i++)
	{
	if (document.getElementById)
		resizeIframe(iframeids[i])
		//reveal iframe for lower end browsers? (see var above):
		if ((document.all || document.getElementById) && iframehide=="no")
		{
			var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
			tempobj.style.display="block"
		}
	}
}


function resizeIframe(frameid) {
    var currentfr = document.getElementById(frameid)
    if (currentfr) {
        currentfr.style.display = "block";
        if (currentfr.Document && currentfr.Document.body.scrollHeight) {                                                                //ie5+ syntax
            currentfr.height = currentfr.Document.body.scrollHeight;
        } else if (currentfr.contentDocument && currentfr.contentDocument.body.scrollHeight) { //ns6+ / opera syntax
            currentfr.height = currentfr.contentDocument.body.scrollHeight + FFextraHeight;
        } else if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //standards compliant syntax - probably nothing

            // will drop through to this
            currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight;
        }
        if (currentfr.addEventListener) {
            currentfr.addEventListener("load", readjustIframe, false);
        } else if (currentfr.attachEvent) {
            currentfr.detachEvent("onload", readjustIframe);  // Bug fix line
            currentfr.attachEvent("onload", readjustIframe);
        }
    }
}

function readjustIframe(loadevt)
{
	var crossevt=(window.event)? event : loadevt
	var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
	if (iframeroot)
		resizeIframe(iframeroot.id);
}


function loadintoIframe(iframeid, url)
{
	if (document.getElementById)
	document.getElementById(iframeid).src=url
}


if (window.addEventListener)
	window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
	window.attachEvent("onload", resizeCaller)
else
    window.onload = resizeCaller
/***********************************************

* end Iframe SSI script II

/***********************************************/


thank you,

Sherry

IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)

Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>