My further adventures in HTML, CSS and JavaScript...

[The Chief]

Trying to maintain a common menu across a dozen or more html files has bugged me for a while now.  I lamented the lack of a C style include statement in html.   So, I finally set my programmer mind the task of solving this problem, and here it is.

First, I created the following javascript functions:

1.  A function to create a menu entry.

Code: [Select]

    function PutMenuEntry(file, title)
    {
      if (document.title != title)
      {
        document.write("<div class="   "menu_entry"   ">");
        document.write("<a href="   file   ">"   title   "</a>");
        document.write("</div>");
        document.write("<br>");
      }
    }

2.  A function to create the full menu:

Code: [Select]

    function CreateMenu()
    {
      document.write("<div id='menu'>");
     
      PutMenuEntry("index.html", "Home");

      PutMenuEntry("about_us.html", "About Us");

      PutMenuEntry("members.html", "Members");

      PutMenuEntry("resources.html", "Resources");

      PutMenuEntry("product_list.html", "Products");

      PutMenuEntry("contact_us.html", "Contact Us");

      PutMenuEntry("related_links.html", "Links");

      PutMenuEntry("events.html", "Events");

      document.write("</div>");

    }

Then, I included this in each of my html files:

Code: [Select]

       <script>
          CreateMenu();
       </script>

Works like a champ!   Now the actual menu in maintained in only one place (the script file) and the appearance is controlled in one place (the CSS style file).   If I add another page, I only need to add a "PutMenuEntry" line to the "CreateMenu" function in the script file and the new button appears on the menu on all the pages.

Only thing difficult is that the title of an html file must be the same as the label on the menu button if you want it's button to not show up when that page is displayed.  If you don't mind having a menu button that just reloads the current page, then it doesn't matter.  Or...  you could get ambitious and add another parameter to the "PutMenuEntry" function to use for disabling the button for that page.

Oh, you might be interested in the CSS that makes this look like a real menu.  Here it is:

The menu itself:

Code: [Select]

    #menu    /* menu only appears once on any given page  */
    {
      position: absolute;
      top: 140px;
      left: 10px;
      height: auto;
      width: 120px;
    }

The menu entries (the buttons):

Code: [Select]

    .menu_entry
    {
      border-style: solid;
      border-width: 2px;
      border-color: black;
      border-radius: 5px;
      padding: 5px;
      font-size: 18.0px;
      text-align: center;
      color: green;
      background-color: lightgreen;
    }

    .menu_entry a:hover
    {
      font-weight: bold;
      color: blue;
    }


So, feel free to use any of this you find helpful.  Enjoy and think of me....

[parnote]

How about a link to a page where you use this, so we can see it in action?

[YouCanToo]

Seems like a lot to go through for a common menu when there are things like php and shtml that can do the same thing.

[The Chief]

How about a link to a page where you use this, so we can see it in action?

Sorry - guess I should have thought of that.

It's here:  http://www.douglascountygensoc.org/

[The Chief]

Seems like a lot to go through for a common menu when there are think like php and shtml that can do the same thing.

Well, maybe...  I  wouldn't know.  What you're doing is telling someone with a pen and pad that it looks neater with a laser printer.

[The Chief]

Seems like a lot to go through for a common menu when there are think like php and shtml that can do the same thing.

After a bit of digging around, I don't see much difference with PHP, and  in fact, it appears the menu entries would be harder to maintain, since you have to type the entire menu entry code each time you add one.  I'm letting a function fill in the grunt work, so only have to get it right once.  Never type anything twice, if you can prevent it - programmers screed.

[ternor]

My study of javascript never reached the point where I could write scripts such as that described here.

This may not achieve what is required but it might.  I have recently begun using the object tag to insert content into html pages.  I haven't been able to get links in the insert to anchors within the insert to work but links to external pages work.

[YouCanToo]

Seems like a lot to go through for a common menu when there are think like php and shtml that can do the same thing.

After a bit of digging around, I don't see much difference with PHP, and  in fact, it appears the menu entries would be harder to maintain, since you have to type the entire menu entry code each time you add one.  I'm letting a function fill in the grunt work, so only have to get it right once.  Never type anything twice, if you can prevent it - programmers screed.

Not at all. You would just add

Code: [Select]

<?php include("path/to/menu"); ?>

where ever you wanted your menu or information to appear in your page.

In shtml you would add something like

Code: [Select]

<!--#include file="menu.html" -->

If you want to make a change to the menu You simple make the change to one small file and it changes on all the pages.

This webpage uses php include for the menus, news, quick links and ads.   http://linuxforall.com

The best part is that this DOES NOT depend on the client end having something enabled like JavaScript or Java. Nothing worse them having a menu or other piece of information not being displayed because your viewer (client) has turned off JavaScript or Java in their web browsers.

