CODEWITHSUNDEEP
javascriptiframeresize
Pouya Compton
Pouya Compton

Reputation: 3

Easy way to Resize an Iframe with javascript

my case is a little different than the previous ones that have been posted so far.

I want my iframe to resize using a function with javascript. The source for my iframe so far looks like this

<iframe id='bframe' onload='base=history.length;gothere(history.length);' name='bframe' src='http://source.com' style='border: 0pt none ; left: -794px; top: -166px; position: absolute; width: 1600px; height: 799px;' scrolling='no'></iframe></div>

The reason for the "onload" stuff is because I want the iframe to resize when an action within the iframe has been done! The only thing I need now is a function in javascript that allows me to change the width and height as well as top and left coordinates of the iframe.

That would be all, help is really appreciated!!!

Thanks

EDIT:

--

THANKS for the response but i seemingly can't get it to work:

Hey, thanks for your response. I put my code like this into the part of my page

    function resizeme() {
    document.getElementById('bframe').onload = function() {
    this.style.width = '1230px';
    this.style.height = '1230px';
    base = history.length;
    gothere(history.length);
}
}

and I replaced the part in my code where it redirects to another page after the iframe content has changed to "resizeme()" (the redirection worked so the code must be correct)

However, nothing really changed - What is wrong?

Upvotes: 0

Views: 452

Answers (2)

Pouya Compton
Pouya Compton

Reputation: 3

http://jsfiddle.net/TmUfE/

Here we go! The source is a bit messy I didn't code it and I'm not an expert in this. However it should do this:

Whenever a link is pressed (more like a submit button in the iframe), it should redirect the whole page to something else. That has been the original source and it worked for my "special" site which I didn't put in the jsfiddle so the source itself is working for that matter!

I wanted to modify it so that when the submit within the iframed is clicked, it resizes and repositions the iframe (to crop another part of the second page and also have a larger iframe shown the content of it).

I found that this part

<div style='overflow: hidden; margin-top:-5px; width: 403px; height: 313px; position: relative;' id='odiv'>

was also doing its part when it comes to resizing it (thats why it didnt work in the first place).

So the first task would be: To resize the iframe in the iframes source with the width and height and such + the part I just entered here as well (dont know how to figure that out and how to resize them via code).

I would also be paying as some sort of "thank you" / donate to someone helpful because I really cannot get it done myself no matter how hard I try.

Upvotes: 0

bjb568
bjb568

Reputation: 11498

Same as all (block-level) elements:

element.style.width = '123px';
element.style.height = '123px';

In this case:

<iframe id='bframe' onload="this.style.width='123px';this.style.height='123px';base=history.length;gothere(history.length);" name='bframe' src='http://source.com' style='border: 0pt none ; left: -794px; top: -166px; position: absolute; width: 1600px; height: 799px;' scrolling='no'></iframe></div>

You should really put it in a function, tho:

document.getElementById('bframe').onload = function() {
    this.style.width = '123px';
    this.style.height = '123px';
    base = history.length;
    gothere(history.length);
}

In your specific case,

function resizeme() {
    document.getElementById('bframe').style.width = '1230px';
    document.getElementById('bframe').style.height = '1230px';
}
document.getElementById('bframe').onload = function() {
    resizeme();
    base = history.length;
    gothere(history.length);
}

At least that's what I think you're trying to do. It defines a resizeme function that you can call whenever you like, and also gives the iframe an onload function to call resizeme and do other stuff (base and gothere).

Upvotes: 1

Related Questions