www.webdeveloper.com
Results 1 to 11 of 11

Thread: HTML website without "php include"...

  1. #1
    Join Date
    Dec 2008
    Posts
    14

    HTML website without "php include"...

    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?

  2. #2
    Join Date
    Oct 2010
    Posts
    45
    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:
    Code:
    <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:
    Code:
    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.

  3. #3
    Join Date
    Oct 2010
    Posts
    45
    Oh, another option is to use frames, which generally I'm not a huge fan of, but they do have their utility.

  4. #4
    Join Date
    Dec 2008
    Posts
    14
    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...

  5. #5
    Join Date
    Oct 2010
    Posts
    45
    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.

  6. #6
    Join Date
    Oct 2010
    Location
    Nashville, TN
    Posts
    7
    Relatively new HTML5 can do this using an <object> tag..

    ie:

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

  7. #7
    Join Date
    Nov 2003
    Location
    Worthington, OH, USA
    Posts
    3,634
    Wrote this a few years ago:

    Code:
    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).
    HTML Code:
    <inc file="header.inc" />
    54 68 65 42 65 61 72 4D 61 79

  8. #8
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    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.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  9. #9
    Join Date
    Dec 2008
    Posts
    14
    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... ??

  10. #10
    Join Date
    Oct 2010
    Posts
    12
    YOu can use iframe ,I am not good at html, but you can search on this forum or google.

  11. #11
    Join Date
    Dec 2008
    Posts
    14
    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:
    Code:
    <object id="ObjectSideBar" data="SupportFiles/SideboxNavigation1.html"></object>
    The SideboxNavigation1.html file contains this code:
    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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles