HTML website without "php include"...

[LittleOleMe]

Hey guys,

I'm trying to figure out the best way to do this. I'm forced in a situation where php, mysql, etc are not available to me for this website. I'm stuck with pure client-side coding (HTML, CSS, JavaScript...)

I would like the ability that the PHP Includes statement gives me when it comes to maintaining navigation or other common page elements across a site. I know how to use CSS to handle the design of elements across a site. What I'm looking for is how to handle the other common elements without having PHP available to me.

Can anyone point me in the right direction?

[bftrs2]

I use a javascript menu file that I place on a page where I want the menu to show. Then I only have to update one file instead of 20 if I change anything on the menu.

Place this in your html where you want the menu to show:

<div class="box">
        <h2>Assignments</h2>
        <script language="JavaScript" type="text/javascript" src="js/menu.js"></script>       
      </div>

Then here's the external js code to populate it:

document.write('<ul class="menu">');

document.write('<li>');
document.write('<a href="index.html">Home</a></li>'); 

document.write('</li><li>');
document.write('<a href="includepage.php">Assignment 1 - Include Assignment</a>');

document.write('</li><li>');
document.write('<a href="dice.php">Assignment 2 - Dice Game</a>');

document.write('</li><li>');
document.write('<a href="outputall.php">Assignment 3 - Output All</a>');

document.write('</ul>');

Is that like what you're looking for? You can then style the menu any way you want with css.

[bftrs2]

Oh, another option is to use frames, which generally I'm not a huge fan of, but they do have their utility.

[LittleOleMe]

I'm not a huge fan of frames either normally... that's why I was hoping to find a solution that didn't involve them.

The javascript looks like what I need. I'll give it a shot. It's a massive site that's going to continually be added to and updated... normally I'd be right on top of using a CMS solution like Wordpress or Joomla, but without php those just don't work.

Can you use javascript to pull in a whole element... like a <div> for the header or footer... essentially structuring the site like you would with php includes...

From what you're showing here, it looks like it...

[bftrs2]

I'm not very good with javascript, but if you move your question over to the javascript forum I bet those guys could hook you up with the right ideas.

[MktStMedia]

Relatively new HTML5 can do this using an <object> tag..

ie:

<object data="link to include file" width="px" height="px"></object>

[TheBearMay]

Wrote this a few years ago:

function getFile(fileName){
    oxmlhttp = null;
    try{
        oxmlhttp = new XMLHttpRequest();
        oxmlhttp.overrideMimeType("text/xml");
    }
    catch(e){
        try{
            oxmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e){
            return null;
        }
    }
    if(!oxmlhttp) return null;
    try{
       oxmlhttp.open("GET",fileName,false);
       oxmlhttp.send(null);
    }
    catch(e){
       return null;
    }
    return oxmlhttp.responseText;
}

var incArr;;
var incInx = 0;
window.onload = processInclude;

function processInclude() {
	incArr = document.getElementsByTagName("inc");
	dNode=document.createElement("div");
	dNode.innerHTML=getFile(incArr[0].attributes.file.nodeValue);
 	tNode=incArr[0];
 	tNode.parentNode.replaceChild(dNode, tNode);
 	//Array is now invalid so a regular loop won't work
	if(document.getElementsByTagName("inc").length > 0) processInclude();
}

will look for tags constructed like below and replace them (must be same domain though).

<inc file="header.inc" />

[Charles]

Do not use the JavaScript method...it will fail for way too many users. Frames are yucky, but at least they work.

I would use XHTML but with the .XML file extension and text/xml MIME type. And I would use an XSLT stylesheet to add the navigation. But if I really wanted to make sure that every one and every robot could navigate the site then I would include in the XHTML a link to a page in HTML that is just the navigation and have the stylesheet remove that link.

[LittleOleMe]

The <object> tag seem to work fairly well to allow me to include an html file... the only issue I'm seeing right now is that when using it to pull in navigation, clicking on a link in the object opens the link in the object, not in the main page... ??

[getbestproduct]

YOu can use iframe ,I am not good at html, but you can search on this forum or google.

[LittleOleMe]

Ok... making pretty good progress at this point I think with the object tag, but having one issue at the moment... probably best to have this one in a javascript forum though... so for now, I'll just put my solution here in case anyone else is wanting/needing the same thing.

My only issue at this point is finding a way to keep the accordion menu unfolded to whatever page it's on. So that when they unfold one and click on a sub-level, it will be unfolded when it goes to that page still.

Adding target="_parent" to the links took care of opening the link in the navigation in the parent page.

Each html page on my site has this code:

<object id="ObjectSideBar" data="SupportFiles/SideboxNavigation1.html"></object>

The SideboxNavigation1.html file contains this code:

<!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>
		
		<style type="text/css">
			* {margin:0; padding:0;}
			ul {list-style-type:none; padding-left:10px; padding-right:10px; padding-top:5px;}
			ul li {border-bottom:1px dotted #C3C3C3;}
			ul li:hover {background:#F0F0F0;}
			ul li a {text-decoration:none; color:#333232; line-height:140%;}
			ul li a:hover {text-decoration:none;}
			#Sidebox { 
					margin-top:15px;
					margin-left:5px;
				}
			#SideboxHeader { 
					background-image:url('../images/SidebarHeaderBackground.jpg'); 
					background-repeat: no-repeat; 
					height:27px; 
					width:206px; 
					text-align:center; 
					padding-top:3px; 
				}
			#SideboxContent { 
					background-image:url('../images/SidebarMiddleBackground.jpg'); 
					background-repeat: repeat-y; 
					width: 206px; 
				}
			#SideboxFooter { 
					background-image:url('../images/SidebarFooterBackground.jpg'); 
					background-repeat: no-repeat; 
					width:206px; 
					height: 10px; 
				}
			.SideboxTreeMenu {
					margin : 0px 20px;
					padding : 10px;
					list-style : none;	
					background-color : #EEE;
					border : 1px solid #000;
					width : 200px;
				}
			.SideboxTreeMenu ul {
					list-style : none;
					margin : 0px 10px;
					padding : 0px 10px;
				}
			.SideboxTreeMenu li {
					display : inline;
				}
			.SideboxTreeMenu a {
					display : block;
					padding-left : 12px;
					text-decoration : none;
				}
			.treeopen {
					background-image : url('../Images/open.gif');
					background-repeat : no-repeat;
					background-position : left center;
					padding-left:20px;
				}		
			.treeclosed {
					background-image : url('../Images/closed.gif');
					background-repeat : no-repeat;
					background-position : left center;
					padding-left:20px;
				}
			.notree {
					background-image : url('../Images/notree.jpg');
					background-repeat : no-repeat;
					background-position : left center;
					padding-left:20px;
				}
			.treenode ul li {
					background-color:#F0F0F0;
					background-image : url('../Images/arrow.gif');
					background-repeat : no-repeat;
					background-position : left center;
					padding-left:15px;
				}
			.treenode ul li:hover {
					background-color:#E5E5E5;
				}
			
		</style>
		
		<script type="text/javascript">
			function initMenus() {
				if (!document.getElementsByTagName) return;
				
				var aMenus = document.getElementsByTagName("LI");
				for (var i = 0; i < aMenus.length; i++) {
					var mclass = aMenus[i].className;
					if (mclass.indexOf("treenode") > -1) {
						var submenu = aMenus[i].childNodes;
						for (var j = 0; j < submenu.length; j++) {
							if (submenu[j].tagName == "A") {
								
								submenu[j].onclick = function() {
									var node = this.nextSibling;
														
									while (1) {
										if (node != null) {
											if (node.tagName == "UL") {
												var d = (node.style.display == "none")
												node.style.display = (d) ? "block" : "none";
												this.className = (d) ? "treeopen" : "treeclosed";
												return false;
											}
											node = node.nextSibling;
										} else {
											return false;
										}
									}
									return false;
								}
								
								submenu[j].className = (mclass.indexOf("open") > -1) ? "treeopen" : "treeclosed";
							}
							
							if (submenu[j].tagName == "UL")
								submenu[j].style.display = (mclass.indexOf("open") > -1) ? "block" : "none";
						}
					}
				}
			}

			window.onload = initMenus;
			
                 
		</script> 
		
		
		
	</head>

	<body>
			

			
<!-- ******************************************************************************************************************** -->
<!-- ************************************** Copy Below To Create New Sidebox ******************************************** -->
			<div id="Sidebox">
					<div id="SideboxHeader">
						Program Help Files
					</div>
					<div id="SideboxContent">
						<ul id="SideboxTreeMenu">
							<li class="treenode">
							<a class="treeopen">Batch Plot - #00001</a>
								<ul>
									<li><a href="../00001/00001-About.html" target="_parent">About Batch Plot</a></li>
									<li><a href="../00001/00001-Screenshots.html" target="_parent">Screenshots</a></li>
								</ul>
							</li> <!-- End Treenode -->
							<!-- <li><a href="../Home.html" target="_parent" class="notree">Link Six</a></li> -->
						</ul>
					</div>
					<div id="SideboxFooter"></div>
			</div> <!-- Sidebox -->
			

			
<!-- ************************************** Copy Above To Create New Sidebox ******************************************** -->
<!-- ******************************************************************************************************************** -->	
					
	</body>
	
</html>