PDA

View Full Version : iFrame Height Sizing



tbellamy08
05-15-2008, 03:31 PM
1) Script Title: Iframe SSI script II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

3) Describe problem: When changing pages the height does not reset, it stays at the longest page height visited.

I have created a site which has a tree menu placed onto the left hand side and the iframe placed in the middle of the site. But when changing pages the page height in the iframe does not reset to actual page size, but only stays at the longest height of page which has been looked at.

Can someone please help me to get the pages to reset to there actual size instead of staying at the longest page in height, there are many pages in the Tree Menu and most are very short apart from several FAQ pages which hold over 50 Questions and Answers

My Codes

Tree Menu


<head>

<script type="text/javascript" src="http://hrportal.intranet.point/sites/MyHR/Tree%20Script/jquery-1.2.2.pack.js"></script>

<script type="text/javascript" src="http://hrportal.intranet.point/sites/MyHR/Tree%20Script/ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<script type="text/javascript">


ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='http://hrportal.intranet.point/sites/MyHR/Tree%20Script/plus.gif' class='statusicon' />", "<img src='http://hrportal.intranet.point/sites/MyHR/Tree%20Script/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "slow", //speed of animation: "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
myiframe=window.frames["myiframe"]
if (expandedindices.length>0) //if there are 1 or more expanded headers
myiframe.location.replace(headers[expandedindices.pop()].getAttribute('href')) //Get "href" attribute of final expanded header to load into IFRAME
},
onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
if (state=="block" && isclicked==true){ //if header is expanded and as the result of the user clicking on it
myiframe.location.replace(header.getAttribute('href'))
}
}
})


</script>


<style type="text/css">

.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background: black url(http://hrportal.intranet.point/sites/MyHR/Tree%20Script/glossyback.gif) repeat-x bottom left;
font: bold 14px "Arial", "Arial", Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: url(http://hrportal.intranet.point/sites/MyHR/Tree%20Script/glossyback2.gif);
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Arial", "Arial", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background: #FFFFFF;
colorz: white;
}

</style>

</head>

<body>

<div class="glossymenu">
<a class="menuitem" href="http://hrportal.intranet.point/sites/MHR/Pages/Welcome%20to%20MyHR.aspx?PageView=Shared" target="myiframe">Homepage</a>
<a class="menuitem submenuheader" href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Absence%20and%20Attendance.aspx?PageView=Shared" target="myiframe">Absence & Attendance</a>
<div class="submenu">
<ul>
<li><a href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Sick%20Absence.aspx?PageView=Shared" target="myiframe">Sick Absence</a></li>
<li><a href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Unauthorised%20Absence.aspx" target="myiframe">Unauthorised Absence</a></li>
<li><a href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Family%20Friendly.aspx?PageView=Shared" target="myiframe">Family Friendly</a></li>
</ul>
</div>

<a class="menuitem submenuheader" href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Managing%20Employees.aspx?PageView=Shared" target="myiframe">Managing Employees</a>
<div class="submenu">
<ul>
<li><a href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Bullying%20and%20Harassment.aspx?PageView=Shared" target="myiframe">Bullying and Harassment</a></li>
<li><a href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Conduct.aspx?PageView=Shared" target="myiframe">Conduct</a></li>
<li><a href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Grievance.aspx?PageView=Shared" target="myiframe">Grievance</a></li>
</ul>
</div>

<a class="menuitem submenuheader" href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Document%20Library.aspx?PageView=Shared" target="myiframe">Document Library</a>
<div class="submenu">
<ul>
<li><a href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Absence%20and%20Attendance%20Document%20Library.aspx" target="myiframe">Absence & Attendance</a></li>
<li><a href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Managing%20Employees%20Document%20Library.aspx?SortField=LinkFilenameNoMenu&SortDir=Asc&View=%7b2FE691E7%2dADAA%2d4D0A%2d937C%2d182BF7F6924F%7d&PageView=Shared" target="myiframe">Managing Employees</a></li>
</ul>
</div>

<a class="menuitem" href="http://hrportal.intranet.point/sites/MyHR/Sub%20Pages/Ask%20MyHR.aspx?PageView=Shared" target="myiframe">Ask MyHR</a>
<a class="menuitem" href="http://www.dynamicdrive.com/" target="myiframe">MyHR Advice Line</a>
<a class="menuitem" href="http://www.dynamicdrive.com/" target="myiframe">User Guide</a>
<a class="menuitem" href="http://www.dynamicdrive.com/" target="myiframe">MyHR Case Viewer</a>
<a class="menuitem" href="javascript:loadintoIframe('myframe', 'http://www.dynamicdrive.com/')" target="myiframe">Management Information</a>
</div>

</body>
</html>

tbellamy08
05-15-2008, 03:32 PM
Iframe


<html>

<head>
<script type="text/javascript">

/***********************************************
* 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=["myframe"]

//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

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 && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
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

</script>
</head>

<body>

<iframe id="myframe" src="http://hrportal.intranet.point/sites/MHR/Pages/Welcome%20to%20MyHR.aspx?PageView=Shared" name="myiframe" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>

</body>
</html>

tbellamy08
05-16-2008, 01:04 PM
Anyone able to help with this issue.

tbellamy08
05-20-2008, 08:15 AM
Bump

Can anyone spare advice on this, need a fix urgently

tbellamy08
05-23-2008, 10:38 AM
Bump

Help :confused: