Page on DIVs

**Ririsu** · 09-05-2011, 08:57 AM

Sorry if the topic about it was before, but "div" is too short and cant be found.
I have 3 html pages : 1. with logo, 2. menu and 3. main text
I want to put them toegether, like 1st up and 2nd and 3rd down near each other.
I read, that u can make blocks in HTML, but it was only written how to edit color inside block etc, but not how to put page inside.
Can u tell me how to do it ?

**manik** · 09-05-2011, 10:32 AM

there are many ways to do it.

Container

Code:

<div id="myContainer"></div>
<script type="text/javascript">
onload=function(){
var el=document.getElementById("myContainer")
el.innerHTML="<iframe src=\"http://www.webcosmoforums.com\"></iframe>"
}
</script>

Using Ajax

Code:

<?xml version="1.0" encoding="utf-8"?>
<!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>Load page by Ajax</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <style type="text/css">

    </style>
    <script type="text/javascript">
    function loadPageAjaxFunction(id, url){
        var xmlHttp;
        try {// Firefox, Opera 8.0+, Safari
            xmlHttp = new XMLHttpRequest();        
        } catch (e) {// Internet Explorer
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    alert("Your browser does not support AJAX!");
                    return false;
                }
            }
        }
        
        xmlHttp.onreadystatechange = function(){
            if (xmlHttp.readyState == 4) {
                //Get the response from the server and extract the  section that comes in the body section of the second html page avoid  inserting the header part of the second page in your first page's  element
                var respText = xmlHttp.responseText.split('<body>');
                elem.innerHTML = respText[1].split('</body>')[0];
            }
        }

        var elem = document.getElementById(id);
        if (!elem) {
            alert('The element with the passed ID doesn\'t exists in your page');
            return;
        }
    
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }        
</script>
</head>

<body>
    <div id="test"></div>
    
    <script type="text/javascript">
        loadPageAjaxFunction('test','mypageurl.htm');
    </script>
    
    Using a function:
    <input type="button" value="Load page by Ajax call" id="ajax"  onclick="loadPageAjaxFunction('test','mypageurl.htm');"/>
</body>
</html>

Using Iframe

<iframe src="mypageurl.html" height="100" width="200">You need a Frames Capable browser to view this content.</iframe>

Using JQuery

Code:

<!DOCTYPE html>
<html>
<head>
  <style>
 body{ font-size: 12px; font-family: Arial; }
 </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div id="container"></div>

<script>
  $("#container").load("mypageurl.html");
</script>

</body>
</html>

**Ririsu** · 09-07-2011, 08:18 AM

Sry but Im not good at all in it. I tried to copy code
Using JQuery

Where and what I need to write to open my page? I tried to edit

</style> <script src="//code.jquery.com/jquery-latest.js"></script>

but nothing happened.

**Ririsu** · 09-08-2011, 04:07 AM

Maybe Im blind but I dont see EDIT option ...

So,

My main question now is which code is to put entire html object inside DIV, like u ve shown me in iframe.

Thread: Page on DIVs

Thread Tools

Display

Page on DIVs

Similar Threads

In SEO are the on page and off page optimization factors important?

Facebook fan page or business page URL customization.

How start a fan page and how to link that fan page to a blog?

Next Page Link Shows 404 Page Not Found on WordPress

Divs Side by Side

Tags for this Thread

Posting Permissions