Scripting with CSS

[lehrfeld]

I really want a way to have a lot of content on my site's sidebar (including the navigational stuff), but I don't want to have to open every single page and edit it if I want to add something to the menu, you know? I know about server-side includes, but I don't want to do that. I was wondering if I could just reference an external Javascript document where the HTML for the menu would normally start in the sidebar's DIV, and just edit the content in that file and it would update for every page that has that external file reference link in it.

This all seems plausible to me, but my real question is how could I implement the CSS styles I currently use on the menu (nothing too serious, but it still looks better with the CSS) into the Javascript? Could I just include a <style> tag in the quotes for each line (assuming I use a document.write line), or is it more complicated than that?

Any help you guys can offer would be great. Thanks!

- Jon

[grubesteak]

Any reason why you don't want to use SSI's? I ran into this problem awhile back and then decided to learn PHP. It was one of the best decisions I have made in my design career.

[lehrfeld]

I don't know, just because I'm too lazy to learn to program PHP. I'd really just like to insert some Javascript and be done with it. I tried using SSI's on a previous design and it just wasn't working too well for me. The thing is, I'm a very casual designer, nothing too fancy, just enough to make it look neat and presentable for the little content I have -- I really don't need anything any more scalable than the uniformity of my menu bar.

[Bill Posters]

I also used to have the same attitude towards PHP which you appear to have and consequently, I put off dabbling in it for a long time. It seemed intimidating as though it might mean a large learning curve.
However, one quiet afternoon, I thought I'd take a look at PHP includes with a vie to making site development, construction and maintenance simpler for myself.
Literally within minutes I had my first include up and running.

You don't have to 'learn PHP' just to use small features such as includes.
With a smattering of understanding of the basics - namely how you open and close a php passage and understanding that you (usually) need to give pages with php passages a .php suffix - then using php includes is no more complex than this:


…

<?php include("mymenu.php"); ?>

…

The mymenu.php document would literally contain only the markup for your menu.
And that's really all there is to it.
(The mymenu doc can actually have the .html suffix if there's no <?php … ?> passages within it, but I usually default to using the .php suffix now, mostly for the sake of 'tidiness' in the directories.)

Similarly, you can have numerous includes used throughout a document in order to bring in different sections such as the doc headers, menus, footers, …, pretty much anything that gets repeated on a number of pages and requires updating with any regularity.

PHP is extremely easy to get to grips with, especially when it comes to the basics, which can largely be used in the same copy/paste way that javascripts often are. (Fwiw, the php syntax is very similar to that of javascript, so if you're at all used to viewing javascript, you're likely to find understanding and using php easy from the outset.
Although you don't need to learn more, like me, you may well find yourself being seduced by what PHP can do for you and your sites.
I'm miles away from being a guru and, in fact, I have no interest in developing my php skills to expert levels. I know just what I need to know in order to do the things I want to use myself.

There are plenty of good resources online, not least of which is the manual available at www.php.net - which is also more 'accessible' to beginners than you might think.
Additionally, you might consider a couple of books.
PHP in Easy Steps (http://www.amazon.co.uk/exec/obidos/ASIN/184078282X/) and PHP for the World Wide Web (http://www.amazon.co.uk/exec/obidos/ASIN/0321245652/) are two books which helped introduce me to the basics and both books are written in a way that enables you to cherry pick just the bits you want without demanding that you 'learn php'.

[glenngv]

What they said. Plus if you use javascript to display the menu and the javascript is disabled or not supported (about 10%), you won't have any navigation menu on your page.

[lehrfeld]

Alright, thanks a lot guys. Perhaps I'll give it a look -- I work at B&N so I can easily pick up a book if need be.

[lehrfeld]

So I can just rename index.html to index.php (and same thing for all the other pages that have PHP includes), and then add the line

<?php include("menu.php"); ?>

to where I want the menu to be? Of course the actual menu file is called menu.php. So this should all work, right? But I'm just getting a blank area where the menu should be inserted. This is what the HTML for my menu looks like. It involves a lot of CSS, so it's kind of messy...

<div style="background-color: #ffffcc; width: 20%; margin-left: 10px; border-right: 1px solid #cccccc;">
<p style="margin: 0; font-size: 1.5em;"><a style="display: block; color: #000000; text-decoration: none;" href="#">Past</a></p>
<p style="font-size: .8em; margin-top: 0; margin-bottom: 10px; border-top: 1px solid #000000; width: 80%;"><a style="color: #666666;" href="http://jon.lehrfeld.net/past/reviews/index.php">Reviews</a>, <a style="color: #666666;" href="http://jon.lehrfeld.net/past/poetry/index.php">poetry</a>, <a style="color: #666666;" href="http://jon.lehrfeld.net/past/rants/index.php">rants</a>, and <a style="color: #666666;" href="http://jon.lehrfeld.net/past/galleries/index.php">galleries.</a></p>
<p style="margin: 0; font-size: 1.5em;"><a style="display: block; color: #000000; text-decoration: none;" href="#">Present</a></p>
<p style="font-size: .8em; margin-top: 0; margin-bottom: 10px; border-top: 1px solid #000000; width: 80%;"><a style="color: #666666;" href="http://jon.lehrfeld.net/blog/">My blog</a>, <a style="color: #666666;" href="http://jon.lehrfeld.net/present/links/index.php">links</a>, <a style="color: #666666;" href="http://jon.lehrfeld.net/present/contact/index.php">contact</a>, and <a style="color: #666666;" href="http://jon.lehrfeld.net/present/faq/index.php">F.A.Q.</p>
<p style="margin: 0; font-size: 1.5em;"><a style="display: block; color: #000000; text-decoration: none;" href="#">Future</a></p>
<p style="font-size: .8em; margin-top: 0; margin-bottom: 10px; border-top: 1px solid #000000; width: 80%;"><a style="color: #666666;" href="http://jon.lehrfeld.net/future/resume/index.php">Resume</a>, <a style="color: #666666;" href="http://jon.lehrfeld.net/future/reviews/career.php">career aspirations</a>, and <a style="color: #666666;" href="http://jon.lehrfeld.net/future/employment/index.php">current employment</a>.</p>
</div>

Since only the HTML for the menu was supposed to be in menu.php I wasn't sure if I could have a <style>...</style> tag before it, especially since there aren't distinct <head> and <body> sections. Any ideas what I'm doing wrong, or if there's a neater way to do this?

[Bill Posters]

Check the source of the page and see if it shows the included menu markup.
Let us know if it's in there or not - or whether you see the php passage (in the source) where the menu is supposed to be.

Don't forget that you'll need to view the .php page via a web server. This usually means uploading it to some webspace (which needs to support PHP) and then the php should be read and parsed, including the menu.php file into the surrounding markup.
As mentioned, you can probably install web server and PHP software on your machine which will give you the facility to view and run php pages without uploading them to webspace.
If you do install web server and php server locally, you'll need to view the page through your machines local http protocol address.
The web server software will probably depend on a web sharing folder which it will treat like a domain root for your local web pages. You'll need to place any php files somewhere within that web server folder for any php to parse.
The url usually starts with http://127.0.0.1/… (I'm assuming it's the same for Mac and Windows.)