CODEWITHSUNDEEP
javascriptjqueryhtmlcssinclude
Johnathan Maravilla
Johnathan Maravilla

Reputation: 11

Include header.html to include multiple html pages

I have this bootstrap template: http://wrapbootstrap.com/preview/WB0412697

I have stripped out my header section in the index.html and placed it into it's own file named header.html.

I have tried using the techniques JQuery techniques located on these stack overflow pages and have no been able to get the page to render the header.html within the index.html: - Make header and footer files to be included in multiple html pages, Common Header / Footer with static HTML and Include another HTML file in a HTML file

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
<head>
<title> Welcome...</title>

<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">

<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">  
<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">

<!-- CSS Theme -->    
<link rel="stylesheet" href="assets/css/theme-colors/default.css">

<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
</head> 

<body>
<div class="wrapper">
<!--=== Header ===-->    

<!--=== End Header ===-->

In between header and end header I have tried:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(function(){
$("#header").load("header.html"); 

});
</script>

along with the other examples within the aforementioned links as well as. I have also tried:

<!--#include virtual="insertthisfile.html" -->

which would have been really nice if it worked, as it seems very simple and

<?php include("filename.html"); ?>

but after changing the .html files to .php, my browsers only render plain text.

Any suggestions? What am I doing wrong?

Upvotes: 0

Views: 2773

Answers (3)

Mardzis
Mardzis

Reputation: 768

Use simply PHP code:

<?php 

 // Include file with header
      include("./include/header.php"); 


 // This bit always includs to the "center" Call page file via URL
      if (isset($_GET['page'])){
      $file=$_GET['page'];
      $file2= dirname($_SERVER['SCRIPT_FILENAME'])."/".$file.".php";
           if(file_exists($file2)){
                if(substr_count($file,"../")>0){
                          echo "Warning!";
                          }elseif($file=="index" or $file=="/index"){
                                    echo "Warning!";         
                          }else{
                               include $file2;
                          }
                }else{
                     include "./include/404.php";
                }
      }else{
           include "uvod.php";
      }


 // Include file with footer
      include("./include/footer.php");

?>

Upvotes: -1

Amir Parsa KHademi
Amir Parsa KHademi

Reputation: 105

First step : create div for footer and header

        <!DOCTYPE html>
        <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
        <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
        <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
        <head>
        <title> Welcome...</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- Meta -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Favicon -->
        <link rel="shortcut icon" href="favicon.ico">

        <!-- CSS Global Compulsory -->
        <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- CSS Implementing Plugins -->
        <link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
        <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">  
        <link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">

        <!-- CSS Theme -->    
        <link rel="stylesheet" href="assets/css/theme-colors/default.css">

        <!-- CSS Customization -->
        <link rel="stylesheet" href="assets/css/custom.css">
    <script type="text/javascript"> 
                $(function () {
                $.get("header.html", function (respons) {
                    var header1 = respons;
                    $("body").append(header1);
                });
            });
    </script>
        </head> 

        <body>
</body>
</html>

Upvotes: 1

lazy panda
lazy panda

Reputation: 156

you can make a php file like this. I expect you want the <head> staying the same as well

<?php
$header = file_get_contents('header.html');
$main = file_get_contents('main.html');
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>

then you can choose between different main content files depending on the $_GET using a if statement

<?php
$header = file_get_contents('header.html');

if($_GET['page'] == 'home'){
   $main = file_get_contents('home.html');
}
else if ($_GET['page'] == 'contact'){
   $main = file_get_contents('contact.html');
}

$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>

Upvotes: 2

Related Questions