PDA

View Full Version : Listing items from text file on one page


Elsie
11-19-2002, 05:09 PM
I've created the attached file (you can change dvd.txt to dvd.html) which uses info from the dvdlist.txt file. Image files are also used but I haven't included these as there are too many.

The dvd file uses back and forward arrows to scroll through the list of DVDs but I want to be able to list them, one below the other, on one page. This would mean taking away the back and forward arrows, but I haven't a clue where to start.

Any suggestions would be appreciated.

beetle
11-19-2002, 05:11 PM
I don't see any attached file....

Elsie
11-19-2002, 06:32 PM
Sorry, Beetle, I'm new to this. I did attach the 2 files but obviously they didn't show through with my posting.

I've attached one file here and will attach another in next posting.

Elsie
11-19-2002, 06:33 PM
2nd file now attached.

beetle
11-19-2002, 09:22 PM
Well, javascript can't read textfiles from the server. Are you ok with storing them in a .js file instead? (format is a little different. Here's and example of what I mean.<html>
<head>
<title>Virtual DB test</title>
<style>
table.dvdList {
font: .8em Verdana, sans-serif;
border-collapse: collapse;
}
table.dvdList th {
background-color: #EEE;
border: 1px solid #666;
padding: 5px;
}
table.dvdList td {
border: 1px solid #666;
padding: 3px;
}
table.dvdList caption {
font: 1.5em 'Trebuchet MS',Verdana, sans-serif;
}
table.dvdList caption em {
font-size: .8em;
}
</style>
<script type="text/javascript">

function dvdlist(listName) {
this.listname = listName;
this.caption = "";
this.format = new Array("Title","Actor","Director","Company","Length","Year","Format","Genre","Comments");
this.list = new Array();
var i = 0;
this.list[i++] = new dvd("Cadence","Charlie Sheen, Martin Sheen","Martin Sheen","Movie Group","97 mins",1990,"NTSC","Action/Adventure","Dad and son in Army jail drama");
this.list[i++] = new dvd("Conspiracy Theory","Mel Gibson, Julia Roberts","Richard Donner","Warner Bros","130 mins",1997,"PAL","Thriller","Taxi driver with a past");
this.list[i++] = new dvd("Devils Advocate","Keanu Reaves, Al Pacino","Taylor Hackford","Twentieth Century Fox","138 mins",1997,"PAL","Thriller","Legal/Satan twist");
this.list[i++] = new dvd("Gladiator","Russell Crowe","Ridley Scott","Dreamworks Pictures","149 mins",2000,"PAL","Action/Adventure","Set in Ancient Rome");
this.list[i++] = new dvd("House II","Ayre Gross","Ethan Wiley","Digital Entertainment Ltd","88 mins",1987,"PAL","Horror","Gramps is cool!");
this.list[i++] = new dvd("Lost Boys","Jason Patric, Keifer Sutherland","Joel Shumacher","Warner Bros","93 mins",1987,"PAL","Thriller","Vampire film with a twist");
this.list[i++] = new dvd("True Lies","Arnold Swarzenegger","James Cameron","Warner Bros","135 mins",1994,"PAL","Action/Adventure","Spy action");
this.list[i++] = new dvd("Wyrd Sisters","Various (Animation)","Jean Flynn","Various","140 mins",2000,"PAL","Sci-Fi/Fantasy","Animation of Terry Pratchett book");
this.list[i++] = new dvd("Fistful of Dollars","Clint Eastwood","Sergio Leone","United Artists/MGM","97 mins",1964,"PAL","Western","Spaghetti Western");
this.list[i++] = new dvd("Few Dollars More","Clint Eastwood","Sergio Leone","United Artists/MGM","126 mins",1965,"PAL","Western","Spaghetti Western");
this.list[i++] = new dvd("The Good The Bad The Ugly","Clint Eastwood","Sergio Leone","United Artists/MGM","154 mins",1966,"PAL","Western","Spaghetti Western");
this.list[i++] = new dvd("Eraser","Arnold Swarzenegger","Charles Russell","Warner Bros","107 mins",1996,"PAL","Action/Adventure","Witness Protection type");
this.list[i++] = new dvd("6th Day","Arnold Swarzenegger","Roger Spottiswoode","Columbia Pictures","124 mins",2000,"PAL","Sci-Fi/Fantasy","Arnie clone takes over his life");
this.list[i++] = new dvd("Matrix","Keanu Reaves","The Wachowski Bros","Warner Bros","135 mins",1999,"PAL","Sci-Fi/Fantasy","Sci-Fi with excellent graphics");
this.list[i++] = new dvd("End of Days","Arnold Swarzenegger","Peter Hyams","Universal","121 mins",1999,"PAL","Action/Adventure","Fight the devil");
this.quantity = i;
this.error = "Title Not Found";
}

