How do I reuse parts of a webpage (using div)?

Question

I have several HTML pages that share a menu area. Every time I update the menu area (eg with new "breaking news") I need to update all 10 pages manually.

With frames, they all point to same frame page so I only need to change one page. But I was told frames are bad and I should use divs. Is there a simple way to do this with divs? (preferably without JQuery or Ajax)

Answer 1

You could use an iframe. It still is sort of a frame, but you would avoid a frameset-index-page and if you set borders to 0 and content that fits in you won't even see borders or scroll-bars and it will behave like a div

<iframe style="border-width:0px;" src="news.html"/>

You should use fixed width-heights though to avoid scrollbars. To me its the simplest "html-only"-solution to your problem.

Answer 2

You could use jQuery's load() function.

You'd have to add the following to the head of each of your pages:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Then you'd have to add the following DIV where you want the content to be loaded.

<div id="breakingNews"></div>
<script type="text/javascript" src="http://example.com/news.js"></script>

Be sure to edit the link to the news.js file.

Then you'd create the news.js on your server, and add the following code:

$('#breakingNews').load('path/to/breakingnews.html');

More about load(): http://api.jquery.com/load/