PDA

Click to See Complete Forum and Search --> : Displying Text one by one.

urxlnc
01-18-2003, 09:39 AM
Hi,

I need some help, I am not a professional web developer but a software developer, however I have good knowledge of HTML but I suck at JavaScript. I am currently creating my own web site, and now I am facing a problem.

I have on my web site, some hundred of different lines like verses. Which I want to store on server and not to display all in one page.

For Example. There are 100 lines and I want to display one line per page, and give the user option, BACK and NEXT if the user selects next the pervious line should become invisible and new line should be visible.

Another problem is, the user can enter a line number in text box and press go to display the particular line, like the user enter 10 and 10th line will be visible.

I want to store all lines in one javascript file and display it as I want, without reloading the page when user press next. I don't want to use ASP or PHP or CGI. Just in plain JavaScript and HTML.

Your help will be appriciated.

Thanks in Advance.
Vladdy
01-18-2003, 10:01 AM
<script>
lines = new Array('line1','line2',line3');
currentLine = 0;

function previous()
{ currentLine--;
if(currentLine<0) currentLine=0;
else document.getElementById('Line').firstChild.nodeValue=lines[currentLine];
}

function next()
{ currentLine++;
if(currentLine == lines.length) currentLine=linesLength-1;
else document.getElementById('Line').firstChild.nodeValue=lines[currentLine];
}

function goto(line)
{ currentLine = line;
if(currentLine<0) currentLine=0;
if(currentLine == lines.length) currentLine=linesLength-1;
document.getElementById('Line').firstChild.nodeValue=lines[currentLine];
}
</script>

... somewhere in html ...

<p id="Line">Your first line is here</p>

... call the navigation functions using onclick events for whatever you use to display Next and Previous.
... use onchange event of a text input for the goto function
khalidali63
01-18-2003, 10:02 AM
try the attached solution,
add the lines below in everypage
<meta name="Page" content="3"></meta>
<title>Untitled</title>
<script src="displayLine.js" type="text/javascript"></script>
</head>
<body>
<div id="lineDisplay" style="position:absolute;"></div>

change the meta tags content attributes value accordingly

hope this helps

Khalid
Webskater
01-18-2003, 10:08 AM
In the reply above what is the difference between using:
firstChild.nodeValue
and
firstChild.value
Vladdy
01-18-2003, 10:13 AM
Also, for a more involved sequential content, you can check out this script (http://klproductions.com:8080/wdscp.html) of mine (site is still under construction).
Vladdy
01-18-2003, 10:18 AM
There is no value attibute in DOM Level2 Core. The text node values are stored in the nodeValue.
urxlnc
01-18-2003, 11:17 AM
Thanks all for suggestion, but the data is very big almost 5,000, can't make arrays, other help??:confused:
khalidali63
01-18-2003, 11:51 AM
Well one of the next options possibly is use Java applet in conjunction with the JavaScript .
In the Java Applet you can use database/collections/a text file or even an xml file to fetch the line.This approach gives you the ability to have millions of records as well.

What you'd need to do is pass the page index exactly as I shown in my last post in the zipped solution(meta tag attribute content) to the java applet method that will return a single string based upon the page index(metat tag attribute contents value),and the line will be displayed without any problem with JavaScript.

the applet may look like this.


import java.io.*;
import java.applet.*;

public class ReadLines extends Applet{
public String getLine(int index){
//your line getting routine
//read file
//read xml file/
//read database
return getMessageLine(index);

}
}


in your HTML page import the applet

<APPLET CODE="ReadLines.class"
NAME="readLineApplet"
HEIGHT=100 WIDTH=100>
</APPLET>


and in the javascript import file attached with my last post replace this line of code

document.getElementById("lineDisplay").innerHTML = lines[lineIndex-1]

with this

document.getElementById("lineDisplay").innerHTML = document.readLineApplet.getLine(parseInt(lineIndex));


cheers

Khalid