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 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2002
    Location
    Virginia
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    open document via link within div tag?

    I have a series of links in one page that I would like to have open up various documents within a table cell or location prescribed div tag ... can somebody provide me with example code on how to accomplish this?

    your help is greatly appreciated!

    Des

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there des55,

    Here is something that uses innerHTML...
    it may suit your purposes
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta content="mshtml 6.00.2800.1264" name="generator" />
    <title>Inner HTML</title>
    
    <style type="text/css">
     /*<![CDATA[*/
    body
       { 
        background-color:#aaaaff; 
       }
    #dvone
       { 
        position:absolute;top:5%; left:2%;
       }
    #dvtwo
       { 
        position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;
       }
    button
       { 
        width:100px; border: solid 2px #000000; margin:2px; 
       }
    #tbltone
       { 
        border: solid 1px #000000; background-color:#ffffff; 
       }
    #information
       {
        width:200px; height:200px; border: solid 1px #000000; text-align:center; 
       }
    #dvthree
       { 
        width:200px; height:200px; padding:10px; overflow:auto; 
       }
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    function clearcell()
    {
    document.getElementById("information").innerHTML =
    '<div id="dvthree">'+
    'This cell opens onload.<br /> If required you can leave this blank .'+
    ' As you will see scrollbars will appear automatically.</div>';
    }
    function first_text()
    {
    document.getElementById("information").innerHTML =
    '<div id="dvthree">'+
    'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'+
    ' Praesent blandit venenatis purus. Integer massa libero,'+
    ' vehicula id, consequat sed, tincidunt nec, purus.'+
    ' Class aptent taciti sociosqu ad litora torquent per conubia nostra,'+
    ' per inceptos hymenaeos. Suspendisse potenti. Class aptent taciti '+
    'sociosqu ad litora torquent per conubia nostra, per inceptos '+
    'hymenaeos. Sed cursus feugiat mauris.'+
    ' <br /><a href="#"onclick="clearcell()">close</a></div>';
    }
    function second_text()
    {
    document.getElementById("information").innerHTML =
    '<div id="dvthree">'+
    'Here is some more text.<br />'+
    '<a href="#"onclick="clearcell()">close</a></div>';
    }
    function third_text()
    {
    document.getElementById("information").innerHTML =
    '<div id="dvthree">'+
    'You can also use images.<br />This is an image<br />'+
    '<img src="http://mysite.freeserve.com/achelous/anim2.gif"alt=""/><br />'+
    '<a href="#"onclick="clearcell()">close</a></div>';
    }
    function fourth_text()
    {
    document.getElementById("information").innerHTML =
    '<div id="dvthree">'+
    '<object type="application/x-shockwave-flash" data="http://mysite.freeserve.com/achelous/circle.swf" width="180" height="155">'+
    '<param name="movie" value="http://mysite.freeserve.com/achelous/circle.swf" /></object><br />'+
    '<a href="#"onclick="clearcell()">close</a></div>';
    }
    //]]>
    </script>
    </head>
    
    <body onload="clearcell();">
    
    <div id="dvone">
    <button onmouseover="this.style.backgroundColor='#ffffff'"
    onmouseout="this.style.backgroundColor='#cccccc'" 
    onclick="first_text()"> Lorem </button><br />
    <button  onmouseover="this.style.backgroundColor='#ffffff'"
    onmouseout="this.style.backgroundColor='#cccccc'"
    onclick="second_text()" > More text </button><br />
    <button onmouseover="this.style.backgroundColor='#ffffff'"
    onmouseout="this.style.backgroundColor='#cccccc'" 
    onclick="third_text()"  > An image </button><br />
    <button onmouseover="this.style.backgroundColor='#ffffff'"
    onmouseout="this.style.backgroundColor='#cccccc'" 
    onclick="fourth_text()"  > A flash </button>
    </div>
    
    <div id="dvtwo">
    <table id="tbltone"><tr>
    <td id="information"></td>
    </tr></table>
    </div>
    
    </body>
    </html>
    cthead


  •  

    Posting Permissions

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