Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 22

Thread: jQuery get height of iframes source.

  1. #11
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,381
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    The scrolling attribute is obsolete all together, as is the frameborder attribute. But all browsers support it.
    If you don't want them, see this.
    Anyways, I think scrolling must not be allowed in order to avoid scroll bars to appear in an iframe that should be truly resized.

  2. #12
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    I agree that scrolling should be hidden... but can't you just use overflow:hidden; ?

  3. #13
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,381
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Quote Originally Posted by keyboard1333 View Post
    I agree that scrolling should be hidden... but can't you just use overflow:hidden; ?
    overflow:hidden works in all modern browsers except IE. So you need something for IE, which could be scrolling="no" if you don't care about validation (validation should not be a purpose on itself!!) or the script I referred to above.

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    The overflow: hidden; property/value pair works cross browser if assigned to the html and/or body elements of the page in the iframe.

    An important note about what I said:

    Code:
    alert(jQuery(window.frames[0].document).height());
    That needs to be:

    Code:
    alert(jQuery(window.frames[0].document.body).outerHeight());
    And something else to be aware of (just as with any iframe resizing scheme) is that only works if the content that determines the height required by the window showing the page being loaded into the iframe is in the normal flow (position static or relative without going beyond the bottom) of the page. Absolute, relative, fixed, or floated content might cause problems, as can tables in some browsers.

    You can choose trying to determine if there's anything like that on the remote page and/or look for things that have an offsetTop + offsetHeight that's greater than the document.body.offsetHeight (or the jQuery equivalents). But generally it's best not to use any of that stuff on the remote page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #15
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Here's a working demo:

    http://home.comcast.net/~jscheuer1/s...rame-top-2.htm

    The overflow-y is hidden on the pages in the iframe for both the html and body elements. Nothing else is done to eliminate the scrollbar, that's apparently sufficient cross browser. I left the border at 1 because it shows the resizing more dramatically. If you want no border in IE 8 and less, you must use the deprecated border=0 attribute.

    The code on that page should work with multiple iframes. All that's required is that they each have a class of "resize", which allows you to also have other iframes on the page without that class, those iframes will not resize. If you don't want the resize to be an animation, that's simple, let me know.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #16
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John,

    Your solution is 100% what I am looking for but it is not working IE for me....tested in ie7 but no luck. IE7 is around 95% of our enviornment. Attached screenshot of the 3 views and also is there a easy way to make the space disappear if the actual iframe content is 100% empty? Have emergency banner that will only be displayed when a message is made active and needing to stretch it in hieght without scrollbars according to content as there may be multiple messages at once.
    Click image for larger version. 

Name:	screenshot.jpg 
Views:	108 
Size:	91.8 KB 
ID:	4994
    <!DOCTYPE html>
    <html>
    <head>
    <title>jQuery Resize Iframe</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    var $iframe = $('iframe').eq(0), ie = (function(){var ie; return (ie = /MSIE (\d+)/.exec(navigator.userAgent)) && ie[1] < 9 ? 5 : 0;})();
    $iframe.load(function(){
    $iframe.animate({height: $(window.frames[0].document.body).outerHeight(true) + ie}, 600);
    });
    $iframe.data('load', function(){$iframe.trigger('load');});
    ie && $(window).load($iframe.data('load'));
    });
    </script>
    </head>
    <body>
    <iframe name="myframe" src="http://intranet-dev/deztest.cfm" width="300" height="300" scrolling="auto" frameborder="1"></iframe><br>
    <a href="frame1.htm" target="myframe">Frame1</a><br>
    <a href="frame2.htm" target="myframe">Frame2</a><br>
    </body>
    </html>




    Thanks n advance,
    Quote Originally Posted by jscheuer1 View Post
    I tried it out. It needed some tweaks. This worked in limited testing:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>jQuery Resize Iframe</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var $iframe = $('iframe').eq(0), ie = (function(){var ie; return (ie = /MSIE (\d+)/.exec(navigator.userAgent)) && ie[1] < 9 ? 5 : 0;})();
    	$iframe.load(function(){
    		$iframe.animate({height: $(window.frames[0].document.body).outerHeight(true) + ie}, 600);
    	});
    	$iframe.data('load', function(){$iframe.trigger('load');});
    	ie && $(window).load($iframe.data('load'));
    });
    </script>
    </head>
    <body>
    <iframe name="myframe" src="frame1.htm" width="300" height="300" scrolling="auto" frameborder="1"></iframe><br>
    <a href="frame1.htm" target="myframe">Frame1</a><br>
    <a href="frame2.htm" target="myframe">Frame2</a><br>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	screenshot.jpg 
