[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 73
  • Last Modified:

HTML5 referencing a div tag in multiple pages

I have numerous pages using the same menu but I'm so rusty on web design that it seemed easier  to just include the menu code in each page. Before I embark on re-learning how to do it the "right" way, I seem to remember that there's a way to call a routine on multiple pages. If that is true, how do I do it?
<div id="navbar">
<p>&nbsp;</p>
<ul class="mlddm" params="3,-3,500,slide,150,h,1">
    <li><a href="http://dijitalrealm.com/JCMusic/Jukebox2.html">home</a></li>
    <li><a href="NoOneButYou.html">No One But You</a>
    <li><a href="SweetLittleRomanticKisses.html">Sweet Little Romantic Kisses</a></li>
    <li><a href="ManOfMyWords.html">A Man of My Words</a></li>
    <li><a href="IDontCryAnymore.html">I Don't Cry Anymore</a></li>
</ul>
</div>

Open in new window

You can see what I mean here:  http://dijitalrealm.com/JCMusic/Jukebox2.html
I expect to be adding and replacing songs on a regular basis so it would be nice not to have to add it manually to 4 or 5 or 10 pages.

Thanks,
John
0
gabrielPennyback
Asked:
gabrielPennyback
3 Solutions
 
Dave BaldwinFixer of ProblemsCommented:
HTML can not do that.  You need a programming language like PHP or ASP to do that.  One other alternative is SSI includes which usually uses the 'shtml' suffix.

Most of us would put that in a database so it could be easily changed and use a programming language to fetch the listings and display them.
0
 
gabrielPennybackAuthor Commented:
How complicated would that be? :- ) I was never very good at that sort of thing the last time I tried, about 6-7 years ago. Would it require a complete re-write from top to bottom?
0
 
Dave BaldwinFixer of ProblemsCommented:
Since you don't know how to do it right now, it would be a noticeable learning curve for you.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Branislav BorojevicCommented:
Looking at the point that you would need to get a big refresh on the programming side, SSI might be the way to go for your case.

Requirements for making SSI work on your website

Your webhost must support (i.e. allow you to use) SSI. Most of the webhosts do.

Your server must be able to recognize which documents need to be processed, i.e. in which documents (web pages) it needs to look for SSI commands and process the includes before sending the pages to your visitor's browser.

This is usually accomplished by giving those web pages a special filename extension: .shtml or .shtm.

Now if you already have an established website and your pages have .html or .htm as filename extensions, you certainly don't want to rename all of your webpages and lose your search engine rankings. In this case, you can use the .htaccess file to enable SSI on .html and .htm pages, too. Simply add the following line to your .htaccess file in your website┬┤s root directory.

AddHandler server-parsed .html .htm

Open in new window


Here is a simple example that might explain on how to handle SSI include in an plain-HTML file:

<html>
<head>
<title>SSI Example</title>
</head>
<body>
<table width="97%" cellpadding="5" cellspacing="0" border="0">
<tr>
<td width="170" valign="top">
<!--#include virtual="menu.html" -->
</td>
</tr>
<tr>
<td>
.
.
.
</td>
</tr>
</table>
</body>
<html>

Open in new window


The first include inserts the content of the file menu.html whose source code you can see below. Anytime you want to add a new link to the menu of all web pages, you only need to update this file.

<a href="#">Home</a><br>
<a href="#">Site Blog</a><br>
<a href="#">Article Directory</a><br>
<a href="#">Tutorials</a><br>
<a href="#">Contact Us</a><br>

Open in new window


I hope this helps in your endeavor!

Sincerely,

Branislav
0
 
gabrielPennybackAuthor Commented:
Hi Branislav, this might be the best way to go for me at the moment. My site supports SSI, but I'm on a Windows server so I have a web.config file not an .htaccess file. Will your one line of code work in my web.config file? And if so should it be within the configuration tabs or outside them (as I have written it)?
<?xml version="1.0"?>
<configuration>
	<appSettings/>
	<connectionStrings>
		<add name="MyConnectionString" connectionString="Data Source=DJRTest1johnc.db.11167833.hostedresource.com;Initial Catalog=DJRTest1;User ID=DJRTest1johnc;Password=Luckyme7!;"/>
	</connectionStrings>
	<system.web>
		<compilation debug="true">
		</compilation>
		<authentication mode="Windows"/>		
		<customErrors mode="Off"/>
	</system.web>
