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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    opening up a webpage within a div tag

    Hello all,

    I'm trying to open up an internal link from my leftnav div into my content div. I used the following JS code from my book but im not quite sure how to make it all work.

    Any thoughts appreciated.
    Thank you



    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">
        <head>
            
            <!--header script starts here -->
            <script type="text/javascript">
                
                window.onload = initlinks;
    
                function initlinks() {
                    for (var i = 0; i < document.links.length; i++) {
                        document.links[i].onclick = setContent;
                    }
    
                }
    
                function setContent() {
                    document.getElementById("content").contentWindow.document.location.href = this.href;
                    return false;
    
                }
            
            
            </script>
            <style type="text/css"> 
            
                html, body
                {
                    margin: 0;
                    padding: 0;
                }
                
                #container
                {
                width: 90%;
                margin: 10px auto;
                background-color: #fff;
                color: #333;
                border: 1px solid gray;
                line-height: 130%;
                }
                
                #header 
                {   
                    height: 60px;
                    background-color: #ddd;
                    border-bottom: 1px solid gray;
                }
                
                #leftnav
                {
                    float: left;
                    width: 160px;
                    height: 380px;
                    margin: 0;
                    padding: 1em;
                }
                
                #content
                {   
                    margin-left: 200px;
                    border-left: 1px solid gray;
                    padding: 1em;          
                    height: 380px;
                }
            
            </style>
            
            <title>JavaScript</title>
        </head>
    
        <body>
            <div id="container">
            
            <div id="header">
            <h1>JavaScript</h1>
            </div>
            <div id="leftnav">
             
             <p>
             <a href='#'>Load Content</a> <br /><br />
             <a href='#'>Load Content</a> <br /><br />
             <a href='#'>Load Content</a> <br /><br />
             <a href='#'>Load Content</a> <br /><br />
             <a href='#'>Load Content</a> <br /><br />
             </p>
             </div>
            
            <!--Div to load content into-->
            <div  id="content">
            <h2>Subheading</h2>
            <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel  erat volutpat.
            </p>
            </div>
          </div>
        </body>
    </html>
    Last edited by lucromick; 09-09-2011 at 09:15 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,733
    Thanks
    80
    Thanked 4,516 Times in 4,480 Posts
    This kind of reference:
    Code:
    document.getElementById("content").contentWindow.document.location.href = this.href;
    only applies to an <iframe>.

    Only frames and iframes have a contentWindow property.

    A simple <div> can't hold a full document and doesn't have a location.href property.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    This kind of reference:
    Code:
    document.getElementById("content").contentWindow.document.location.href = this.href;
    only applies to an <iframe>.

    Only frames and iframes have a contentWindow property.

    A simple <div> can't hold a full document and doesn't have a location.href property.
    Thank you sir,

    Does the JavaScript look okay? I guess all I have to do is set up an iframe..

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,733
    Thanks
    80
    Thanked 4,516 Times in 4,480 Posts
    Assuming you replace the href="#" with a real URL, then I think so.

    At least worth trying.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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