function dvd(title, actor, director, company, length, year, format, genre, comments){
this.title = title;
this.actor = actor;
this.director = director;
this.company = company;
this.length = length;
this.year = year;
this.format = format;
this.genre = genre;
this.comments = comments;
}

function dvdlist.prototype.display(showSort, qty) {
if (typeof qty == 'undefined') var qty = this.quantity;
document.write('<table class="dvdList"><tr>');
for (var i=0; i<this.format.length; i++)
document.write('<th>'+this.format[i]+'</th>');
document.write('</tr>');
for (i=0; i<qty; i++) {
document.write('<tr>');
for (var j in this.list[i]) {
var t = eval('this.list['+i+'].'+j);
document.write('<td>'+t+'</td>');
}
document.write('</tr>');
}
document.write('<caption>'+this.listname+((showSort)?' <em>sorted by '+this.caption+'</em>':'')+'</caption>');
document.write('</table>');
}

function dvdlist.prototype.sortBy(field) {
window.sortField = field;
this.caption = field;
this.list.sort(sortHandler);
}

function dvdlist.prototype.get(field, val) {
for (var i=0; i<this.quantity; i++) {
if (this.list[i][field] == val) return this.list[i];
}
return this.error;
}

function sortHandler(a, b) {
var aa = eval('a.'+window.sortField);
var bb = eval('b.'+window.sortField);
if (aa == bb) return 0;
return (aa > bb) ? 1 : -1;
}

</script>

</head>
<body>
<script>
var myList = new dvdlist("My DVDs");
myList.display(0);

document.write('<hr>');

myList.sortBy('title');
myList.display(1);

document.write('<hr>');

myList.sortBy('year');
myList.display(1);
</script>
</body>
</html>

Elsie
11-19-2002, 09:47 PM
Thanks, Beetle. :thumbsup:

I can't believe you did that so fast!! How much coffee have you had today?!

I'm going to try your code in a wee while. Will let you know if I'm successful - probably tomorrow. :D

beetle
11-19-2002, 10:19 PM
hehe, no coffee acutally. This is sort of a fun little project...lots more can be done with this! Here's a better version of what's above...<html>
<head>
<title>Virtual DB test</title>
<style>
table.dvdList {
font: .8em Verdana, sans-serif;
border-collapse: collapse;
width: 100%;
}
table.dvdList th {
background-color: #EEE;
border: 1px solid #666;
padding: 5px;
}
table.dvdList td {
border: 1px solid #666;
padding: 3px;
}
table.dvdList caption {
font: 1.5em 'Trebuchet MS',Verdana, sans-serif;
}
table.dvdList caption em {
font-size: .8em;
}
div.example {
color: red;
font: 1em 'Courier New', mono;
}
</style>
<script type="text/javascript">

function dvdlist(listName) {
this.listname = listName;
this.format = new Array("Title","Actor","Director","Company","Length","Year","Format","Genre","Comments");
this.list = new Array();
var i = 0;
this.list[i++] = new dvd("Cadence","Charlie Sheen, Martin Sheen","Martin Sheen","Movie Group","97 mins",1990,"NTSC","Action/Adventure","Dad and son in Army jail drama");
this.list[i++] = new dvd("Conspiracy Theory","Mel Gibson, Julia Roberts","Richard Donner","Warner Bros","130 mins",1997,"PAL","Thriller","Taxi driver with a past");
this.list[i++] = new dvd("Devils Advocate","Keanu Reaves, Al Pacino","Taylor Hackford","Twentieth Century Fox","138 mins",1997,"PAL","Thriller","Legal/Satan twist");
this.list[i++] = new dvd("Gladiator","Russell Crowe","Ridley Scott","Dreamworks Pictures","149 mins",2000,"PAL","Action/Adventure","Set in Ancient Rome");
this.list[i++] = new dvd("House II","Ayre Gross","Ethan Wiley","Digital Entertainment Ltd","88 mins",1987,"PAL","Horror","Gramps is cool!");
this.list[i++] = new dvd("Lost Boys","Jason Patric, Keifer Sutherland","Joel Shumacher","Warner Bros","93 mins",1987,"PAL","Thriller","Vampire film with a twist");
this.list[i++] = new dvd("True Lies","Arnold Swarzenegger","James Cameron","Warner Bros","135 mins",1994,"PAL","Action/Adventure","Spy action");
this.list[i++] = new dvd("Wyrd Sisters","Various (Animation)","Jean Flynn","Various","140 mins",2000,"PAL","Sci-Fi/Fantasy","Animation of Terry Pratchett book");
this.list[i++] = new dvd("Fistful of Dollars","Clint Eastwood","Sergio Leone","United Artists/MGM","97 mins",1964,"PAL","Western","Spaghetti Western");
this.list[i++] = new dvd("Few Dollars More","Clint Eastwood","Sergio Leone","United Artists/MGM","126 mins",1965,"PAL","Western","Spaghetti Western");
this.list[i++] = new dvd("The Good The Bad The Ugly","Clint Eastwood","Sergio Leone","United Artists/MGM","154 mins",1966,"PAL","Western","Spaghetti Western");
this.list[i++] = new dvd("Eraser","Arnold Swarzenegger","Charles Russell","Warner Bros","107 mins",1996,"PAL","Action/Adventure","Witness Protection type");
this.list[i++] = new dvd("6th Day","Arnold Swarzenegger","Roger Spottiswoode","Columbia Pictures","124 mins",2000,"PAL","Sci-Fi/Fantasy","Arnie clone takes over his life");
this.list[i++] = new dvd("Matrix","Keanu Reaves","The Wachowski Bros","Warner Bros","135 mins",1999,"PAL","Sci-Fi/Fantasy","Sci-Fi with excellent graphics");
this.list[i++] = new dvd("End of Days","Arnold Swarzenegger","Peter Hyams","Universal","121 mins",1999,"PAL","Action/Adventure","Fight the devil");
this.quantity = i;
this.error = "Title Not Found";
}