</configuration>
AddHandler server-parsed .html .htm	
<!-- Web.Config Configuration File -->

Open in new window

Next, here's what I have in my "menu.html" file, which is modeled after yours. My question is, what line or lines of code do I put in my html files to include this menu in them?
<link rel="stylesheet" type="text/css" media="all" href="css/navbar.css" >
    <script type="text/javascript" src="js/navbar.js"></script>
    <div class="menubar">	
    <div id="navbar">
    <ul class="mlddm" params="3,-3,500,slide,150,h,1">
        <li><a href="http://dijitalrealm.com/JCMusic/Jukebox2.html">home</a></li>
        <li><a href="NoOneButYou.html">No One But You</a>
        <li><a href="SweetLittleRomanticKisses.html">Sweet Little Romantic Kisses</a></li>
        <li><a href="ManOfMyWords.html">A Man of My Words</a></li>
        <li><a href="WhenGodWasYoung.html">When God Was Young</a></li>
        <li><a href="GrandDesign.html">The Grand Design</a></li>
        <li><a href="VisionOfLoveliness.html">Vision of Loveliness</a></li>
        <li><a href="DistantSeas.html">Distant Seas</a></li>   
    </ul>
    </div>		<!--end navbar-->
    </div>    	<!--end menubar-->

Open in new window

I'm assuming that my SSI instruction should replace everything between <body>   and   <div class="box1"> in the code snippet below. Would that be correct? And if so what should that code be?
<body>
    <div class="menubar">	
    <div id="navbar">
    <ul class="mlddm" params="3,-3,500,slide,150,h,1">
        <li><a href="http://dijitalrealm.com/JCMusic/Jukebox2.html">home</a></li>
        <li><a href="NoOneButYou.html">No One But You</a>
        <li><a href="SweetLittleRomanticKisses.html">Sweet Little Romantic Kisses</a></li>
        <li><a href="ManOfMyWords.html">A Man of My Words</a></li>
        <li><a href="WhenGodWasYoung.html">When God Was Young</a></li>
        <li><a href="GrandDesign.html">The Grand Design</a></li>
        <li><a href="VisionOfLoveliness.html">Vision of Loveliness</a></li>
        <li><a href="DistantSeas.html">Distant Seas</a></li>   
    </ul>
    </div>		<!--end navbar-->
    </div>    	<!--end menubar-->
<div class="box1"> 

Open in new window

I hope I haven't made this too confusing!

Thanks,
John
0
 
David S.Commented:
Apache doesn't use XML for its config files but IIS does. The two different servers use different syntax for their configuration.

This question gives part of the answer: https://www.experts-exchange.com/questions/27783399/Server-Side-Includes-Using-HTML-extension.html

John, do you realize you've posted the username and password for your database? (I'll leave it out from the code below.)

Give this a try: (It might need tweaking for the version of IIS you're using though.)
<?xml version="1.0"?>
<configuration>
	<appSettings/>
	<connectionStrings>
		<add name="MyConnectionString" connectionString="*** please fill this in with the old value ***"/>
	</connectionStrings>
	<system.web>
		<compilation debug="true">
		</compilation>
		<authentication mode="Windows"/>		
		<customErrors mode="Off"/>
		<serverSideInclude ssiExecDisable="true" />
		<handlers>
			<add name="SSINC-html" path="*.html" verb="*" modules="ServerSideIncludeModule" resourceType="File" />
			<add name="SSINC-html" path="*.htm" verb="*" modules="ServerSideIncludeModule" resourceType="File" />
		</handlers>
	</system.web>
</configuration>
<!-- Web.Config Configuration File -->

Open in new window

0
 
gabrielPennybackAuthor Commented:
Thank you all for your input, sorry I've been away from this question so long. I think I'll need to revisit this at a later date.

~ John
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now