View Full Version : innerHTML won't resize

03-02-2012, 10:22 AM
Hello everyone,

My problem consist in that I want to avoid re-loading the whole page, and only re-load the portion of the website that needs to be.
Similar to listed below;

website Banner (Solid)
Menu bar (Solid)
Div content (Changeable)

The main problem is that no matter what I do, I can't make the innerHTML cover the whole <div> </div>
It remains the same very small size, no matter what I put within the div. Far from its full size potential (plenty of space left).

Head script Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript">
// written by: Coothead
function updateObjectIframe(which){
document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';


<link rel="stylesheet" type="text/css" href="main_stylesheet.css" media="screen, projection" />


Here is the html portion.

<div id="one" style="background-color:#C0C0C0;position:relative;height:2000px;width:800px;float:left;"></div>

Here is the link placed elswhere on the website (The solid menu bar)

<li><a href="http://www.google.com" onclick="updateObjectIframe(this); return false;">Forums</a></li>

It's not Google that I want to use, however a PHPBB forum.
But I found that the same problem occurs on no matter what I put in this innerhtml, the javascript gets limited to the same little box in the upper left corner of my div.
Can't change size, no matter what I tried to do.

I'm suspecting it has something to do with CSS, however I spended a whole night (and now day) trying to work this out, I really don't get much further.
I realize I should spend a couple of more nights when new to JS, however this kind script I consider like a foundation to a house, it's important before moving on with learning, maybe I'm wrong though.

Anyone who can help with this issue?
Would be very much appreciated, Thank you!

03-02-2012, 02:03 PM
So I guess many think this is an inappropriate question since many view but don't answer?
Can say I'm exhausted with working this this issue now, having university and my own company to work on as well.. Pulling an all nighter + day to trying to make this resize work I would consider doing my home work (The Must read thread), and limiting my question.

Anything that can help me in the right direction is helpful, I'm not asking for a guide or explanation or code correction.
Just a quick hints in the right direction, would be very, very helpful.

Thank you :)

03-02-2012, 02:56 PM
I think your code is just confusing. I've been around Javascript for quite some time (almost 16 years) and I have NEVER seen someone using an <object> to display HTML. Why do you want to do that? What do you want to achieve? Why do you have the word "Iframe" in your function name?

03-02-2012, 04:12 PM
heh, might be why it's troublesome and won't work probably...
Nevertheless, it does work, I just can't change size on it.

What I want to archive, and I don't mind how, is to load new HTML code within an already loaded HTML page.
Reasons - To reduce load time, avoid having to copy HTML code to each sub-page every time I change something fundamental on the website, like the banner / menu and much more.

It does work, I can link all my HTML pages just fine.
For this leap, it does exactly what it's supposed to do, making it easier and reduced load time.

However the problem is that I can't change the "window" size on the loaded HTML.
For example, if I load my PHPBB forum, or picture gallery using the scripts above, the window frame won't get bigger than 150px 60px or so about estimated.

It's absolutely tiny, I can't increase it.
As you suggested there could be something gravely wrong with the code, even if it seem to be close to work perfectly, there might be something gravely wrong?

This was the best solution I could find, alternative ideas are welcome too, as long I can load an another HTML page within index.html

Then it's perfect :)

03-02-2012, 04:45 PM
err, seems like some encourage to use iframes, and others do use div combined with javascript.

So if this works, it's pretty much what I need.

<iframe name="Jake">

<a href="index2.html" target="Jake">

However why do some people recommand to use Javascript with <div> ?
Is it better in some situations? Like for example to load large pages, like a forum for example?

So in short, go for HTML iframe solution?
Go for the Javascript <div> solution?
Third better solution? :confused:

03-03-2012, 11:08 AM
One simple answer:

If you want to show an external page including all of the styles and also executing the included Javascript, then you will most probably have to take iframe

If you only want to have some dynamic HTML that you want to embed into your current page and apply the styles of the current page to it and only run Javascript already available on your current page, you should go with the <div> solution (or any other element).