Member Avatar for sara5454

this is my code (html) i dont know how can i open the page in div , i try with iframe but is failed :/ plz help me!

<html>
<head>
    <title>Template</title>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
    <div class="PageBackgroundGradient"></div>
    <div class="Main">
        <div class="Sheet">
            <div class="Sheet-tl"></div>
            <div class="Sheet-tr"></div>
            <div class="Sheet-bl"></div>
            <div class="Sheet-br"></div>
            <div class="Sheet-tc"></div>
            <div class="Sheet-bc"></div>
            <div class="Sheet-cl"></div>
            <div class="Sheet-cr"></div>
            <div class="Sheet-cc"></div>
            <div class="Sheet-body">
                <div class="nav">
                    <div class="l"></div>
                    <div class="r"></div>
                    <ul class="artmenu">
                        <li><a href="#" class=" active"><span class="l"></span><span class="r"></span><span class="t">Home</span></a></li>
                        <li><a href="phys.html" ><span class="l"></span><span class="r"></span><span class="t">Physically challenged</span></a>
              </li>
                        <li><a href="adap.html"><span class="l"></span><span class="r"></span><span class="t">Adaptive computer devices</span></a></li>
                        <li><a href="ab.html" ><span class="l"></span><span class="r"></span><span class="t">Abilities</span></a>
                    </li>
                    </ul>
                </div>
                <div class="Header">
                    <div class="Header-jpeg"></div>
                    <div class="logo">
                        <h1 id="name-text" class="logo-name"><a href="#">Adaptive computer devices</a></h1>
                        <div id="slogan-text" class="logo-text">assistive technology computer input/output devices for those with a disability disabled</div>
                    </div>
                </div>
                <div class="contentLayout">
               <div class="content">
                        <div class="Post">
                            <div class="Post-body">
                        <div class="Post-inner">
                            <h2 class="PostHeaderIcon-wrapper">Introduction</h2>
                            <div class="PostContent">
                                <p><img class="article" src="images/img1.jpg" alt="an image" style="float: left" /></p>
                              <p>&nbsp; </p>
                                <div>
                                  <div>Various computer devices for the physically challenged have made their life a lot easier, helping them to face the world against all odds. It wouldn't be surprising to know that many among us are not even aware of these computer devices, which have shown a new ray of hope for millions around the world.</div>
                              </div>
                                <br />
                                <p>Until a few years ago, being physically challenged was a curse that made life miserable for the individual, by making him dependent on others for basic survival. But things have changed today, thanks to significant advancements achieved in various sciences. Powered with some of the technological marvels of recent times, even physically challenged individuals have become successful in carving a niche for themselves, thus becoming independent against all odds. The world today is largely dependent on computers, therefore not being aware of the tricks of this trade is bound to make a person feel left out. This was the case with all the disabled people until computer devices for the physically challenged were introduced one by one over the last decade.</p>
                    </div>
                            <div class="cleared"></div>
                        </div>
                            </div>
                        </div>
                        <div class="Post">
                            <div class="Post-body">
                          </div>
                        </div>
                    </div>
                </div>
                <div class="cleared"></div><div class="Footer">
                    <div class="Footer-inner">
                        <div class="Footer-text">
                            <p><a href="#">Contact Us</a> | <a href="#">Terms of Use</a> | <a href="#">Trademarks</a>
                                | <a href="#">Privacy Statement</a><br />
                          Copyright &copy;2012 ---. All Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cleared"></div>
        <p class="page-footer">&nbsp;</p>
    </div>
</body>
</html>
  • 3 Contributors
  • 6 Replies
  • 383 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for JorgeM

So you want to for this page to be "inserted" into another page? You should be able to do this easily with an iframe. The iframe element's syntax is as follows: <iframe src="somepage.htm" ></iframe>

iframe attributes:

  • src:
  • height:
  • width:
  • name: (deprecated)
  • id:
  • longdesc:
  • frameborder:
  • marginwidth:
  • marginheight:
  • scrolling:
  • align: (deprecated)
  • vspace:
  • hspace:

What happened when you tried to use the iframe element?

Member Avatar for sara5454

when i tried to use the iframe element the page open too small when i change the height and the width nothing happened

Member Avatar for sara5454

there's no other solution ? plz :/

Member Avatar for JorgeM

you can also use JavaScript and/or AJAX to load another page within a div. However, i suggested the iframe as a first option because its an easy solution to implement.

There is another thread on this forum that talks about some additional solutions.
http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/142921/how-to-load-a-page-in-a-div-tag

If you can elobarate on exactly what you are trying to do, you may get some additional recommendations and suggestions...

Member Avatar for sara5454

thank youuuuuuuuuuuuuuuuuuu :)

Member Avatar for almostbob

will make the iframe the height/width of the window

<script type="text/javascript">
function sizer() { 
    var viewportheight;
    if (typeof window.innerWidth != 'undefined') { 
        viewportheight = window.innerHeight }
    elseif (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { 
        viewportheight = document.documentElement.clientHeight }
    else { 
        viewportheight = document.getElementsByTagName('body')[0].clientHeight }
    document.getElementById('extern').style.height=viewportheight + 'px'; }
document.onresize = sizer(); </script>
<!--[if IE]>
<script type='text/javascript'>window.onresize=sizer();</script>
<![endif]-->
<title>bla</title>
</head>
<body onload='sizer();'>
<iframe id='extern' frameborder='0' width='100%' height='200px' src='HREF'>loading frame</iframe>

The page will still flow, the iframe will still have scroll bars for over size pages, just the iframe itself will be as large as possible within the current document

Edited by almostbob
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.