[The Chief]

Not at all. You would just add

Code: [Select]

<?php include("path/to/menu"); ?>

where ever you wanted your menu or information to appear in your page.

True, but creating a new menu entry requires typing all the linkage and other code again.  My system doesn't.

In shtml you would add something like

Code: [Select]

<!--#include file="menu.html" -->

If you want to make a change to the menu You simple make the change to one small file and it changes on all the pages.

That's what mine does - except I don't have to recreate all the href linkage code.

The best part is that this DOES NOT depend on the client end having something enabled like JavaScript or Java. Nothing worse them having a menu or other piece of information not being displayed because your viewer (client) has turned off JavaScript or Java in their web browsers.

Well, I figure that's his loss, since so much of the web utilizes JavaScript.  Just as turning off flash caused him to miss out on videos, too.    Most web sites are crested for the typical user, not the few that would bother to do such tweaking.

[kjpetrie]

I think you're missing the point. You don't put a fresh file in for every menu item. You have a file called (say) "menu.html" somewhere on the server (preferably outside document root so it can't be downloaded separately:

Code: [Select]

<div id="menu">
  <p><a href="somewhere.php">Somewhere</a></p>
  <p><a href="over.php">Over</a></p>
  <p><a href="the.php">The</a></p>
  <p><a href="rainbow.php">Rainbow</a></p>
</div>

You would use CSS to lay the menu paragraphs out as you want (Even alongside each other if you want a horizontal menu), add colours and borders etc.

Then, in each page you simply put:

Code: [Select]

<?php include '/path/to/menu.html' ?>and the contents are included, just as if you wrote them out on every page.

When you want to change or add an entry, you just add it to menu.html and it instantly appears on all the pages containing the include statement. If you write a new page you just have to add the include statement and the whole menu appears there too.

Moreover, because it's server-side, the links are visible to search engines, which with JavaScript they're not. In fact, if you can use the "xbit hack" to run PHP without naming the pages with the .php suffix, no one need even know you're using PHP to generate the pages.

Learning PHP will take time, but using the includes is an excellent way in because it's instantly labour-saving and you can learn the rest later as and when you need it.

If you want to take it further you can make the menu file "menu.php" and write something  like:

Code: [Select]

<?php
$mymenuitems=('Somewhere','Over','The','Rainbow');
?>

<div id="menu">
  <?php
  foreach($mymenuitems as $item){
    echo '  <p><a href="'.strtolower($iten).".php>$item</a></p>\n";
  }
  ?>
</div>
which will generate the same output without you having to write any new HTML at all. To add a new page called "Bluebirds" (bluebirds.php) you would simply add "Bluebirds" to the $mymenuitems array and it would be linked as soon as the menu file is saved. You'd have to change the include statement to reflect the file being called "menu.php" instead of "menu.html", of course.

[YouCanToo]

Not at all. You would just add

Code: [Select]

<?php include("path/to/menu"); ?>

where ever you wanted your menu or information to appear in your page.

True, but creating a new menu entry requires typing all the linkage and other code again.  My system doesn't.

In shtml you would add something like

Code: [Select]

<!--#include file="menu.html" -->

If you want to make a change to the menu You simple make the change to one small file and it changes on all the pages.

That's what mine does - except I don't have to recreate all the href linkage code.

The best part is that this DOES NOT depend on the client end having something enabled like JavaScript or Java. Nothing worse them having a menu or other piece of information not being displayed because your viewer (client) has turned off JavaScript or Java in their web browsers.

Well, I figure that's his loss, since so much of the web utilizes JavaScript.  Just as turning off flash caused him to miss out on videos, too.    Most web sites are crested for the typical user, not the few that would bother to do such tweaking.

That kinda sounds like the same thing that those who create webpages that only work in IE do.  Sure there maybe more people that do then don't but why rule out any of your viewers  If you feel the need to use javascript for your menus, perhaps it would be ideal to check if the client has it turn on or off and if it is off warn them.  Personally I believe that a web site menu is something a good programmer doesn't takes for granted or would leave it such that if the client should have such a client side scripting program turned off would leave the client unable to navigate their web site.

[The Chief]

I think you're missing the point. You don't put a fresh file in for every menu item.

Neve mad that claim..

You have a file called (say) "menu.html" somewhere on the server (preferably outside document root so it can't be downloaded separately:

Code: [Select]

<div id="menu">
  <p><a href="somewhere.php">Somewhere</a></p>
  <p><a href="over.php">Over</a></p>
  <p><a href="the.php">The</a></p>
  <p><a href="rainbow.php">Rainbow</a></p>
</div>

What does it take to add a menu entry? Do you have to type " <p><a href="somewhere.php">Somewhere[/url]</p>?"  What labels the menu button?

In my system, I just add  a " PutMenuEntry("index.html", "Home");" and both the linking and labeling is done, as well as preventing the link form showing up on the page it links to.

Then, in each page you simply put:

Code: [Select]

<?php include '/path/to/menu.html' ?>and the contents are included, just as if you wrote them out on every page.

No different than me putting in "CreateMenu()," and actually takes more typing with more chances of errors.

When you want to change or add an entry, you just add it to menu.html and it instantly appears on all the pages containing the include statement. If you write a new page you just have to add the include statement and the whole menu appears there too.

Every new page starts from my page template, which already had almost everything except the actual content.   Menu changes take place in the script file and the css file.

Moreover, because it's server-side, the links are visible to search engines, which with JavaScript they're not. In fact, if you can use the "xbit hack" to run PHP without naming the pages with the .php suffix, no one need even know you're using PHP to generate the pages.

Not sure why I would care.

Learning PHP will take time, but using the includes is an excellent way in because it's instantly labour-saving and you can learn the rest later as and when you need it.

That's true of javascript, too.  And CSS...  And HTML... 

When they threw me in this briar patch, with instruction to update and maintain a long neglected and awful looking website, even with my programming background, I had to do an emergency learn of HTML to even get started.  Then I had to learn CSS to try to make it look decent.   Then the total hassle of adding menu entries - the original used gifs for the buttons (three different ones for each), and I had no way to create new ones, was bugging me something fierce.   So, I learned some JavaScript and solved my problem.  I felt pretty good about it, and thought I'd share.

I know you aren't intentionally trying to rain on my parade, and PHP is probably the next thing in the queue.  Then there is something called ASP that I need to investigate...  And further work on forms along with the HTML5 and CSS3 changes...

I'll get there.

[YouCanToo]

When they threw me in this briar patch, with instruction to update and maintain a long neglected and awful looking website, even with my programming background, I had to do an emergency learn of HTML to even get started.  Then I had to learn CSS to try to make it look decent.   Then the total hassle of adding menu entries - the original used gifs for the buttons (three different ones for each), and I had no way to create new ones, was bugging me something fierce.   So, I learned some JavaScript and solved my problem.  I felt pretty good about it, and thought I'd share.

I know you aren't intentionally trying to rain on my parade, and PHP is probably the next thing in the queue.  Then there is something called ASP that I need to investigate...  And further work on forms along with the HTML5 and CSS3 changes...

I'll get there.

You should feel good that you have learned to maintain and created pages for the web site!

ASP (Active Server Pages) is Microsoft's first server side scripting engine that enables you to make dynamic and interactive web pages.  If you need to run .asp on a Linux server the system will need to have the module mod_mono installed.  There is NO mod_mono module in Synaptic on PCLinuxOS. If you are however using Centos (mod_mono-1.2.1-1.el5.centos.x86_64) or RHEL (mod_mono-2.10-3.fc17.x86_64.rpm) there are mod_mono modules available for them

PHP comes to the rescue. PHP can interpret some .asp tags. To do so one need to edit the /etc/php.ini file. ASP tags are turned off by default in PHP

; Allow ASP-style <% %> tags.
; http://www.php.net/manual/en/ini.core.php#ini.asp-tags
asp_tags = Off

If it were me, and I were setting my priorities on what I needed to learn, .asp would not be in the running. I would take the time to learn PHP as it runs on a wider number of web servers, including Windows IIs.

No matter on how well you learn this stuff it is always changing.

[The Chief]

You should feel good that you have learned to maintain and created pages for the web site!

I do!  As a septuagenarian, successfully picking this stuff up on my own, I feel pretty good about it.

If it were me, and I were setting my priorities on what I needed to learn, .asp would not be in the running. I would take the time to learn PHP as it runs on a wider number of web servers, including Windows IIs.

I agree, and PHP is probably next.  The only thing that concerns me is testing - how difficult is it to test on my local machine before I upload to the site?

No matter on how well you learn this stuff it is always changing.

Which is why I love C so much - it hasn't changed in 30 years (or more) and is still perfectly adequate for almost any job.

But, along the way, in my working career, I also had to learn many other languages.  Pascal, Basic (mostly DEC), Coral, Force, VOSC, Vital, some Fortran and of course C++ and assorted assembly languages.  And even had to create a couple of highly specialized scripting languages.

[YouCanToo]

If it were me, and I were setting my priorities on what I needed to learn, .asp would not be in the running. I would take the time to learn PHP as it runs on a wider number of web servers, including Windows IIs.

I agree, and PHP is probably next.  The only thing that concerns me is testing - how difficult is it to test on my local machine before I upload to the site?

I just added 'apache-base' and 'mod_php' from synaptic.  You need to place you .php files in /var/www/html and they will be server from http://localhost/filename.php