33407

How can I call HTML inside a DIV from a single location?

Question:

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 ---Names of trails

I plan on having a lot of different trail locations and don't want my HTML to be cluttered up, so I'd like to have this part of my code in a single location which I can edit and the changes show on every page.

Here is the code: <a href="http://pastebin.com/wKdx0Sbn" rel="nofollow">http://pastebin.com/wKdx0Sbn</a>

<div class="header"> <table id="topmenu" class="header"> <tr> <td class="submen"> <div style="width: 100%; display: inline;"> <ul id="nav"> <li class="top"><a href="../../" class="top_link"><span class="down">Home</span></a></li> <li class="top"><a href="../" class="top_link"><span class="down">Hiking Trails</span></a> <ul class="sub"> <li><a href="../" class="alltrails"> All Trails </a></li> <li><a href="./" class="cmsp"> State Park 1 </a> <ul> <li><a href="./index.html#backside"> Trail </a></li> <li><a href="./index.html#campingg"> Trail </a></li> <li><a href="./index.html#campingf"> Trail </a></li> <li><a href="./index.html#crowders"> Trail </a></li> <li><a href="./index.html#fern"> Trail </a></li> <li><a href="./index.html#lake"> Trail </a></li> <li><a href="./index.html#pinnacle"> Trail </a></li> <li><a href="./index.html#ridgeline"> Trail </a></li> <li><a href="./index.html#rocktop"> Trail </a></li> <li><a href="./index.html#tower"> Trail </a></li> <li><a href="./index.html#turnback"> Trail </a></li> </ul> </li> <li><a href="../ascg/" class="ascg"> State Park 2 </a></li> <li><a href="../mnp/" class="mnp"> State Park 3 </a></li> </ul> </li> <li class="top"><a href="../../contact/" class="top_link"><span class="down">Contact</span></a></li> </ul> </div> </td> </tr> </table> </div>

Thanks for any help! In the mean time, I'll keep searching.

Answer1:

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

<strong>index.php</strong>

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

<strong>header.php Inside folder "includes"</strong>

<!DOCTYPE html> <html> <head> <meta charset="UTF=8"> // Rest of your head content </head> <header class="page-header"> <div class="logo"></div> <nav class="main-nav"> </nav> </header>

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

Answer2:

try this

<div style="width: 100%; display: inline;"> <ul id="nav"> <li class="top"><a href="../../" class="top_link"><span class="down">Home</span></a> </li> <li class="top"><a href="../" class="top_link"><span class="down">Hiking Trails</span></a> <ul class="sub"> <li><a href="../" class="alltrails"> All Trails </a></li> <li><a href="./" class="cmsp"> State Park 1 </a> <ul> <script language="javascript" type="text/javascript" > function jumpto(x){ if (document.form1.jumpmenu.value != "null") { document.location.href = x } } </script> <form name="form1"> <select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)"> <option>Jump to...</option> <option value="./index.html#homepage">Homepage</option> <option value="./index.html#javascript">JavaScript</option> <option value="./index.html#HTML">HTML</option> <option value="./index.html#CSS">CSS</option> </select> </form> </ul> </li> <li><a href="../ascg/" class="ascg"> State Park 2 </a></li> <li><a href="../mnp/" class="mnp"> State Park 3 </a></li> </ul> </li> <li class="top"><a href="../../contact/" class="top_link"><span class="down">Contact</span></a></li> </ul> </div> </td> </tr> </table> </div>

Answer3:

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: <a href="http://api.jquery.com/load/" rel="nofollow">http://api.jquery.com/load/</a>

See this question for a complete example of how to do it: <a href="https://stackoverflow.com/questions/3904152/how-do-i-load-a-page-fragment-using-jquery" rel="nofollow">How do I load a page fragment using jQuery?</a>

Answer4:

There are different ways to achieve this.

<strong>But</strong> 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><a href="./index.html#backside"> Trail </a></li>'); document.write('<li><a href="./index.html#campingg"> Trail </a></li>'); document.write('<li><a href="./index.html#campingf"> Trail </a></li>'); document.write('<li><a href="./index.html#crowders"> Trail </a></li>'); document.write('<li><a href="./index.html#fern"> Trail </a></li>'); document.write('<li><a href="./index.html#lake"> Trail </a></li>'); document.write('<li><a href="./index.html#pinnacle"> Trail </a></li>'); document.write('<li><a href="./index.html#ridgeline"> Trail </a></li>'); document.write('<li><a href="./index.html#rocktop"> Trail </a></li>'); document.write('<li><a href="./index.html#tower"> Trail </a></li>'); document.write('<li><a href="./index.html#turnback"> Trail </a></li>');

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

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

Recommend

  • Compute Vertical Gradients for License Plate Localization
  • Render error with edges helper and semi transparent object
  • 'void' type not allowed here (java) error [closed]
  • How to add outline on child mesh in three js
  • DataSet Object for the Google Fit API
  • Dataflow failing to push messages to BigQuery from PubSub
  • Unable to retrieve full text of title from JPEG metadata
  • chrome video src change not working
  • How Get arguments value using inline assembly in C without Glibc?
  • cordova is not defined - cordova.js has already been loaded :: Ionic
  • Why isn't obj.style.left = “200px”; working in this code?
  • Possible to “watch” both HAML and SASS at the same time?
  • blade.php method outputting it's result to the form
  • How to make R's read_csv2() recognise the text characters properly
  • Django invalid literal for int() with base 10
  • ListItem.Attributes.Add not working
  • Implementation of State Monad
  • Array with custom indexes in Ionic2
  • How to handle images sent by a mobile device?
  • How do I get HTML corresponding to current DOM tree?
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Meteor helpers not available in Angular template
  • Change multiple background-images with jQuery
  • Ajax Loaded meta Tags
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Display issues when we change from one jquery mobile page to another in firefox
  • Problems to linebreak with an int in JLabel
  • Apache 2.4 and php-fpm does not trigger apache http basic auth for php pages
  • How to add date and time under each post in guestbook in google app engine
  • Fill an image in a square container while keeping aspect ratio
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Symfony2: How to get request parameter
  • Weird JavaScript statement, what does it mean?
  • jquery mobile loadPage not working
  • Rearranging Cells in UITableView Bug & Saving Changes
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • JaxB to read class hierarchy
  • Conditional In-Line CSS for IE and Others?