function dvd(title, actor, director, company, length, year, format, genre, comments){
this.title = title;
this.actor = actor;
this.director = director;
this.company = company;
this.length = length;
this.year = year;
this.format = format;
this.genre = genre;
this.comments = comments;
this.selected = true;
}

function dvdlist.prototype.display(qty) {
var shown = 0;
if (typeof qty == 'undefined') var qty = this.quantity;
document.write('<table class="dvdList"><tr>');
for (var i=0; i<this.format.length; i++)
document.write('<th>'+this.format[i]+'</th>');
document.write('</tr>');
for (i=0; i<this.quantity; i++) {
if (this.list[i].selected && shown++ < qty) {
document.write('<tr>');
for (var j in this.list[i]) {
if (j != 'selected') {
var t = eval('this.list['+i+'].'+j);
document.write('<td>'+t+'</td>');
}
}
document.write('</tr>');
}
}
document.write('<caption>'+this.listname+'</caption>');
document.write('</table>');
}

function dvdlist.prototype.select(field, val) {
var r = new RegExp(val,"i");
for (var i=0; i<this.quantity; i++) {
var t = eval('this.list[i].'+field);
if (!r.test(t)) this.list[i].selected = false;
}
}

function dvdlist.prototype.selectAll() {
for (var i=0; i<this.quantity; i++) {
this.list[i].selected = true;
}
}

function dvdlist.prototype.sortBy(field) {
window.sortField = field;
this.list.sort(sortHandler);
}

function dvdlist.prototype.get(field, val) {
for (var i=0; i<this.quantity; i++) {
if (this.list[i][field] == val) return this.list[i];
}
return this.error;
}

function sortHandler(a, b) {
var aa = eval('a.'+window.sortField);
var bb = eval('b.'+window.sortField);
if (aa == bb) return 0;
return (aa > bb) ? 1 : -1;
}

</script>

</head>
<body>
<script>
var myList = new dvdlist("My DVDs");
document.write('<br /><div class="example">Example of full list, unchanged</div>');
myList.display();

document.write('<br /><div class="example">Example of limiting results to 5</div>');
myList.display(5);

document.write('<br /><div class="example">Example of limiting results to 5 and sorting by "year"</div>');
myList.sortBy('year');
myList.display(5);

document.write('<br /><div class="example">Example of sorting by "year" where "actor" contians "arnold"</div>');
myList.sortBy('year');
myList.select('actor','arnold');
myList.display();

document.write('<br /><div class="example">Example of sorting by "title" where "genre" is Action/Adventure</div>');
myList.selectAll();
myList.sortBy('title');
myList.select('genre','action');
myList.display();

document.write('<br /><div class="example">Example where "genre" is Action/Adventure and "company" is "Warner Bros"</div>');
myList.selectAll();
myList.select('genre','action');
myList.select('company','warner');
myList.display();
</script>
</body>
</html>

Elsie
11-19-2002, 11:01 PM
'Course you're scaring me now! What happens when you get coffee? Keyboard bursts into flames? :D