We Keep Coding

JQuery set iframe height depending on iframe source

I am using the follow script to set the height of the YouTube iframe so it keeps a nice 16:9 aspect ratio. The width is always 100% of the container.
The script should only set the height for YouTube videos. This works if the source of all the iframes on the page is the same. The Youtube embeds are correctly set, soundcloud embeds are ignored, however, once I use a Youtube and a Soundcloud source, it sets both. This makes sense as the iframe is not targeted to only set the height of those that include youtu in the source.
How do I make it set only the height of iframes where the source includes youtu ?
<script>
function iframeSizing() {
$('iframe[src*="youtu"]').each(function() {
var containerWidth = $('iframe').width();
iframeWidth = containerWidth;
iframeHeight = 0.5625 * iframeWidth;
$('iframe').css({
'height': iframeHeight + 'px'
});
});
};
$(window).resize(iframeSizing);
$(document).ready(iframeSizing);
</script>
thanks

Your issue is that you are using the $('iframe') selector over and over again, meanwhile your function doesn't actually know which iframe you are referring to.
Your selector inside the .each() function should be $(this) instead of $(iframe).
So, $(this).width() and $(this).css()
Basically, the way the .each() function works is it loops through all elements with $('iframe[src*="youtu"]') and then inside of that function, to refer to the current element that the loop is on you should use the selector $(this)

Can't fix the width of popup element (colorbox jquery override)

I have the following code on my site that's supposed to show a popup window
<span class="fbridge-signup-form" data-widget-id="21378"></span>
<script type="text/javascript">
(function() {
var secure = ("https:" == document.location.protocol);
var fb_js_host = (secure ? "https://www.fanbridge.com" : "http://widget-platform.fanbridge.com");
window._FBRIDGE_WIDGETS_HOST = fb_js_host; var p, s, id = 'fbridge-widgetjssdk-v1';
p = document.createElement('script'); p.id = id; p.type = 'text/javascript'; p.async = true;
p.src = (secure ? "https://ssl.fbridgecdn.net" : "http://static.fbridgecdn.net") + '/js/fb/widget/v1/platform.js?_=' + ((new Date()).getTime());
s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(p, s);
})();
</script>
It works fine, but the problem is that there's some setting with lightboxes on my Drupal site that makes this window of a smaller width and height than the actual content inside.
I tried getting the element with getElementByClassName or writing the width and heightparameters into the style property of fbridge-signup-form but it didn't work out.
Do you know what I could do to force it to be a certain width and height? Say 480px by 400px?
You can check the actual page on http://waytorussia.net/Moscow/Intro.html (it has a cookie set to show only once).
UPDATE: maybe it's possible to use another kind of popup so this one is not overridden by my other settings?

According to the HTML source, the element you should resize is (id) cboxContent.
But the black frame around it doesn't seem "ready" (from an HTML/Css point of view) to be resized.
See the screenshot here:
I resized it 400x400.
EDIT -
By resizing all the appropriate elements, you can manage to get what you want. Here's an example done manually:
Just inspect the element (right-click > Inspect) with a modern browser, and look at the divs that you need to resize on load (with JavaScript).

i opened your page in Firefox with the developer tools to see how things work width and height wise and the results are interesting.
Basically the frame of the lightbox is made up of numerous divs all seem to be hard coded to a specific width and height. When you hover over the inner content using the inspector tool you can see that the inner content is actually the correct width and height but the container ( your collection of divs is not )
Try expanding the height and width of the container divs using css maybe??
I wouldnt have used this as answer but unfortunately i cant provide screenshots using just the comments section to my knowledge.
To see the image at full screen open it in a new tab.
For a good alternative try colorbox its a great JQuery modal plugin that can be used for just about anything.
Demos are here. Have a look at inline HTML example it seems to be similar to what you need.

Thanks to #Vincent G and #KyleT for their help I found that I had to edit the CSS styles for colorbox module.
#cboxLoadedContent iframe{display:block; min-width: 480px; min-height: 400px; border:0;}
and
#colorbox{min-width: 480px !important; min-height: 400px !important; }
in the colorbox.css file which was part of my Drupal installation.
After that the widget was loading fine.

jQuery.contents() Gives a strange result

