www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 29

Thread: load HTML into <div>

  1. #1
    Join Date
    Jul 2005
    Posts
    4

    Smile load HTML into <div>

    is it possible to have a link load a HTML page into a <div> ?

    if that doesn't make sense, its be cause i really don't know what i am doing (haha)

    thanks to anyone who can help me out ...
    -dan n.

  2. #2
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Javascript can't read files so the entire code to be loaded would need to be within the Javascript itself.
    Stephen

  3. #3
    Join Date
    Jul 2005
    Posts
    4
    Quote Originally Posted by felgall
    Javascript can't read files so the entire code to be loaded would need to be within the Javascript itself.
    ok, i guess i will start there ...

    thanks

  4. #4
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    Check out javascript's 'innerHTML'

  5. #5
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Quote Originally Posted by Nedals
    Check out javascript's 'innerHTML'
    That's the right idea. Use an IFRAME to append to the DIV.

    Untested:(note I write flawless javascript code 95% of the time)
    Code:
    <div id="frameContainer"></div>
    <script type="text/javascript">
    onload=function(){
    var el=document.getElementById("frameContainer")
    el.innerHTML="<iframe src=\"http://www.yahoo.com\"></iframe>"
    }
    </script>

  6. #6
    Join Date
    Jul 2004
    Posts
    986
    Yes, it is possible to load a page into a division without the use of an iframe...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>mouseover image position</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body
       {
        background-color:#aaaaff;
       }
    #one
       {
        position:absolute;
        left:50%;
        top:50%;
        margin:-150px 0 0 -250px;
       }
    object
       {
        width:500px; 
        height:300px; 
        border:solid 1px #000000;
       }
     /*//]]>*/
    </style>
    
    <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>
    
    </head>
    <body>
    
    <div id="one">
    <object id="foo" name="foo" type="text/html" data="http://www.w3schools.com/"></object>
    </div>
    <div>
    <a href="http://www.google.com" onclick="updateObjectIframe(this); return false;">this is an object test not an iframe test</a>
    </div>
    
    </body>
    </html>
    .....Willy

  7. #7
    Join Date
    Jul 2005
    Posts
    4
    Quote Originally Posted by Willy Duitt
    Yes, it is possible to load a page into a division without the use of an iframe...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>mouseover image position</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body
       {
        background-color:#aaaaff;
       }
    #one
       {
        position:absolute;
        left:50%;
        top:50%;
        margin:-150px 0 0 -250px;
       }
    object
       {
        width:500px; 
        height:300px; 
        border:solid 1px #000000;
       }
     /*//]]>*/
    </style>
    
    <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>
    
    </head>
    <body>
    
    <div id="one">
    <object id="foo" name="foo" type="text/html" data="http://www.w3schools.com/"></object>
    </div>
    <div>
    <a href="http://www.google.com" onclick="updateObjectIframe(this); return false;">this is an object test not an iframe test</a>
    </div>
    
    </body>
    </html>
    .....Willy
    Willy, this works perfect ...
    thanks you .. but i ran into one problem, i don't know if it is possible to get around,
    my page also has a flash header, so when i alter the <object> tag
    my flash piece is altered ...
    if this can't be avoided, i'll have to think of something different ..
    thanks again,
    dan

  8. #8
    Join Date
    Jul 2004
    Location
    Vancouver, BC
    Posts
    66
    I already posted this HERE
    PHP Code:
    function processAjax(url) {
        

        if (
    window.XMLHttpRequest) { // Non-IE browsers
          
    req = new XMLHttpRequest();
          
    req.onreadystatechange targetDiv;
          try {
            
    req.open("GET"urltrue);
          } catch (
    e) {
            
    alert(e);
          }
          
    req.send(null);
        } else if (
    window.ActiveXObject) { // IE
          
    req = new ActiveXObject("Microsoft.XMLHTTP");
          if (
    req) {
            
    req.onreadystatechange targetDiv;
            
    req.open("GET"urltrue);
            
    req.send();

          }
        }
    }

    function 
    targetDiv() {
        if (
    req.readyState == 4) { // Complete
              
    if (req.status == 200) { // OK response
                  
    document.getElementById("MyDivName").innerHTML req.responseText;
              } else {
                
    alert("Problem: " req.statusText);
              }
        }

    Put the above in the header, then call it with the following:
    PHP Code:
    <a href="javascript:processAjax('www.yahoo.com');">CLICK ME</a>
    <
    div id="myDivName"></div
    Should work!
    this is where I work
    Web Developer

  9. #9
    Join Date
    Feb 2007
    Posts
    2
    I tried the ajax method and it won't permit any urls that don't exist on the same server as the page the script is on.

    I worked around this by attaching the requested url as a variable to the url of a php script that just collects the source and returns it (echo file_get_contents($_GET['url']); ).

    Now it works with any url local or remote

  10. #10
    Join Date
    Jan 2005
    Posts
    3,067
    Quote Originally Posted by jersey
    Willy, this works perfect ...
    thanks you .. but i ran into one problem, i don't know if it is possible to get around,
    my page also has a flash header, so when i alter the <object> tag
    my flash piece is altered ...
    if this can't be avoided, i'll have to think of something different ..
    thanks again,
    dan
    Give your flash an ID or a class and then use CSS to set the style for it. The CSS given works for all objects, but if you give your flash object a class then you can do:

    object.myclass
    or
    .myclass

    or if you give it an ID then simply:

    #myobject

    where myclass and myobject are replaced with the identifiers you choose.

  11. #11
    Join Date
    Feb 2007
    Posts
    1
    Che posted some great code for placing html files dynamically into a DIV tag. I was very excited to find this script. I implemented the script on one of my sites and it worked great. Unfortunately, when I went to make a google sitemap none of the links would show. I thought, great, I can't use this for anything if it is not SEF friendly. Well, I think I found a way to make this work with Search Engines. I have included Che's great code work below with just a few small modifications (one in the script and one in the URL used to reference the script). With these modifications I was able to easily generate a google sitemap xml file.

    PHP Code:
    function processAjax(url) {
        

        if (
    window.XMLHttpRequest) { // Non-IE browsers
          
    req = new XMLHttpRequest();
          
    req.onreadystatechange targetDiv;
          try {
            
    req.open("GET"urltrue);
          } catch (
    e) {
            
    alert(e);
          }
          
    req.send(null);
        } else if (
    window.ActiveXObject) { // IE
          
    req = new ActiveXObject("Microsoft.XMLHTTP");
          if (
    req) {
            
    req.onreadystatechange targetDiv;
            
    req.open("GET"urltrue);
            
    req.send();

          }
        }
      return 
    false;
    }

    function 
    targetDiv() {
        if (
    req.readyState == 4) { // Complete
              
    if (req.status == 200) { // OK response
                  
    document.getElementById("MyDivName").innerHTML req.responseText;
              } else {
                
    alert("Problem: " req.statusText);
              }
        }

    Put the above in the header, then call it with the following:
    PHP Code:
    <a onclick="return processAjax(this.href)"  href="/internal-link.html">CLICK ME</a>
    <
    div id="myDivName"></div
    Works for me, but any suggestions are welcome.

  12. #12
    Join Date
    Apr 2007
    Posts
    44
    I could not get this working,

    all I get is this alert: "Problem: OK"

    ??

  13. #13
    Join Date
    Jan 2008
    Posts
    2
    Quote Originally Posted by Che
    I already posted this HERE
    PHP Code:
    function processAjax(url) {
        

        if (
    window.XMLHttpRequest) { // Non-IE browsers
          
    req = new XMLHttpRequest();
          
    req.onreadystatechange targetDiv;
          try {
            
    req.open("GET"urltrue);
          } catch (
    e) {
            
    alert(e);
          }
          
    req.send(null);
        } else if (
    window.ActiveXObject) { // IE
          
    req = new ActiveXObject("Microsoft.XMLHTTP");
          if (
    req) {
            
    req.onreadystatechange targetDiv;
            
    req.open("GET"urltrue);
            
    req.send();

          }
        }
    }

    function 
    targetDiv() {
        if (
    req.readyState == 4) { // Complete
              
    if (req.status == 200) { // OK response
                  
    document.getElementById("MyDivName").innerHTML req.responseText;
              } else {
                
    alert("Problem: " req.statusText);
              }
        }

    Put the above in the header, then call it with the following:
    PHP Code:
    <a href="javascript:processAjax('www.yahoo.com');">CLICK ME</a>
    <
    div id="myDivName"></div
    Should work!
    hi Che - i used your script and have gotten it to work but i still have the problem of the url that is loaded into the div seems to be losing its css styling, its loading into the bottom of the div and the url i'm refering to is a spry sliding panes which also is not being loaded. i'm just seeing the text. any idea of how to get this resolved?
    here's the page: http://www.marshall-legacy.org/about...s22test22.html

    --->on the left menu the "recent news" link is the one in
    question.
    --->you can see the page that i'd like loaded and what its supposed
    to look like by clicking on the "where were working" link

    ALSO --- is this the best way to approach this? Any thoughts,
    suggestions??

    thanks in advance for any help at all!!! i need it.

  14. #14
    Join Date
    Jan 2008
    Posts
    2
    Quote Originally Posted by Che
    I already posted this HERE
    PHP Code:
    function processAjax(url) {
        

        if (
    window.XMLHttpRequest) { // Non-IE browsers
          
    req = new XMLHttpRequest();
          
    req.onreadystatechange targetDiv;
          try {
            
    req.open("GET"urltrue);
          } catch (
    e) {
            
    alert(e);
          }
          
    req.send(null);
        } else if (
    window.ActiveXObject) { // IE
          
    req = new ActiveXObject("Microsoft.XMLHTTP");
          if (
    req) {
            
    req.onreadystatechange targetDiv;
            
    req.open("GET"urltrue);
            
    req.send();

          }
        }
    }

    function 
    targetDiv() {
        if (
    req.readyState == 4) { // Complete
              
    if (req.status == 200) { // OK response
                  
    document.getElementById("MyDivName").innerHTML req.responseText;
              } else {
                
    alert("Problem: " req.statusText);
              }
        }

    Put the above in the header, then call it with the following:
    PHP Code:
    <a href="javascript:processAjax('www.yahoo.com');">CLICK ME</a>
    <
    div id="myDivName"></div
    Should work!
    hi Che - i used your script and have gotten it to work but i still have the problem of the url that is loaded into the div seems to be losing its css styling, its loading into the bottom of the div and the url i'm refering to is a spry sliding panes which also is not being loaded. i'm just seeing the text. any idea of how to get this resolved?
    here's the page: http://www.marshall-legacy.org/about...s22test22.html

    --->on the left menu the "recent news" link is the one in
    question.
    --->you can see the page that i'd like loaded and what its supposed
    to look like by clicking on the "where were working" link

    ALSO --- is this the best way to approach this? Any thoughts,
    suggestions??

    thanks in advance for any help at all!!! i need it.

  15. #15
    Join Date
    Oct 2008
    Posts
    4

    Works fine IE 7. not on Firefox 3

    I used this code with no problem on IE 7. It inserts an html page fine.

    But when I click in Firefox, nothing happens. Any ideas?

    Thanks

    Roger

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles