Fixed! Check out the result

[reverend boltron]

I am trying to make a webpage that will go to different parts in a text field, or something similar.

I would also like to be able to format the text in a text field, or something similar. The field doesn't have to be a text field, but I would like for it to have the ability to be in a fixed area with scroll bars. The only formatting I would need would be bold, italics, and color, if that makes any difference.

The way I would like to have it set up is something along the lines of what I have attached.

I don't mind going a different rout at all, and I don't mind learning Java or JS or PHP or whatever it is that I have to do. I have all of the verses in an excel spreadsheet. They are ordered numerically by book, chapter and verse, so there will be no duplicate values and anything that is added will be put in the appropriate place by a sort. I tried setting up a MySQL server but so far I am too lame to do this. I am taking a MySQL and PHP class for college, but that hasn't started yet. So if I can get a different version of this working that would be great.

I don't know too much about all of the attributes of forms or what to use to replace them, but I would like for the workings of the interface to be transparent. Meaning, I would rather not take time to load pages if I can get all of it loaded originally. FYI there are about 1,344 verses total, in 63 different books of the bible. So if that makes a difference in how I would go about doing this, I thought I would let you know now.

The whole point is to make it easy to go from one book to another book, chapter, or verse, without having to scroll all the way up, or have a side panel with all of the books of the bible.

Thanks!

edit:
I got it working using PHP, JS, and MySQL
voxverum

 

[plzunlockahurtt]

I think what you maybe want to do is use a <div> wrapper around your content instead of a form and textareas and use javascript to manipulate its innerHtml property. The contents of a textarea tag are not parsed by the browser meaning text formatting tags you put in there will not be honored. But the contents of a div are.

The other option is instead of using the innerHtml property of the div wrapper, just hard code your content into several div wrappers and use CSS positioning to layer them all on top one another at the same x,y coordinate. But make them all non-visible with the visibility property. Then toggle the visibility on/off for the one that has the content you want to display when the user selects from the selection menus.

 

[reverend boltron]

Originally posted by: plzunlockahurtt
I think what you maybe want to do is use a <div> wrapper around your content instead of a form and textareas and use javascript to manipulate its innerHtml property. The contents of a textarea tag are not parsed by the browser meaning text formatting tags you put in there will not be honored. But the contents of a div are.

The other option is instead of using the innerHtml property of the div wrapper, just hard code your content into several div wrappers and use CSS positioning to layer them all on top one another at the same x,y coordinate. But make them all non-visible with the visibility property. Then toggle the visibility on/off for the one that has the content you want to display when the user selects from the selection menus.

Would 1344 div layers be a problem? I'm not trying to be a smart-Aleck, I'm being serious.

 

[ahurtt]

I think that would really depend on how much content was in each one or how many megabytes of total data are in the page you'd be loading at one time. It is also dependent on each end users computers capabilities as far as how much RAM and CPU power their computer has. Obviously, 1344 does seem a bit excessive. I'd imagine that is going to make for some very long and unwieldy select list option sets. I think most relatively modern computers could handle the 1344 divs but the thing to consider is will it be usable by people? And for people on slower dial-up connections, how long will it take them to download the entire page contents? For that reason, maybe it would be better to come up with a way to logically divide up the information into more than just 1 html page.

I think after having looked more, I maybe understand a little better what your original intent was. You want the entire text in one scrollable box and when they user selects something in the select menus above, the scrollable text in the box jumps to a spot that corresponds with what the user selected in the option list. Is this right? In that case, the toggling visibility thing I suggested might not be what you actually want.

I think there is a css style attribute that can be applied on div tags called "overflow" which you can set as "auto" for example which will cause the browser to display scrollbars for any content in the div that overflows it's bounding box. So say you have a div defined to be 80 columns in width and 20 rows in height. You want to put 50 rows of text in it. If you apply the overflow style attribute to that div, then it will create a scrollbar to allow you to scroll down to the hidden 30 rows that overflow the bounds of the div box.

As a matter of fact, that is probably how the code sample scrolling box from your original post above was made by this forum.

 

[GoatMonkey]

Here is roughly what I would do. I have not tried to run this code, so it's probably very buggy and not entirely thought through. But it may give you some ideas.

//You can make an xml file for each book. Then read each set of data in on demand.

//You would also want some drill down menus for your drop down lists. What I mean is that as you select an item if the first drop down list it should rebuild the second drop down list based on what was selected.

//When an item is selected in the first list it would have to do 2 things, load the xml file for that book, and fill the second drop down list.

//I would handle this by making an array of custom objects.

//To make the custom object you have to make a function of the object you want to build.

//note, this code doesn't handle adding items to the select/options lists. Maybe someone else can give a sample like that.

<html>
<head>
<title>test</title>
<script type="text/javascript">


function BibleVerseClass(){
var book = "";
var verse = "";
var verseText = "";
}


//Then you would have to build an array of those objects.
var bibleBooksArray = new Array(62); //62 for books 0-62 = 63
//var bibleVersesArray = new Array(); //unknown size


//multiple bibleVerseArrays will be built, one for each book
//the verse arrays will go inside the book arrays
function bibleVerseArrayAdd(book, verse, verseText, bibleVerseArray){
var verseSize;
var bibleVerse = new BibleVerseClass();
bibleVerse.book = book;
bibleVerse.verse = verse;
bibleVerse.verseText = verseText;
verseSize = bibleVersesArray.length;
bibleVerseArray[verseSize + 1] = bibleVerse;
return bibleVerseArray;
}

function addVerseArrayToBooksArray(bibleVerseArray){
//this function should check the array for duplicates before adding.
//you could use the selectedIndex of the option list to add items to this array
//it's kind of cheesy, but they should match.

var booksSelectedIndex;

//i don't remember the exact code for getting the selected index, but it's something like this...
booksSelectedIndex = document.getElementById("books").selectedIndex;

bibleBooksArray[booksSelectedIndex] = bibleVerseArray;

//the scope of the bibleBooksArray is outside this function, so no return is required.
}


function createAjaxObj(){
var httprequest=false
if (window.XMLHttpRequest){ // if Mozilla, Safari etc
httprequest=new XMLHttpRequest()
if (httprequest.overrideMimeType)
httprequest.overrideMimeType('text/xml')
}
else if (window.ActiveXObject){ // if IE
try {
httprequest=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
httprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return httprequest
}


function loadXMLDoc(url)
{
//alert(url);
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}


function processReqChange()
{
var responseXML;

if (req.readyState == 4) {
if (req.status == 200) {
response = req.responseText;
responseXML = createXMLFromString(response);
var book;
var bookTitle;
var verseId;
var verseText;
book = responseXML.getElementsByTagName('book')[0].childNodes;
var bibleVerseArray = new Array();

for (i=0; i < results.length; i++){
//this is the key section for getting the xml.
//it may not be exactly right, but it's something roughly like this
bookTitle = responseXML.getElementsByTagName('bookTitle')[0].childNodes.text;
verseId = responseXML.getElementsByTagName('verseId')[0].childNodes.text;
verseText = responseXML.getElementsByTagName('verse')[0].childNodes.textContent;

bibleVerseArray = bibleVerseArrayAdd(bookTitle, verse, verseText);

}
addVerseArrayToBooksArray(bibleVerseArray);

} else {
alert("There was a problem retrieving the XML data:\n" + req.statusText);
}
}


function createXMLFromString (xmlStringIn) {
var xmlParser;
var msxmlParser;
var xmlDocOut;
try {
if (window.DOMParser && !XMLDocument.loadXML){
//mozilla
xmlParser = new DOMParser();
xmlDocOut = xmlParser.parseFromString(xmlStringIn, 'text/xml');
return xmlDocOut;
} else {
//ie
msxmlParser = new ActiveXObject("Msxml2.DOMDocument.4.0");
msxmlParser.loadXML(xmlStringIn);
xmlDocOut = msxmlParser;
return xmlDocOut;
}
}
catch (e) {
output("Can't create XML document.");
return null;
}
}
function getBookXML(currentHtmlObject){
var url;
//selected item again. I'll have to look that up later.
url = currentHtmlObject.selectedItem.value;
url = url + ".xml";
//the filename should match the bookname.xml format for this to work.

loadXMLDoc(url)

}
function selectVerse(currentHtmlObject){
var selectedBookId;
var selectedVerse;
var book;
var bibleVerse;

selectedBookId = document.getElementById("book").selectedIndex;
selectedVerse = document.getElementById("verse").selectedIndex.value;

//navigate to the item in the arrays
book = bibleBooksArray[selectedBookId];
bibleVerse = book[selectedVerse];

document.getElementById("verseText").innerHTML = bibleVerse.verseText;
}

</script>
</head>
<body>
<form>
Book:<br />
<select name="book" id="book" onchange="getBookXML(this);">
<option id="genesis">Genesis</option>
<option id="exodus">Exodus</option>
</select>
Verse:<br />
<select name="verse" id="verse" onchange="selectVerse(this);">
<option id="0">1</option>
<option id="1">2</option>
</select>
<br /><br />
<div id="verseText"></div>
</form>

</body>
</html>


//genesis.xml
<?xml version="1.0" ?>
<book >
<bookTitle>Genesis</bookTitle>
<verses>
<verse verseId="1">
in the beginning there was html...
</verse>
<verse verseId="2">
and it was good.
</verse>
</verses>
</book>

 

[reverend boltron]

Thanks! When I am free I will try that out. I have been learning JS so I will see where these routes take me.

 

[reverend boltron]

I appreciate your help GoatMonkey, but I got a lot of errors when I tried running that. I will look into your setup in more depth because I think it has a lot of potential behind it. I have been looking at using frames and JS as well. I'm trying to figure a way out where I can do this simply and efficiently.

Populating the select fields might be tough, but I was thinking that for the chapter and verse boxes, I would just have that info stored on the book page. So if it was gen.xml, I would have an array like, chapters={4,5,33,48} (or however the syntax would be). So it would populate the list that way. Then something similar for the verse list as well.

 

[GoatMonkey]

Yeah, it probably has tons of errors. It wasn't meant to be a complete working sample, just something to point you in a general direction.

 

[reverend boltron]

If anyone is interested, I ended up doing a lot of learnding.
First I learned XML, which wasn't really learning anything.
Then I learned XSL/T, XQuery, XPath as well.
I thought I was going to go the route of using div layers and xml parsing...
Well, I finally learned CSS too, which is really neat, and I'm glad that I did.
Then I started messing with JavaScript, which is really easy as well. I have a pretty strong C++ background, so most of this stuff was just learning new syntax, or getting to understand databases.

Well, after doing some messing around with hiding and showing div boxes, I realized that it would take much too long to load up 1,344 different boxes, and I wanted my site to be a site with dynamic content, not just the illusion of dynamic content.
So I learned MySQL and PHP. I didn't master them. I don't know if I really learned them either. But what I did end up doing was messing around with AJAX a bit and figuring out how to connect to my database and whatnot.

I was really stuck for a while because I couldn't figure out how to connect to my sites database and why everyone was using 'localhost' in their PHP scripts until I realized that it was server side scripting, and I almost laughed because of the amount of research that I had done trying to connect to my database.

Well, to say the least, I read a ton, and I learned a lot (I think), and I finally got it running the way I want it to run (for now). But it loads much much faster than any other way it was before, it has dynamic select boxes that change the content of their children boxes when you choose a different book (so the different chapters will be populated, and then the different verses will be populated), and all you have to do is click on a verse. Then it goes off to the database and puts the verse on the page using PHP. I am pretty happy.

If anyone would like to check it out, you are more than welcome to, and tell me what you think!

I don't have a lot of time to work on the pages because I'm in the Philippines doing a missionary internship. I realize that the site isn't nearly completed also. This is my first "real" website, and I have no prior web experience, so please, be gentle.
VoxVerum

I can say that one of the biggest things that I drew from this little adventure was that organization is amazing. When you remove the styling from the HTML with CSS, and you remove the dynamic content with the PHP, and you set everything up nicely with your XML, your HTML can be used for what it was intended for. And it saves you a lot of time in the long run.

The other thing I learned is that W3Schools is your friend.

 

[gregor7777]

Originally posted by: reverend boltron


The other thing I learned is that W3Schools is your friend.

There is much truth in this.