Include content from one HTML page in a div on another

Im looking for a relatively easy way to Include content from one HTML page into a div on another. Specifically, I'm hoping to designate a character count or line count to include on div.

I greatly appreciate any help.

Who is Participating?
DanielleFavreauConnect With a Mentor Commented:
That's not a CSS or HTML thing, you need javascript or PHP or something similar to do that, unless you use an iframe and only display what you want in the iframe.

Both javascript and PHP offer the include function.
TinTodAuthor Commented:
Okay. I thought that might be the case. I prefer to stay away from iframes. Is there a php or JavaScript solution that someone could point me to? I'm afraid I'm not saavy enough to write something like that from scratch. I am already utilizing jquery  on the site.
Are you hosted on a server that has PHP enabled?
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

TinTodAuthor Commented:
Then you're stuck with javascript includes.  There are several ways to do it, just google javascript includes.

Or create a file called includes.js

Inside add this at the top:

var head = new Array();

Replace head with whatever you want that section named.

Then for your "head" area insert this:

head[0] = '[this is where you put your code or text including html]';

Increment the number in the square brackets for each line, here's an example:

head[0]            = '<html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />';
head[1]            = '<link href="css/Demo.css" rel="stylesheet" type="text/css" />';
head[2]            = '<link href="css/Dem_2Graphs.css" rel="alternate stylesheet" title="Graphs2Across" type="text/css" />';
head[3]            = '<link href="css/Demo_3Graphs.css" rel="alternate stylesheet" title="Graphs3Across" type="text/css" />';
head[4]            = '<link href="css/dropline_nav.css" rel="stylesheet" type="text/css" />';
head[5]            = '<!--[if IE 6]> <link href="css/Demo_IE6.css" rel="stylesheet" type="text/css"> <![endif]-->';
head[6]            = '<!--[if IE 7]> <link href="css/Demo_IE7.css" rel="stylesheet" type="text/css"> <![endif]-->';
head[7]            = '<!--[if IE 8]> <link href="css/Demo_IE8.css" rel="stylesheet" type="text/css"> <![endif]-->';
head[8]            = '<script type="text/javascript" src="Scripts/AC_RunActiveContent.js"></script>';
head[9]            = '<script type="text/javascript" src="Scripts/script.js"></script>';
head[10]      = '<script type="text/javascript" src="Scripts/styleswitcher.js"></script>';
head[11]      = '<script type="text/javascript" src="Scripts/browser_detect.js"></script>';
head[12]      = '<script type="text/javascript" src="Scripts/popup.js"></script>';
head[13]      = '<script type="text/javascript" src="Scripts/tabs_optimized.js"></script>';
head[14]      = '</head>';
head[15]      = '<body>';
head[16]      = '<table align="center" cellpadding="0" cellspacing="0" border="0" width="974" style="margin: 0px auto;"><tr><td width="309"><!-- Required to center in all browsers. -->';
head[17]      = '<div id="left_shadow"><div id="right_shadow">';
head[18]      = '<div id="container">';

Then add a var line and a chunk of text like the above to create your entire document.  This way you only need one includes.js file and you can fill it with as much content as you want.  For example:

var head      = new Array();  // This includes everything in the Head tags.
var header      = new Array();  // This includes the header information.
var content_start      = new Array(); // This is the start of the content area.
var navigation      = new Array();  // This is for the navigation.

Then at the very bottom of the includes.js add this:

function show(i)
  for (x in i)

Then in each file you'll use the text in the include.js file include the .js script:

<script type="text/javascript" src="includes.js"></script>

Then use script to include the sections:

<script type="text/javascript">show(head);</script>

Does that make sense?

TinTodAuthor Commented:
It does. Thanks so much. I really appreciate your time.

Take care.
You're welcome.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.