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&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&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&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&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&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