PDA

View Full Version : External Page on All Levels Navigational Menu (v2.1)



onestopplay
06-06-2009, 02:00 PM
1) Script Title: All Levels Navigational Menu (v2.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

3) Describe problem:
I love this script and it works great. But, it is very hard to update every page on my site with the newest information. Is there a way to have an external page which includes the links menu details? Thanks.

ddadmin
06-07-2009, 10:43 AM
The best and most reliable way to include the contents of a file across multiple pages is always through server side means. Depending on what your server supports and the extension of your pages, you can use SSI (.shtml pages), PHP (.php) etc. It really depends on the configuration of your site. Here are a few relevant links:

SSI: http://www.javascriptkit.com/howto/ssi2.shtml
PHP: http://ca.php.net/manual/en/function.include.php

molendijk
06-07-2009, 10:38 PM
If you cannot use a server side language, you can try the following.
menu.html: (here, you must have href="menu.html?page1.html", href="menu.html?page2.html" etc. instead of href="page1.html", href="page1.html etc.; the menu is just an example)


...
<!-- We need the 100%-height/width to prevent all sorts of weird thing from happening in IE.
We have 'overflow:hidden' since the content files load in an object/iframe, which becomes the content's area with it's own scroll bar. -->
<style type="text/css">
body,html{overflow:hidden; height:100%; width:100%}
</style>
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css">
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css">
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css">
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js">
/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
/*page1.html is the file that is supposed here to load first in the iframe/object. Adapt to your needs.*/
contentURL = document.URL.substring(document.URL.indexOf('?')+1, document.URL.length);
if (top.location == contentURL)top.location.href='menu.html?page1.html';
</script>
<!-- Give the iframe / object other styles, if you wish -->
<!-->
<script type="text/javascript">
document.write('<iframe style="position:absolute;width:74%;height:78%;left:24.5%;top:18%; background:white" frameborder=0 src="' + contentURL +'"><\/iframe>');
</script>
<![endif]-->
<!--[if !IE]><!-->
<script type="text/javascript">
document.write('<object type="text/html" style="position:absolute;width:74%;height:78%;left:22.5%;top:18%; background:white;" data="' + contentURL + '"><\/object>');
</script>
<!--<![endif]-->

</head>
<body >
Your html-menu, together with:
[I]<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar")
</script>
and/or
<script type="text/javascript">
ddlevelsmenu.setup("ddsidemenubar", "sidebar")
</script>
</body>
</html>


Page1.html ((here, you must have <a href="#1" onclick="top.location.href='menu.html?page1.html'">Page 1</a>, <a href="#1" onclick="top.location.href='menu.html?page2.html'">Page 2</a>
etc. instead of <a href="page1.html">Page 1</a>, <a href="page2.html">Page 2</a> etc.; just an example):


<!-- Valid doctype --><html ><head><!-- meta, title etc. -->
<script type="text/javascript">
/* Needed for loading the menu (written in menu.html) on the page. You'd better make it external */
function orph(){
if (top.location == self.location)
top.location.href="index.html?" + document.URL
}
window.onload=orph;
</script>

</head>
<body >
PAGE 1<br>
"Aucassin et Nicolette", c'est l'histoire de deux « enfants » qui s'aiment et que tout sépare, bla bla. <br>
</body>
</html>

Page2.html (see page1 above):


<!-- Valid doctype --><html ><head><!-- meta, title etc. -->
<script type="text/javascript">
/* Needed for loading the menu (written in menu.html) on the page. You'd better make it external */
function orph(){
if (top.location == self.location)
top.location.href="index.html?" + document.URL
}
window.onload=orph;
</script>


</head>
<body >
PAGE 2<br>
Bla bla<br>
</body>
</html>

etc.

This technique for having a menu (called menu.html here) on each page of your side implies that all pages (other than menu.html) are embedded in the menu with the help of an iframe (IE) or text/html-object (non-IE).

Notes:
- In IE, this technique cannot be tested locally (= on the hard disk: the files don't show in the iframe; but there's NO problem on the Internet). So use Firefox for local testing.
- You can even load foreign files. To load Google from menu.html: href="menu.html?http://www.google.com"; from a link in page1.html, page2.html etc.: href="#1" onclick="top.location.href='menu.html?http://www.google.com'"
===
Arie Molendijk