1

I am newly designing the web page using CSS,HTML and Jquery. I have designed the page having only the header part. That header page i want to use in different pages.I have referred Make header and footer files to be included in multiple html pages ,but still it is not working .

I have two html files. header.html which is working fine.Check it jsfiddle.net/Binay_Kumar/3xqwh/2/

And in my second page header1.html ,i want to link that header.html and some other content of the second page.

Coding

header.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>Untitled Document</title>
      <link href="../CSS/stylenew.css"type="text/css" rel="stylesheet" /> 
      <div id="header">
       <div id="codeoverheader">
         X SERVICES PVT. LTD.   </div> 
        <div id="codeoverheader1">
          Home|Logout
        </div>
       </div>   
         <div id="header1"></div>
        <div id="header2"></div>
         <div id="backgroundofmenu1"> <!--I have changed as backgroundofmenu1 instead of backgroungofmenu-->
         </div>
         <div id="menu1">
           <a href="secondpage1.html" style="text-decoration:none" id="menucolor" >My HomePage</a></div>
         <div id="menu1line1"> <!--i have changed from 1 to 11-->
        | </div>     
        <div id="menu2">
         <a href="#" style="text-decoration:none" id="menucolor" class="Mydata">My Data</a></div>
       <div id="menu2line2"><!--i have changed from 2 to 21-->
         |</div>           
       <div id="menu3">
        <a href="secondpage2.html" style="text-decoration:none" id="menucolor">Policies And Info</a></div>
        <div id="menu3line3"><!--i have changed from 1 to 31-->
         | </div>  
       <div id="menu4">
        <a href="secondpage3.html" style="text-decoration:none" id="menucolor">Help</a>    </div>
  </head>

It is working fine.

header1.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Untitled Document</title>
        <link href="../CSS/stylenew.css"type="text/css" rel="stylesheet" />
         <script src="//code.jquery.com/jquery-1.10.2.js"></script>
          <script> 
           $(document).ready(function(){
             $(function(){
               $("#headerpage").load("header.html"); 
             });
         });
       </script>
     </head>
  <body>
     <div id="headerpage"></div>
       <div id="hello">
          hello
      </div>
</body>

Some problem is there in this page.

stylenew.css

 #header{ 
   position:absolute; 
   top:0;  
   left:0; 
   width:100%; 
   height:header-<length>; 
   height:17%;
   background-color:#004080;
       } 
  #header1{
   position:absolute; 
   top:15%; 
   left:0; 
   width:100%; 
   height:2%;
   background-color:#9ABD2B;  <!-- #CCFF33 first it was there -->
     }
  #hello{
     left:300px;
     top:200px;
     position:absolute;
     font-size:18px;
    }

Anyway CSS is working fine ,as it is so lengthy ,so i am not sharing.

The problem is while running the header1.html it is displaying only hello but i am expecting the header.html page content as well as hello.

Can anyone tell what is the mistake i have done ?

Community
  • 1
  • 1
Binay Kumar
  • 279
  • 6
  • 23

3 Answers3

1

Your relative URI to jQuery is wrong because you are using a file URI. You could fix that by using an absolute URI (which starts with http or https, but then you will run into Same Origin Policy issues for using Ajax on local files.

Install a web server on your development machine so you're testing in a web-like environment.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks for your cooperation. – Binay Kumar Jul 08 '14 at 07:12
  • Yes after doing that 1 error reduced but still one error is there XMLHttpRequest cannot load file:///D:/A%20Product%20Ispl%20New/HTML/header.html. Received an invalid response. Origin 'null' is therefore not allowed access. /D:/A%20Product%20Ispl%20New/HTML/header1.html:1 – Binay Kumar Jul 08 '14 at 07:14
  • So will you tell me what to do with the server only i have to install or any settings i have to do. – Binay Kumar Jul 08 '14 at 07:16
  • You have to load the document through it (by visiting `http://localhost/something/something`) – Quentin Jul 08 '14 at 08:35
0

I am not sure what you are trying to do here exactly, but it seems that you want to load the contents of header.html into header1.html. If this is the case, then header.html should not contain the and tags, since that would result into something like.

Furthermore, you don't have appropriate closing tags in multiple positions (e.g. in header.html and header1.html).

So if you want to make something like this work, do something like this:

header.html

<div>
    ...Your header contents here...
</div>

my_page.html

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
           $('#my-header').load('header.html');
        </script>
    </head>
    <body>
        <div id="my-header">
            ... Your header will be inserted here by jQuery
        </div>
    </body>
</html>

So in this example, header.html only contains some HTML markup (no HTML, HEAD and BODY tags!) and it is included by my_page.html. I hope this makes things clear for you.

I suppose you got downvoted because it seems you mainly just copy pasted some code into your own project without really understanding what's going on. Also, you should post your code here as clean as possible. So if something doesn't work, just try and make a minimal example out of it, so people on SO don't have to scan through all the irrelevant parts.

rcijvat
  • 182
  • 2
  • 12
  • Thanks for your cooperation . But i didn't copy and paste the code ,i have referred that ,everything i have designed by my own only. – Binay Kumar Jul 08 '14 at 06:47
  • I did not say that you did, I am only saying that it seemed like it, since your post is a bit messy. I am just giving some hints on why I thought your question might have received a downvote, that's all. – rcijvat Jul 08 '14 at 08:03
-1

Based on the error, the problem appears to be that jQuery isn't loading. It's probably because you are working locally. Change the src for your script tag that loads jQuery to include the http like this:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

jme11
  • 17,134
  • 2
  • 38
  • 48
  • Thanks @jme11 for helping me.I have done what you told.Before i was getting 2 errors now i am getting one error.i.e XMLHttpRequest cannot load file:///D:/A%20Product%20Ispl%20New/HTML/header.html. Received an invalid response. Origin 'null' is therefore not allowed access. – Binay Kumar Jul 08 '14 at 06:58
  • Again, it's because you're working locally and not testing on a server. AJAX (that load method that you're calling) requires a server. So either test on an external server or install a local server for testing. MAMP (http://www.mamp.info/) for Mac is free and fairly simple to set up, or if you're using Windows, you can try WAMP (http://www.wampserver.com/). There are tons of tutorials on installing/configuring these on YouTube. – jme11 Jul 08 '14 at 07:06
  • To load a html file ,i have to install server.Actually first time i am doing so only i am asking don't feel bad. – Binay Kumar Jul 08 '14 at 07:09
  • Yes, you will need a server for AJAX calls. jQuery methods like: $.ajax(), $.get(), load(), post() are all a form of AJAX. – jme11 Jul 08 '14 at 07:14
  • You can just test your files on the server where you intend to host it , if you're not comfortable installing a server. But, this will eventually get tiresome. Those two options I suggested aren't really that difficult to get installed and running (and I'd even say, easy if you are on a MAC). – jme11 Jul 08 '14 at 07:18
  • Then you'll need to use something other than MAMP. That only works on MAC OS. You can try WAMP instead: http://www.wampserver.com/. I don't have a lot of experience with it, but as I said, there are lots of tutorials out there. – jme11 Jul 08 '14 at 07:22