Results 1 to 5 of 5

Thread: iFrame Height Sizing

  1. #1
    Join Date
    Apr 2008
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default iFrame Height Sizing

    1) Script Title: Iframe SSI script II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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

    Code:
    <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>
    Last edited by tbellamy08; 05-16-2008 at 01:04 PM.

  2. #2
    Join Date
    Apr 2008
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Iframe

    Code:
    <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>

  3. #3
    Join Date
    Apr 2008
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Anyone able to help with this issue.

  4. #4
    Join Date
    Apr 2008
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Bump

    Can anyone spare advice on this, need a fix urgently

  5. #5
    Join Date
    Apr 2008
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Bump

    Help

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •