1<!DOCTYPE HTML>
2<html>
3
4<!--
5  pgn4web javascript chessboard
6  copyright (C) 2009-2014 Paolo Casaschi
7  see README file and http://pgn4web.casaschi.net
8  for credits, license and more details
9-->
10
11<head>
12
13<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
14
15<title>pgn4web games collection example</title>
16
17<style type="text/css">
18
19html, body
20{ margin: 0px;  padding: 0px; }
21
22body
23{ color: black; background: white; font-family: sans-serif; padding: 1.75em; }
24
25a
26{ color: black; text-decoration: none; }
27
28table, tr, td
29{ border-style: solid; border-width: 1px; border-color: gray; border-collapse: collapse; }
30
31</style>
32
33<link rel="icon" sizes="16x16" href="pawn.ico" />
34
35</head><body>
36
37<p>
38This is an application example showing how to use the pgn4web file collection.html to manage a collection of PGN files.
39<br>
40Two alternative options are shown.
41</p>
42
43<p style="font-size: 200%; font-weight: bold;">
44links to the viewer
45<p>
46A link can be listed for viewing each PGN file in a new browser window:
47</p>
48
49<table width=100% cellpadding=20 cellspacing=0 border=1>
50
51<tr>
52<td align=left>Chess Informant sample</td>
53<td align=center><a href="collection.html?pgnFile=chess-informant-sample.pgn&amp;title=Chess Informant sample" target="viewer">view</a></td>
54<td align=center><a href="chess-informant-sample.pgn">download</a></td>
55</tr>
56
57<tr>
58<td align=left>London Chess Classic 2009 round 5</td>
59<td align=center><a href="collection.html?pgnFile=lon09r5.pgn&amp;title=London Chess Classic 2009 round 5" target="viewer">view</a></td>
60<td align=center><a href="lon09r5.pgn">download</a></td>
61</tr>
62
63<tr>
64<td align=left>Personal account on Kramnik and the Petrov</td>
65<td align=center><a href="collection.html?pgnFile=demoGames.pgn&amp;title=Personal account on Kramnik and the Petrov" target="viewer">view</a></td>
66<td align=center><a href="demoGames.pgn">download</a></td>
67</tr>
68
69<tr>
70<td align=left>The Week In Chess #944</td>
71<!-- when present the URL (in this case as part of the title string), the char # needs to be escaped as %23
72     same would apply to ? (%3F) & (%38) and any other URL special characters -->
73<td align=center><a href="collection.html?pgnFile=twic944.pgn&amp;title=The Week In Chess %23944" target="viewer">view</a></td>
74<td align=center><a href="twic944.pgn">download</a></td>
75</tr>
76
77<tr>
78<td align=left>Tilburg Fontys 1998 round 2</td>
79<td align=center><a href="collection.html?pgnFile=tilb98r2.pgn&amp;title=Tilburg Fontys 1998 round 2" target="viewer">view</a></td>
80<td align=center><a href="tilb98r2.pgn">download</a></td>
81</tr>
82
83</table>
84
85<p style="font-size: 200%; font-weight: bold; margin-top: 1em;">
86dropdown menu selection
87
88<form style="width:100%;">
89<select id="selectmenu" style="width:100%;">
90<option value="">select a PGN archive from the chess games collection for display in the inline frame underneath</option>
91<option value="chess-informant-sample.pgn">Chess Informant sample</option>
92<option value="lon09r5.pgn">London Chess Classic 2009 round 5</option>
93<option value="demoGames.pgn">Personal account on Kramnik and the Petrov</option>
94<option value="twic944.pgn">The Week In Chess #944</option>
95<option value="tilb98r2.pgn">Tilburg Fontys 1998 round 2</option>
96</select>
97</form>
98
99<br/>
100
101<iframe id="inlineframe" name="inlineframe" height="1200" width="100%" frameborder="0" scrolling="auto" marginwidth="0px;" marginheight=0px;" src="collection.html">
102your web browser and/or your host do not support iframes as required to display the chessboard
103</iframe>
104
105<script type="text/javascript">
106"use strict";
107
108var oldChosenoptionValue = "";
109var selectmenu=document.getElementById("selectmenu");
110selectmenu.onchange = function() {
111    var chosenoption = this.options[this.selectedIndex];
112    if ((chosenoption.value !== "") && (chosenoption.value != oldChosenoptionValue)) {
113        oldChosenoptionValue = chosenoption.value;
114        var theObj = frames['inlineframe'].document.getElementById('searchPgnExpression');
115        var searchPgnString = theObj ? '&search=' + escape(theObj.value) : '';
116        frames['inlineframe'].location.href = "collection.html?pgnFile=" + chosenoption.value + "&title=" + escape(chosenoption.innerHTML) + searchPgnString;
117    }
118    this.selectedIndex = 0;
119    this.blur();
120};
121
122</script>
123
124</body>
125
126</html>
127
128