Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    innerHTML won't resize

    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:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    html>
    <
    head>

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

    </script>

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

    </head> 
    Here is the html portion.
    PHP Code:
    <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)
    PHP Code:
    <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!
    Last edited by Anix-09; 03-02-2012 at 12:13 PM.

  • #2
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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?

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    PHP Code:
    <iframe name="Jake">
    </
    iframe
    PHP Code:
    <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?
    or
    Go for the Javascript <div> solution?
    or
    Third better solution?

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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).


  •  

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •