I've got a form which contains some hidden fields that are only shown depending on the answer to a Yes/No radio button question.
This form is used on multiple external website using an iframe, therefore are on a different domain.
How can I change the height of the iframe depending on if these hidden field are shown or not. The way they are shown/hidden is using jquery show/hide in a separate scripts.js file. E.g
$('#show').click(function(){
$('#additional_fields').show('fast');
});
$('#hide').click(function(){
$('#additional_fields').hide('fast');
});
<div id="additional_fields" style="display:none;"> hidden fields here
</div>
iframe that contains the above:
<iframe id="idIframe" src="http://websites.com/form.php" scrolling="no" height="1000" width="950" border="0"/>
UPDATE
Ive managed to get it to work using the following
$("#idIframe", top.document).css({ height: 1750 });
however, this only works when using the same domain.
you will need to use the context option in order to call up to the frameset.
$('#show').click(function () {
$('#additional_fields').show('fast');
$("iframe",window.document).height(150);
});
$('#hide').click(function () {
$('#additional_fields').hide('fast');
$("iframe",window.document).height(0);
});
The reason for this is by default Jquerys context is set to the document of the current frame, so you need to set the context manually.
Give an ID to your iframe and use the jQuery height function:
$('#show').click(function(){
var newHeight = $("#idIframe").height() + 50;
$("#idIframe").height(newHeight);
$('#additional_fields').show('fast');
});
$('#hide').click(function(){
var newHeight = $("#idIframe").height() - 50;
$("#idIframe").height(newHeight);
$('#additional_fields').hide('fast');
});
Demonstrating how to change the height of the iframe:
http://jsfiddle.net/aZxRn/
$('#show').click(function () {
$('#additional_fields').show('fast');
$("#idIframe").height($("body").height());
});
$('#hide').click(function () {
$('#additional_fields').hide('fast');
$("#idIframe").height(0);
});
The only way, I believe, is to use postMessage (https://developer.mozilla.org/en-US/docs/DOM/window.postMessage) to send the height of the content to the parent window.
The thing is that the parent page would need to listen to the message, so this will work only if you have some control over it.
I've written an example that resizes an iframe while animating it's content. I think you should find your solution in my code:
http://algorhythm.de/tools/resizeable-iframe/
My solution is also only working if you are using the same domain for parent and iframe. It's because of the same origin policy: http://en.wikipedia.org/wiki/Same_origin_policy
Related
I have a searchbar on my index, that updates while I am searching and it add or remove results as you write more text and it narrows down.
The results are then listen inside a DIV located on another page that I access from the index by iFrame on my site.
My problem now is that I want to get the height of the result-div and send it back from "within" the iFrame to the page where the iFrame is located so I can change the height based on the content as it changes.
Ive looked all over and tried many ways. But it all boils down to that: I cant get the height of the result-div-page when I request it from my index page.
Okey. Here is the solution...
<script type="text/javascript">
$(document).ready(function() {
$( "#search-frame" ).on('load', function() {
var search_div = $(this).contents().find("#table-results");
var search_height = search_div.height();
$('#search-frame').css('height', search_height);
});
});
</script>
Consider the following,
<div id="outerDIV">
<div id="innerDIV" style="height: 100%;">
<asp:ContentPlaceHolder... />
</div>
</div>
These DIVs reside in the master page of an asp.net site. I would like to write a function that copies the innerDIV's height and apply it to the outerDIV's height. I can do this normally, like so:
$(document).ready(function () {
$('#outerDIV').height($('#innerDIV').height());
});
but the problem is I only want it to occur at the first load of the page. When the user navigates away to other pages, I don't want the outerDIV to resize again.
How may I accomplish this?
Thanks
From the MDN Docs:
Use a class selector in conjunction with your ID selector.
$(document).ready(function(){
$('#outerDIV.firstpage').height($('#innerDIV.firstpage').height());
}
});
By adding the class='firstpage' selector, you can differentiate between your first page and your other pages, without worrying about cookies or tracking another variable.
Maybe you could do something like this
var applied = 0;/*use it to check if height to outter div has been applied */
$(document).ready(function(){
if(applied == 0){
$('#outerDIV').height($('#innerDIV').height());
applied = 1;
}//this way the height will be applied only once
});
Why don't you use cookies.
$(document).ready(function () {
if(!$.cookie("setHeight"))
{
$('#outerDIV').height($('#innerDIV').height());
$.cookie("setHeight", "1");
}
});
And delete the cookie whenever you want using $.removeCookie("setHeight");
I know, this thing has been asked like 2 trillion times, but i cannot still get done. the iframes are generated dynamically inside the source which I get from external feed.
my jquery is:
$(function(){
$('iframe').each(
function(index, elem) {
elem.setAttribute("width","250");
}
);
});
this code is not being able to set the width of iframe.
and one more thing: I inspected the iframe attributes, and there are NOT editable in browser unlike other css style - which means, my jquery cannot also set it after DOM is ready
what the heck? is there any workaround for this?
$('iframe').each(function(){
$(this).width(250);
});
Docs: http://api.jquery.com/each/ and http://api.jquery.com/width/#width-value
Use .attr, not .setAttribute.
Works for me with
$('iframe').each(function(){
$(this).width( w );
});
http://jsfiddle.net/8e1gz475/
There is a very simple way of assigning "width or height" to any element at run-time, and that's using ".width() and .height()" method of jQuery.
Refer:
http://api.jquery.com/width/
http://api.jquery.com/height/
Here is an example:
<script type="text/javascript">
$(document).ready(function () {
$("iframe").width(500);
$("iframe").height(500);
});
</script>
Example : Regular iframe without updating height and width at run-time.
Example: When you update height and width at run-time.
Here is another stackoverflow question for iframe width where you can find good explanation in the answer if you are using multiple iframes :
Change iframe width and height using jQuery?
try:
$(function(){
$('iframe').each(
function(index, elem) {
elem.css({ "width":"250px !important" });
}
);
});
i have a script that cuts a part of the iframe( iframe without headers ) and shows it. my problem is if i make actions within this iframe, the iframe reloads but is not applying the jquery filtering to give me only that part but instad gives me all the page with headers so i'm assuming that script is not working when it reload the iframe without the window reload of the main page that has the iframe:
<iframe class="test" width="100%" height="100%" src="/message.html?msjId=260" style="height:100%;width:100%;">
$(window).load(function () {
$('.test').each(function(){
var filteredContents1 = $(this).contents().find('.div_iframe').html();
$(this).contents().find('body').html(filteredContents1);
});
});
any solutions please ?
I think you need to add load events for frames as well. Add the load event in document.ready function as given below. If it works you may be able to omit window load event you already have for filtering frames data.
$(document).ready(function(){
$('.test').load(function () {
var filteredContents1 = $('#frame1').contents().find('#divChild').html();
$('#frame1').contents().find('body').html(filteredContents1);
});
});
Update on request of questioner
$(document).ready(function(){
$('.test').load(function () {
$('#frame1, #frame2, #frame3').each(function(){
var filteredContents1 = $(this).contents().find('#divChild').html();
$(this).contents().find('body').html(filteredContents1);
});
});
});
.
I'm using an iframe to display a website next to a form. I want to update certain content within that iframe live based upon the value of the various input fields.
This is what I'm trying to do (working outside of an iframe): http://jsfiddle.net/YkKUS/
The textarea will be outside of the iframe and the content that'll be updated will be inside the iframe.
Here is my code adapted to work with my iframe:
$('.liveDemoFrame').load( function(){ // load the iframe
$(this.contentDocument).find('h1').html($('textarea').val());
$('textarea').keyup(function() {
$(this.contentDocument).find('h1').html($(this).val()); // this line is screwing something up?!?
});
});
The 5th line is causing me some problems. The iframe DOES actually update successfully with the content of my textarea but only when I refresh the page. It's not updating it live & on-the-fly which is the only reason I'm doing this!
Thanks!
I did this in the parent page and it seemed to work:
$(document).ready(function(){
$('#textarea').bind('keyup', function() {
var iframedoc = $('#iframe').get(0).contentDocument;
$(iframedoc).find('h1').html($(this).val());
});
});
There might be some kinks with jQuery, or you might be doing it incorrectly. Either way, it could be easiest to actually run half of your code within the iframe; then you can call iframe.contentWindow.getHtml(), or iframe.contentWindow.setHtml(), if you can. Also IIRC, the contentDocument was not standard either; some browsers require contentWindow.document or similar.
However, the main culprit would be this:
$('.liveDemoFrame').load( function(){
$(this.contentDocument).find('h1').html($('textarea').val());
$('textarea').keyup(function() {
// here this refers to textarea dom element, not iframe
$(this.contentDocument).find('h1').html($(this).val());
});
});
Fix could be like
$('.liveDemoFrame').load( function(){
var iframeDocument = $(this.contentDocument);
iframeDocument.find('h1').html($('textarea').val());
$('textarea').keyup(function() {
// here this refers to textarea dom element, not iframe
iframeDocument.find('h1').html($(this).val());
});
});
You can't do stuff in the iframe from outside of it, that would be a massive security hole