I'm having a very strange occurrence when using an IFrame and jQuery.Contents.
We have a number of reports that are built in seperate pages, and a display page that uses jQuery Tabs to display a number of these pages at once.
These reports are of varying sizes based on the data and the inputs by the user, since they can vary we needed to dynamically set the height of the IFrame to be the height of the contents. To get the height of the contents I am using this following code :
var iframeHeight = $(this).contents().height();
iframeHeight += 50;
console.log(iframeHeight);
This code works fine on first load, but after the IFrame Postsback/Refreshes the iframeHeight that is logged is always 83px more than the previous height, regardless of the actual contents of the child page.
i.e. First report is 500px high,
Second report should be 300px high
but $(this).contents().height(); returns 583px.
Here is an example jsFiddle to demonstrate the problem. If you open the console and then click the JSFiddle Icon in the top left of the IFrame, you will notice that the logged height will be 83px more than the previous.
Is there anything that could explain this issue?
Am I miss-understanding how the jQuery.Contents function works?
If this will not work this way is there a better way to get the content height? (I've tried the height of the body + the height of the form object but this didn't work in IE).
Tested this in IE10 + Chrome Version 31.0.1650.57 m

Here is an implementation that seems to work (for expanding/shrinking contents..)
assuming that iframe's src is from the same domain and that there are not scripts that resize the iframe's contents once loaded
$(document).ready(function() {
$('#frameID').on('load', function () {
$('#ReportBuild').hide()
$(this).show();
var iframeHeight = $(this.contentDocument.documentElement).outerHeight(true);
$(this).css({ height: iframeHeight + 'px' });
this.contentWindow.onbeforeunload = function () {
$('.tabFrame').hide();
$('#ReportBuild').show();
}
});
});
Demo at http://jsfiddle.net/rq5S5/8/

With help I managed to finally find a solution, suggested examples worked on JSFiddle's but would not work when applied to my issue using ASP.NET controls generated on PostBack.
To handle this, on each of my Child pages I have wrapped the entire content inside a <div></div> and retrieved the height of this element.
Example :
<div id="ReportContent">
<!-- HTML Content -->
</div>
And the jQuery Code :
var iframeHeight = $(this).contents().find('#ReportContent').outerHeight(true);
This now works correctly for my problem in both IE10 and Google Chrome Version 31.0.1650.57 m

How can I get the full height of a web page that uses a master page?

I'm writing a script that creates a popup that dims the screen behind the popup. I'm using JQuery's $("#dim").css("height", $(document).height()); to resize the div element in question, but it doesn't cover the master page area. Is there a way I can get the height of the WHOLE page and not just the child page?
EDIT: The problem may actually lie in the positioning, and not the size, of my div. I have it set to top:0, but maybe I need to move it using javascript?

Give this a shot:
var width = screen.availWidth;
var height = screen.availHeight;

Since .outerHeight() isn't supported for window or document, you'll have to add the padding to the height() yourself.
$("#dim").css( "height", $(document).height() + 2*parseInt($(document).css("padding"),10) );

How can I resize a swf during runtime to have the browser create html scrollbars?

I have a swf with loads text into a Sprite that resizes based on the content put into - I'd like though for the ones that are longer than the page to have the browser use its native scroll bars rather than handle it in actionscript (very much like http://www.nike.com/nikeskateboarding/v3/...)
I did have a look at the stuff nike did but just wasn't able to pull it off. Any idea's?

The trick is to use some simple JavaScript to resize the Flash DOM node:
function resizeFlash( h ) {
// "flash-node-id" is the ID of the embedded Flash movie
document.getElementById("flash-node-id").style.height = h + "px";
}
Which you call from within the Flash movie like this:
ExternalInterface.call("resizeFlash", 400);
You don't actually need to have the JavaScript code externally, you can do it all from Flash if you want to:
ExternalInterface.call(
"function( id, h ) { document.getElementById(id).style.height = h + 'px'; }",
ExternalInterface.objectID,
400
);
The anonymous function is just to be able to pass in the ID and height as parameters instead of concatenating them into the JavaScript string.
I think that the JavaScript is fairly cross-platform. If you want to see a live example look at this site: talkoftheweather.com. It may not look as though it does anything, but it automatically resizes the Flash movie size to accommodate all the news items (it does this just after loading the news, which is done so quickly that you don't notice it happening). The resize forces the browser to show a vertical scroll bar.

I've never done it that way around but I think swffit might be able to pull it off.

I halfway looked at swffit but the height (and width sometimes but mainly height) would be dynamic - swffit let's you declare a maxHeight but that number would be constantly changing...maybe I could figure out how to set it dynamically. A great place for me to start though - thanks!

What I've mostly been using if for is to limit how small you can make a "fullbrowser" flash, and for that it works great.
Happy hacking!
(and don't forget to post your findings here, I might need that too soon ;))

SWFSize
See here for more details.
Intuitsolutions.ca