Learn Japanese with JapanesePod101.com

View topic - Navigation bars in HTML

Navigation bars in HTML

NO SPAM ALLOWED! Discuss stuff not related to Japan or Japanese. The rules are the same in this forum as in the other forums.

Navigation bars in HTML

Postby richvh » Tue 12.05.2006 11:15 am

Calling all HTML gurus.

I'm thinking of breaking out each chapter of ゆきの物語 into individual files, and putting a navigation bar into each file (while keeping the current navigation frame), but my ISP doesn't provide access to CGI (except for a hit counter) or PHP or anything like that unless you buy a premium subscription, so I have to edit all files ahead of time. Providing links to first, previous and next files is no real problem, but changing the link to the last file would be an ever increasing headache. Is there some way I can set the value of the last file in a style sheet or something?
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby clay » Tue 12.05.2006 11:36 am

(not a HTML guru, but...)

If the naming of the files is systematic (file1.html, file2.html...), then perhaps you can write a short JavaScript bit to make a link to the next or previous file.
User avatar
clay
Site Admin
 
Posts: 2809
Joined: Fri 01.21.2005 9:39 am
Location: Florida

RE: Navigation bars in HTML

Postby richvh » Tue 12.05.2006 11:43 am

Next and previous isn't the problem, as those won't change for each file; it's the link to the (current) last file that will present a headache, as that constantly changes as I complete each new chapter (and would have to be changed in each file individually.)
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby paul_b » Tue 12.05.2006 11:49 am

richvh wrote:
Next and previous isn't the problem, as those won't change for each file; it's the link to the (current) last file that will present a headache, as that constantly changes as I complete each new chapter (and would have to be changed in each file individually.)

That's dead easy. Simply make sure that the _last_ file is actually two exact duplicates. For example you could have 'current.html' and '20061206.html'. For earlier pages the "current" link always points to "current.html".

On each page the 'next' link points to a specific day. When you have a new current file the _old_ "most recent day" file has to be changed to add a 'next' link - that's all you need to do.
Last edited by paul_b on Tue 12.05.2006 11:50 am, edited 1 time in total.
User avatar
paul_b
 
Posts: 3210
Joined: Thu 06.01.2006 9:35 am

RE: Navigation bars in HTML

Postby Chris Hart » Tue 12.05.2006 12:12 pm

richvh wrote:
Calling all HTML gurus.

I'm thinking of breaking out each chapter of ゆきの物語 into individual files, and putting a navigation bar into each file (while keeping the current navigation frame), but my ISP doesn't provide access to CGI (except for a hit counter) or PHP or anything like that unless you buy a premium subscription, so I have to edit all files ahead of time. Providing links to first, previous and next files is no real problem, but changing the link to the last file would be an ever increasing headache. Is there some way I can set the value of the last file in a style sheet or something?


One trick I used when I didn't have PHP available on the hosting site, was to set up a private server with php, write the page in it, then just run "wget -r localhost", retrieving the entire site, (and the output of the php code) and upload it to the public server.

I have used this trick on Slackware Linux, and Windows XP with Cygwin. In all cases, the local web server was Apache.

EDITED TO ADD
richvh wrote:
Next and previous isn't the problem, as those won't change for each file; it's the link to the (current) last file that will present a headache, as that constantly changes as I complete each new chapter (and would have to be changed in each file individually.)


or use the following for your "current.html", assuming the most recent is "120506.html"

<head><meta http-equiv="refresh" content="1;url=120506.html"></head>
Last edited by Chris Hart on Tue 12.05.2006 12:24 pm, edited 1 time in total.
-.. .   -.- -.-. ---.. ..- ..-. ...-

I am nerdier than 97% of all people. Are you a nerd? Click here to find out!
User avatar
Chris Hart
 
Posts: 577
Joined: Wed 07.05.2006 3:36 pm
Location: 未確認飛行物体

RE: Navigation bars in HTML

Postby richvh » Tue 12.05.2006 12:33 pm

Here's the navigation bar I made up:
Image and a sample chapter with contents panel . Suggestions for improvements?
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby paul_b » Tue 12.05.2006 1:36 pm

Chris Hart wrote:
or use the following for your "current.html", assuming the most recent is "120506.html"

<head><meta http-equiv="refresh" content="1;url=120506.html"></head>


If you do that don't forget to include a "Click here if this page does not forward in 10 seconds" type link. Quite a few people set their browsers to disable auto-forwards.
User avatar
paul_b
 
Posts: 3210
Joined: Thu 06.01.2006 9:35 am

RE: Navigation bars in HTML

Postby Chris Hart » Tue 12.05.2006 2:12 pm

paul_b wrote:
Chris Hart wrote:
or use the following for your "current.html", assuming the most recent is "120506.html"

