Access anchor tags in multiple files. 1

JBorges · Jan 12, 2009

Hi,

I have directory named 'Library'. This contains a subfolder named 'Books', i.e., 'Library/Books'. In the 'Books' folder I have placed 70 html-files, dubbed 1, 2, 3, ... 68, 69, 70. What I would like to do is when I type in the page number '154' in an input field it knows in which of the 70 files where the anchor tag '<a name="154"> is located and subsequently takes me to the place in the specific file containing this tag.

It is possible with this code:

<input type="text" value="" onchange="window.location = 'EntireBook.html/#' +
this.value;" />

However, this code requires that all the chapters of a certain book is placed in the 'EntireBook.html' file. But to make the editing of files more managable, easier to overview, and the files not so big I prefer to have each chapter in seperate files.

I hope someone can help and that I have clarified it well enough.

Cheers Philip

BillyRayPreachersSon · Jan 12, 2009

If you want each chapter in its own file (e.g. 'Book1Chapter1.html' -> 'Book1Chapter70.html') then you can replace this:

Code:

onchange="window.location = 'EntireBook.html/#' + this.value;"

with this:

Code:

onchange="window.location = 'Book1Chapter' + this.value + '.html';"

If each file doesn't represent a single chapter, then you'd need some sort of array or lookup table detailing which files hold which chapters.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

JBorges · Jan 13, 2009

Thanks Dan for your help.

The code you include here makes you able to retrieve any 'chapter'-file. That is fine if you only desire the chapters. Yet, I'm seeking a way to access the anchor tags, called <a name="pageWhatever"> in the various chapter-files. So I need to know how to let the input field know where a specific anchor is placed in which file.

Say, I would like to go to page 79 in MyBook and page 79 is located in chapter 8. Then, when I type in '79' in the input field it goes automatically to the anchor tag called <a name="page79"> in the html-file, chapter8, in MyBook.

Then, later I would like to go page 183 in chapter 16 of the same book. Then, again when I type in '183' in the input field it goes automatically to the anchor tag called <a name="page183" in the html-file, called chapter16, in MyBook, and so I can start reading from page 79 or 183.

I hope this is more clear.

Philip

BillyRayPreachersSon · Jan 13, 2009

Then you'll need a lookup table to know which chapters are in which file. This could get messy if you often modify which files any chapter is in, but that's your problem ;-)

There are many ways to create this lookup table - you could have a 1-1 mapping for all chapters to their relevant file, but I'd have thought a more compact way would be to store the first and last chapters in any particular file, e.g.:

Code:

<html>
<head>

	<script type="text/javascript">
		var fileToChapterList = {};
		fileToChapterList['Book1File1.html'] = { first:1, last:5 };
		fileToChapterList['Book1File2.html'] = { first:6, last:7 };
		fileToChapterList['Book1File3.html'] = { first:8, last:8 };
		fileToChapterList['Book1File4.html'] = { first:9, last:20 };

		function getFileFromChapter(theChapter) {
			for (file in fileToChapterList) {
				var currentFile = fileToChapterList[file];
				if (theChapter >= currentFile.first && theChapter <= currentFile.last) {
					window.location = file + '#chapter' + theChapter;
					return file;
				}
			}
			alert('Chapter not found');
		}
	</script>
</head>

<body>
	<input type="text" value="" onchange="getFileFromChapter(this.value);" />
</body>
</html>

Then in your files, you'd use bookmarks like:

Code:

<h1 id="chapter8">Chapter 8</h1>

This works for me...

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

JBorges · Jan 13, 2009

Thanks for that.

I don't mean to be so bothersome and difficult... but it doesn't really do what I would like ... I really appreciate your patience and help.

Am I explaining myself clear enough? I hope so.

So I would like to type in a number in the input field, which takes me to the corresponding bookmark, or anchor tag, of the correct file.

The same way when you link to a section on the same web page. Only now the input field needs to figure out to open the corresponding file that contains the typed in number, or anchor tag.

Each file represents a chapter, as we know. The number typed in represents the anchor tag. And in the chapter files I have put the bookmarks, or anchor tags, this way: <a name="page7"/> and so forth.
So the input field links to the desired anchor tag, showing it on screen.

The file tree looks like this: MyBook/1.html, 2.html, 3.html, ... 48.html, 49.html etc. File 1.html, which is also chapter 1, contains pages 6-13, file 2.html contains pages from 14-21 ... etc. So when I type in 18 the input field knows that page 18 is to be found in file 2.html and therefore scrolls, or jumps, down to the section in 2.html where page 18 starts.

So far the code doesn't seem to take me to the desired bookmark, or anchor tag. I try to include as much information as possible.

Or, perhaps I'm just not clever enough to work this out :-/

BillyRayPreachersSon · Jan 13, 2009

The code I've given does exactly what you've asked for.

You will need to update the file name list, and the naming scheme for anchors, of course.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

BillyRayPreachersSon · Jan 13, 2009

... and any path differences (I assumed everything is in the same folder).

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

ChrisHunt · Jan 13, 2009

Just butting in here...

Are "pages" a useful concept in an online document? I can see the wisdom in putting each chapter in its own file, but pages? Why would you care that a particular bit of text was on page 7 of a dead tree instead of page 8?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

JBorges · Jan 13, 2009

It works!!!

A 1000s apologies for my mistake. I got confused by this part { first:1, last:9 };, but that of course refers to the anchor tags. I've made some personal adjustments to the code to reflect what it does.

Thank you so much for patient assistance. You really made my day :-D

All the best, Philip

feherke · Jan 13, 2009

Hi

Here on Tek-Tips we used to thank for the received help by giving stars. Please click the

* [navy]Thank BillyRayPreachersSon
for this valuable post![/navy]

at the bottom of BillyRayPreachersSon's post. That way you both show your gratitude and indicate this thread as helpful.

Feherke.

http://rootshell.be/~feherke/

JBorges · Jan 13, 2009

Hi Chris,

The files used are offline. I'm making my own offline reference work. So when I need to go to a certain page of book, put in my reference work as an electronic book ofcourse, I just type in the page number and voila! It's like having a book like Bill Bryson's "A Short History of Nearly Everything" on your computer. Everything makes perfect sense to me anyway

And a great thanks to Dan for his patient efforts. And I gave him a star. Actually wanted to do that before feherke mentioned it. But my Internet didn't work when I tried to.

This is a great forum and I really appreciate that there such sites on the Web.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Access anchor tags in multiple files. 1

JBorges

Technical User

BillyRayPreachersSon

Programmer

JBorges

Technical User

BillyRayPreachersSon

Programmer

JBorges

Technical User

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

ChrisHunt

Programmer

JBorges

Technical User

feherke

Programmer

JBorges

Technical User

Similar threads

Part and Inventory Search

Sponsor