use part of html-body through all the pages

Question

possibly the title is not-so-clear, as I am not sure how to explain this. I am creating my html (one time work, so not using java. just plain html with css).

Consider this schematic diagram(Pic 1). The left panel and footer is almost same thorough out the website's all pages, it contents the link to other pages in the website.

|================================|
||-------||------------||------| |
||LEFT   ||CENTER      ||RIGHT | |
||PANEL  ||PANEL       ||PANEL | |
||_______||____________||______| |
||_______________________________|
||  FOOTER                       |
||_______________________________|
|================================|

Pic.1 the webpage layout

|------------------------|
|                        |
|link to pA              |
|link to pB              |
|                        |
|current link highlited  |
|------------------------|

Pic2. layout of left panel

but with my present knowledge, I have to change all pages if I try to make any change in the left panel and footer. Is it possible to write this left panel in a seperate file, and include it where needed?

Also, possibly a separate question, but linked, assuming writing the left panel in separate file is possible. is it possible to highlight currently visiting pagelink?(see Pic 2)

score 0 · Answer 1 · edited May 23 '17 at 12:05

EDIT I am sorry, I did not pay enough attention. You are not using PHP? In that case take a look at HTML5 include file

I could not find a way to share data between main page and included file though. Perhaps if possible, in your included file you may use a # tag, e.g. mypage.html#hello and parse it with JavaScript to find out which page you are visiting.

You practically answer your own question. Simply take out the HTML code and put it in a separate file and include it where it originally was.

Say your code is

<div id="main">
    <div id="left-panel">
        <div id="links etc"></div>
    </div>
    <div id="another"></div>
</div>

You would take the left-panel part and put in a separate file and include it where it was.

left-panel.php

<div id="left-panel">
    <div id="links etc"></div>
</div>

Original file

<div id="main">
    <?php include 'left-panel.php'; ?>
    <div id="another"></div>
</div>

To know which page you currently are visiting you could be using a variable. Say in each page you put <?php $page = 'shop'; ?> and inside left-panel.php use if-statements like:

<ul>
    <li><a href="page1.php" <?php if($page == 'page1') echo 'class="active"'; ?>>Page1</li>
    <li><a href="page2.php" <?php if($page == 'page2') echo 'class="active"'; ?>>Page2</li>
</ul>

To avoid a bunch of if-statements, you could place your pages in an array and loop them:

<ul>
<?php
$pages = array('page1' => 'Page1', 'page2' => 'Page2', 'page3' => 'Page3');
foreach($pages as $file => $name) {
    echo '<li><a href="'.$file.'" '.($page == $file ? 'class="active"' : '').'>'.$name.'</a></li>';
}
?>

use part of html-body through all the pages

1 Answers1