Skip to content Skip to sidebar Skip to footer

How Can I Call Html Inside A Div From A Single Location?

To start off, I'm fairly new to HTML/CSS/Javascript. I've created a website that has a top menu. One of the items in the menu is hiking trails. The format is: Hiking Trail location

Solution 1:

The best way to accomplish this would to use PHP with using include you would save the section of data you want in one file with the extension filename.php and then on all the pages you want that file to display you would include it by doing this <?php include('filepath/filename.php'); ?> and all your pages that your displaying this on will have to have a .php extension also, so something like this

index.php

<?phpinclude('../includes/header.php'); ?><body><divclass="body-container"></div></body></html>

header.php Inside folder "includes"

<!DOCTYPE html><html><head><metacharset="UTF=8">
  // Rest of your head content
</head><headerclass="page-header"><divclass="logo"></div><navclass="main-nav"></nav></header>

And just so you know, php has to be on a server to run.

Solution 2:

try this

<divstyle="width: 100%; display: inline;"><ulid="nav"><liclass="top"><ahref="../../"class="top_link"><spanclass="down">Home</span></a></li><liclass="top"><ahref="../"class="top_link"><spanclass="down">Hiking Trails</span></a><ulclass="sub"><li><ahref="../"class="alltrails"> All Trails </a></li><li><ahref="./"class="cmsp"> State Park 1 </a><ul><scriptlanguage="javascript"type="text/javascript" >functionjumpto(x){

if (document.form1.jumpmenu.value != "null") {
document.location.href = x
}
}
</script><formname="form1"><selectname="jumpmenu"onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)"><option>Jump to...</option><optionvalue="./index.html#homepage">Homepage</option><optionvalue="./index.html#javascript">JavaScript</option><optionvalue="./index.html#HTML">HTML</option><optionvalue="./index.html#CSS">CSS</option></select></form></ul></li><li><ahref="../ascg/"class="ascg"> State Park 2 </a></li><li><ahref="../mnp/"class="mnp"> State Park 3 </a></li></ul></li><liclass="top"><ahref="../../contact/"class="top_link"><spanclass="down">Contact</span></a></li></ul></div></td></tr></table></div>

Solution 3:

You can do it with javascript and ajax calls.

Algorithm:

Get the html fragment with ajax. 
Strip it of any unnecessary tags.(javascript) 
Insert it into the DOM with javascript.

If you add jquery to the equation, it gets really trivial as there is already a function for it: http://api.jquery.com/load/

See this question for a complete example of how to do it: How do I load a page fragment using jQuery?

Solution 4:

There are different ways to achieve this.

But since you have not mentioned the basis of your application (php, c#, DB engine...) the simplest way to be independent of databases, csv or xml parsing and alike... is the following.

The code or solution is not optimized and this is just to give you an idea.

1- Create a file named for example trailsList.js and put this in the file (or whatever code you will be re-using):

// Trails List
document.write('<li><ahref="./index.html#backside"> Trail </a></li>');
document.write('<li><ahref="./index.html#campingg"> Trail </a></li>');
document.write('<li><ahref="./index.html#campingf"> Trail </a></li>');
document.write('<li><ahref="./index.html#crowders"> Trail </a></li>');
document.write('<li><ahref="./index.html#fern"> Trail </a></li>');
document.write('<li><ahref="./index.html#lake"> Trail </a></li>');
document.write('<li><ahref="./index.html#pinnacle"> Trail </a></li>');
document.write('<li><ahref="./index.html#ridgeline"> Trail </a></li>');
document.write('<li><ahref="./index.html#rocktop"> Trail </a></li>');
document.write('<li><ahref="./index.html#tower"> Trail </a></li>');
document.write('<li><ahref="./index.html#turnback"> Trail </a></li>');

2- Call trailsList.js in your document wherever you want the code to appear.

.
.
.
  <li><ahref="./"class="cmsp"> State Park 1 </a><ul><scriptsrc="trailsList.js"></script></ul></li>
.
.
.

Post a Comment for "How Can I Call Html Inside A Div From A Single Location?"