Views:	88 
Size:	89.6 KB 
ID:	4993  
    Last edited by dklbwf; 03-21-2013 at 08:02 PM.

  7. #17
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Try Arie's 2 tweaks to it from post #9 in this thread:

    http://www.dynamicdrive.com/forums/s...091#post289091

    Quote Originally Posted by molendijk View Post
    For some reason, I hadn't noticed John's script when I submitted my last post.
    It's a very nice script. I tested it in IE (down to IE7), Firefox, Google Chrome, Opera and Safari. The results were fine with each browser.
    I would suggest 2 modifications though:
    Code:
    <iframe scrolling="no" ...
    and:
    Code:
    document.body).outerHeight(true) + 5 + ie}, 600
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dklbwf (03-22-2013)

  9. #18
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hey John, Thanks so much for quick response I tried that change and no luck still same results. i also changed the height from 300 to 100% but that made the box even smaller. Your solution is exactly what I need just need it to do no scrolling and just automatically fit in height...I've attached image of exact site that has the iframe and width is perfect but still getting scrollbar even with scrolling="no"
    Click image for larger version. 

Name:	screenshot.jpg 
Views:	95 
Size:	60.6 KB 
ID:	4997

    THanks again!
    Quote Originally Posted by jscheuer1 View Post
    Try Arie's 2 tweaks to it from post #9 in this thread:

    http://www.dynamicdrive.com/forums/s...091#post289091
    Last edited by dklbwf; 03-22-2013 at 03:57 PM.

  10. #19
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    There's nothing I can really do without a link to the page. Even then, some pages in the iframe cannot be easily read for height in some browsers, as I noted earlier in this thread:

    Quote Originally Posted by jscheuer1 View Post
    And something else to be aware of (just as with any iframe resizing scheme) is that only works if the content that determines the height required by the window showing the page being loaded into the iframe is in the normal flow (position static or relative without going beyond the bottom) of the page. Absolute, relative, fixed, or floated content might cause problems, as can tables in some browsers.

    You can choose trying to determine if there's anything like that on the remote page and/or look for things that have an offsetTop + offsetHeight that's greater than the document.body.offsetHeight (or the jQuery equivalents). But generally it's best not to use any of that stuff on the remote page.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #20
    Join Date
    Mar 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Below is the actual code that is contained in iframe page:

    Code:
    <cfset applicationName = "System Info Banner">
    <cfquery name="qrySystemStatus" datasource="EnterpriseWebApplications-ReadOnly">
    	SELECT apps.DisplayName
    	FROM WAFApplication a
    		INNER JOIN WAFApplicationStatus apps
    		ON apps.ID = a.ApplicationStatusID
    	WHERE a.DisplayName = '#applicationName#'
    </cfquery>
    
    <cfquery name="qrySystemVariables" datasource="EnterpriseWebApplications-ReadOnly">
    	SELECT apps.DisplayName, apps.Value VarValue
    	FROM WAFApplication a
    		INNER JOIN WAFApplicationSettings apps
    		ON apps.ApplicationID = a.ID
    	WHERE a.DisplayName = '#applicationName#'
    		AND apps.Active = 1
    		AND apps.IsLeafEntry = 1
    </cfquery>
    <!--- Pull system variables and dynamically create and assign them --->
    <cfloop query="qrySystemVariables">
    	<cfset "#DisplayName#" = "#VarValue#">
    </cfloop>
    <!---
    Available variables are:
    ShowBorder
    ScrollSpeed_Vertical
    ScrollSpeed_Horizontal
    ScrollSpeed_Static
    FontSize_Vertical
    FontSize_Horizontal
    FontSize_Static
    --->
    
    <cfif qrySystemStatus.DisplayName eq "Active">
    	<cfquery name="getRows" datasource="EnterpriseWebApplications-ReadOnly">
    		SELECT e.DisplayText,
    			dt.DisplayName DisplayType
    		FROM SIBEntry e
    			INNER JOIN SIBDisplayType dt
    			ON dt.ID = e.DisplayTypeID
    		WHERE e.Active = 1
    			AND GETDATE() BETWEEN e.FromDtm AND e.ToDtm
    		ORDER BY e.FromDtm, e.ToDtm, e.ID
    	</cfquery>
    
    	<cfif getRows.RecordCount neq 0>
    		<table border=<cfoutput>#ShowBorder#</cfoutput>>
    		<tr><td><b>System Info Banner</b></td></tr>
    
    		<cfquery dbtype="query" name="VerticalScrollingEntries">
    			SELECT * FROM getRows WHERE DisplayType = 'Scrolling-Vertical'
    		</cfquery>
    		<cfquery dbtype="query" name="HorizontalScrollingEntries">
    			SELECT * FROM getRows WHERE DisplayType = 'Scrolling-Horizontal'
    		</cfquery>
    		<cfquery dbtype="query" name="StaticEntries">
    			SELECT * FROM getRows WHERE DisplayType = 'Static'
    		</cfquery>
    
    		<tr><td>
    
    		<cfif VerticalScrollingEntries.RecordCount neq 0>
    			<marquee behavior="scroll" direction="up" scrollamount="<cfoutput>#ScrollSpeed_Vertical#</cfoutput>">
    			<font size="<cfoutput>#FontSize_Vertical#</cfoutput>"><b>
    			<cfoutput query="VerticalScrollingEntries">
    			**
    			#VerticalScrollingEntries.DisplayText#
    			**
    			<br><br>
    			</cfoutput>
    			</b></font>
    			</marquee>
    		</cfif>
    
    		<cfif HorizontalScrollingEntries.RecordCount neq 0>
    			<marquee behavior="scroll" direction="left" scrollamount="<cfoutput>#ScrollSpeed_Horizontal#</cfoutput>"><b>
    			<font size="<cfoutput>#FontSize_Horizontal#</cfoutput>"><b>
    			<cfoutput query="HorizontalScrollingEntries">
    			**
    			#HorizontalScrollingEntries.DisplayText#
    			**
    			</cfoutput>
    			</b></font>
    			</marquee>
    		</cfif>
    
    		<cfif StaticEntries.RecordCount neq 0>
    			<font size="<cfoutput>#FontSize_Static#</cfoutput>"><b>
    			<cfoutput query="StaticEntries">
    			<CENTER>#StaticEntries.DisplayText#</center>
    			<br>
    			</cfoutput>
    			</b></font>
    		</cfif>
    
    		</td></tr></table>
    	</cfif>
    </cfif>
    Not sure what script or function may need to be added to this script to push the height to the other page that is calling this page from iframe...Thans again for your help/advice
    Quote Originally Posted by jscheuer1 View Post
    There's nothing I can really do without a link to the page. Even then, some pages in the iframe cannot be easily read for height in some browsers, as I noted earlier in this thread:

Similar Threads

  1. jquery scrollTo and resize height
    By vinny.benson in forum JavaScript
    Replies: 0
    Last Post: 01-27-2011, 12:00 AM
  2. Replies: 0
    Last Post: 12-14-2010, 03:20 PM
  3. Replies: 2
    Last Post: 02-16-2010, 04:03 PM
  4. Ajax XML Ticker (txt file source) no source is showing
    By hups in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 07-23-2008, 07:09 PM
  5. iframes height problem
    By pinky12 in forum CSS
    Replies: 1
    Last Post: 01-05-2006, 08:41 PM

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
  •