<head><meta http-equiv="refresh" content="1;url=120506.html"></head>


If you do that don't forget to include a "Click here if this page does not forward in 10 seconds" type link. Quite a few people set their browsers to disable auto-forwards.


Good point. The HTML standard does say the user should be prompted before any forwards, although most browsers don't implement it that way.
-.. .   -.- -.-. ---.. ..- ..-. ...-

I am nerdier than 97% of all people. Are you a nerd? Click here to find out!
User avatar
Chris Hart
 
Posts: 577
Joined: Wed 07.05.2006 3:36 pm
Location: 未確認飛行物体

RE: Navigation bars in HTML

Postby richvh » Tue 12.05.2006 2:43 pm

I decided the pink background of my original navigation bar was too garish, so I changed it to the crinkled paper pattern from gimp. I'm not a graphic artist, nor an HTML guru; any thoughts on improving the appearance of the page(s)?
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby zengargoyle » Tue 12.05.2006 5:02 pm

i would probably go the Javascript route. one .js file for the functions (makeTOC(), makeNAV(), etc) and one .js file that just held an Array of information about each chapter (number, title, etc).

then in each chapter page you just do:
<html><head>
<script type="text/javascript">currChapter = 1;</script>
<script type="text/javascript" src="info.js"></script>
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript">makeHEAD();</script>
</head><body>
<script type="text/javascript">makeNAV();</script>
... maybe a couple more functions for title and stuff ..
<p>start writing
</body></html>

the bonus being that the TOC can be made automagically, or you could just change the makeNAV() or makeHEAD() functions in one place and change all of your pages.

the "private server" and 'wget' idea is also a good one. if you use a Template system, most of them even have a command that will generate the static HTML tree so you don't even need the server part. just template out your files and use the functions the template system provides, and then run the 'generate' command to make the HTML pages.

but for simplicity, the 'current.html' idea is probably the way to go. :) then crazy people like me will 'wget' your pages and start hacking on them ...
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

RE: Navigation bars in HTML

Postby richvh » Tue 12.05.2006 5:26 pm

I'm going the "current.html" route at the moment, and I've set up a template file that I only have to cut and paste the chapter into, then edit the previous and next links and page title. The /test/noruby portion is complete, now I'm working on the /test/ruby portion.

Is there a way to make a background for the page without using tables? I'm thinking of using a lighter version of the crinkled paper pattern if it isn't too much of a hassle, unless someone knows of a nice aged parchment pattern?

Edit: the first 6 chapters with furigana are up for test here.
Last edited by richvh on Tue 12.05.2006 5:40 pm, edited 1 time in total.
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby clay » Tue 12.05.2006 6:00 pm

Nice work Rich. That looks sharp and very user friendly.
User avatar
clay
Site Admin
 
Posts: 2809
Joined: Fri 01.21.2005 9:39 am
Location: Florida

RE: Navigation bars in HTML

Postby zengargoyle » Tue 12.05.2006 6:31 pm

richvh wrote:
Is there a way to make a background for the page without using tables?here.


<body background="URL">

or via CSS:

<style type="text/css">
body { background-image: url("URL") }
</style>
User avatar
zengargoyle
 
Posts: 1200
Joined: Sun 05.29.2005 10:16 pm

RE: Navigation bars in HTML

Postby richvh » Tue 12.05.2006 8:05 pm

Thanks, Zen. I've added the background to the noruby files. How do they look?
Richard VanHouten
ゆきの物語
richvh
 
Posts: 6451
Joined: Thu 09.29.2005 10:35 pm

RE: Navigation bars in HTML

Postby ashitaka » Tue 12.05.2006 8:40 pm

The noruby files fit perfectly, navigation works fine.

<body background="URL">
or via CSS:
<style type="text/css">
body { background-image: url("URL") }
</style>

I wouldn't recomend the CSS way unless you have more stuff to add and will put it in a CSS file.
<style type="text/css">
h1 { text-align: center }
h2 { text-align: center }
</style>

While this is fine for your website at the moment, it won't be such a good idea later on, might i recomend lining to a CSS file? If so put this in the head.
<link rel="stylesheet" type="text/css" href="master.css">
It makes the site look cleaner when viewing the source, ecspecialy when you start making styles and Div's.
Also puting the furigana but with bkgd.jpg would look nice.
I just noticed the linke to default.css in ruby :D
Please tell me you used an editor for the furigana, way to many <rp> </rp> tags in there to do it by hand.

Overall= great site. :D
ashitaka
 
Posts: 456
Joined: Sun 10.30.2005 1:08 pm

Next

Return to General off topic

Who is online

Users browsing this forum: No registered users and 4 guests