Member Avatar for k2k

if i have 10 pages and each of the page has the same navigation bar, i don't think duplicating the code again and again in every page is the right solution... what do the pro normally do?

** i tried to use a frame inside one of my div tag to link the page to the navigation page

something like this: (it is not even showing anything somehow)

<div id="linkBox">
    	<frameset cols="100%">
               <frameset rows="100%>
  			<frame src="navigationPage.htm" />
                </frameset>		
	</frameset>
</div>

i am also thinking to write a php function in an external class to create the navigation bar... so every page i need the navigation bar i can simply call that php function... if navigation bar has to be modified, then I'll just modify the php function.

just not sure what would the pro do.. i wanna follow the convention.

***************************
professional web programmers here please give me some quick suggestion. Thanks very much.
***************************

  • 3 Contributors
  • 6 Replies
  • 109 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by k2k
Member Avatar for rajarajan2017

Create a php file with your navigation bar and use include statement to utilize in other files

<?php 
// create an array to set page-level variables
$page = array();
$page['title'] = 'Product Catalog';
/* once the file is imported, the variables set above will become available to it */ 

// include the page header 
include('header.php'); 

?> 

<!-- HTML content here --> 

<?php 

// include the page footer 
include('footer.php'); 

?>
Edited by rajarajan2017 because: n/a
Member Avatar for tqwhite

The php solution is a good one. Another that I have been using lately is to generate the navigation in javascript and, usually with jQuery, insert it into the page. Usually I base it on a sort of site map, an array that represents the structure of the site so I can generate next/prev links, highlight the current link, etc.

I note that there is no important advantage to this over php unless you are doing other javascript-y stuff.

You are 100% correct in your surmise that duplicating the navigation in multiple pages is a bad idea. I have inherited a site where this was done and it is very inflexible. Whenever you find yourself duplicating anything, think of a different way.

Member Avatar for k2k

thanks both of you. very valuable opinions. i have been thinking about javascript too since it takes the client's resource to do stuffs.. it looks like jQuery is powerful, maybe it is time to pick it up a little. =)

thanks

Member Avatar for k2k

couldn't get it going... how do i call the external function? by the way do i need to specify <script src="...."></script> every time i try to call the fucntion in the same class? does javascript have something like php's require() function which only has to be called once?

//external javascript class ("generalFunction.js")
function createLinkBox()
{
	document.writeln("<table align=\"right\"> "
			 +"<tr><td style=\"font-size:13px\"><a href=\"index.php\">| Home </a></td>"
            		 +"<td style=\"font-size:13px\"><a href=\"pages/henry.php\">| About me</a> </td>"
                	 +"<td style=\"font-size:13px\"><a href=\"pages/registration.php\">| Register </a></td>"
 	               	 +"<td style=\"font-size:13px\"><a href=\"pages/chinese.php\">| Chinese |</a></td></tr>"
					 +"</table>")
}

function pop()
{
	alert("hi");
}
// my html file
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Henry Li | Boston | Tech</title>

<link rel="stylesheet" type="text/css" href="css/mainCss.css" />

</head>

<body>
	
	<div id="topMenuBar">

	<img src="webMaterials/monitor.png" height="150"/>
       <script src="javascripts/generalFunctions.js">pop()</script>

	</div>
Member Avatar for tqwhite 
<script src="javascripts/generalFunctions.js">pop()</script>

Is wrong.

Use

<script src="javascripts/generalFunctions.js"></script>
<script type='text/javascript'>
   pop();
</script>

or something like it.

Yes, you need to surround all JS code with script tags, just as you would all php code.

You only have to call your insertion function once. But you know that, you do php functions, I'm not sure what you are asking.

Also, I would use jQuery for this. You can succeed with your document.write approach but, adding jquery adds a huge amount of capability. It's totally worth learning.

Hit jquery.com and download a copy. Include it in your html above the reference to your function. Change your function to something like:

$('body').prepend('ALL SORTS OF GOOD NAV STUFF');

Then you can add a bit of code like,

if (document.location.pathname=='the/special/one.php')
{
   $('#navId').css('background', 'yellow');
}

This will eventually make you very happy.

Edited by tqwhite because: n/a
Member Avatar for k2k

tqwhite,
I really want to thank you for the correction and comment. I'll definitely look up jQuery. I can see how powerful it is. you did already answered all my questions. Thanks a bunch.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.