How To Resize Only 1 Iframe Height Based On Id

[kalster]

Hi. I have many iframes on a page. This script dynamically resizes the height of each iframes content. I would like one iframe to not dynamically resize its iframe content height.

 

i have tried adding the id code but it is not working. eg, document.getElementById("iframe").style.height=height+"px"

 

<script type='text/javascript'>
$(function(){
var iFrames = $('iframe');
function iResize() {

for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentwindow.document.body.offsetHeight + 'px';}
}

if ($.browser.safari || $.browser.opera) {

iFrames.load(function(){
setTimeout(iResize, 0);
});

for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}

} else {
iFrames.load(function() {
this.style.height = this.contentwindow.document.body.offsetHeight + 'px';
});
}

});
</script>

[codefossa]

You have JQuery so all you have to do is $("#iframeid").css("height", height); as long as var height is numeric.

[kalster]

the $("#iframe") without the .css property works. the problem now is that the code will only resize an iframe with an id of "iframe". i have many iframes on the page and i only want one iframe to not resize. all other iframes have an id of "iframe" now to dynamically resize those iframes. is it possible that i could have a number beside the iframe id, eg, something like $("#iframe#")

[haku]

Using an ID more than one time is invalid code, so you should fix this. At the least, you should change the ID to a class, so that all iframes have a class of .iframe (classes can be reused). Then you can give each iframe a custom ID.

[kalster]

hi haku. are you saying that i am able to solve this problem by using a class, or it is better to just copy and paste the above code and just change the id?

[haku]

I'm saying that since you are re-using IDs in your HTML, your HTML is invalid. IDs can only be used once. Since you want to re-use them, you should be using classes instead of IDs in your HTML.

 

Then, you can give each iframe a unique ID. For example:

<iframe id="iframe1" class="some_class">
<iframe id="iframe2" class="some_class">

As you can see, I've re-used the class, and given a unique ID to each iframe. Then you can target a specific iframe in your javascript using it's ID, for example #iframe1 or #iframe2.

[kalster]

yes haku now i understand. the problem is that i am a php programmer and not a JQuery or javascript programmer. could someone please give me an example on how i could get this code working using class?

[haku]

If you change your HTML as I indicated, then changing this line:

 

var iFrames = $('iframe');

 

to this:

 

var iFrames = $('#iframe1'); 

 

should do the trick.

[kalster]

i did some fast programming and i got it working now. thank a bunch

[kalster]

well it work all the way to iframe6, then it stopped working. for example, instead of making a complicated class, i copied and pasted the iframe code as below. now when there is 6 pastes, the code does not work for some reason. it seems that i cannot have 6 iframe id at the same time on one page. below is my code. is jquery limited to how many call can be made on a single page?

 

<script type='text/javascript'>
$(function(){
var iFrames = $("#iframe1");
function iResize() {

for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentwindow.document.body.offsetHeight + 'px';}
}

if ($.browser.safari || $.browser.opera) {

iFrames.load(function(){
setTimeout(iResize, 0);
});

for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}

} else {
iFrames.load(function() {
this.style.height = this.contentwindow.document.body.offsetHeight + 'px';
});
}

});
</script>
<script type='text/javascript'>
$(function(){
var iFrames = $("#iframe2");
function iResize() {

for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentwindow.document.body.offsetHeight + 'px';}
}

if ($.browser.safari || $.browser.opera) {

iFrames.load(function(){
setTimeout(iResize, 0);
});

for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}

} else {
iFrames.load(function() {
this.style.height = this.contentwindow.document.body.offsetHeight + 'px';
});
}

});
</script>

Edited October 31, 2012 by kalster

[kalster]

solved, with this code... <?php ob_start(); ?>