1<!DOCTYPE html> 2<html lang="nl"> 3 <!-- This is a template-based webpage --> 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title id="page_title"></title> 9 <link rel="icon" href="favicon.ico" type="image/x-icon"> 10 <meta name="description" content="interactive map"> 11 <meta name="project" content="Janskerk 700"> 12 <meta name="version" content="June 21, 2017" 13 14 <base target="_self"> 15 16 <!-- Bootstrap core CSS --> 17 <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet"> 18 19 <!-- Google font --> 20 <link href='http://fonts.googleapis.com/css?family=Roboto' 21 rel='stylesheet' type='text/css'> 22 23 <!-- Custom styles for this template --> 24 <link href="haarlem2015.css" rel="stylesheet"> 25 26 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 27 <!--[if lt IE 9]> 28
28<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
28 29
29<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
29 30 <![endif]--> 31 32 <style> 33 #selector { 34 font-size: 13px; 35 height: 33px 36 } 37 38 #row_nav { 39 margin-top: 15px 40 } 41 42 .smallHeading { 43 margin: 10px 0px 0px 15px 44 } 45 46 #info { 47 display: none; 48 } 49 50 #infobox { 51 position: relative; /* otherwise it disappears under image */ 52 height: 32px; 53 margin-top: -32px; 54 padding: 5px; 55 border-style: solid; 56 border-width: 1px; 57 border-color: silver; 58 color: black; 59 font-family: sans-serif, Arial; 60 font-size: 12px; 61 background-color: rgba(255,255,255,0.8); 62 } 63 64 #infobox button { 65 font-size: 10px; 66 float: right; 67 width: 32px; 68 height: 20px; 69 text-align: center; 70 padding-top: 2px; 71 background-color: white !important; /*because of color scheme */ 72 } 73 74 #infobox p { 75 margin-bottom: 0px; 76 } 77 78 #infobox a { 79 color: #23527c !important; /*because of color scheme */ 80 } 81 82 #txt { 83 margin-top: 15px; 84 } 85 </style> 86 87 </head> 88 89 <body> 90 <!-- DOCUMENT HEADER --> 91 <header id="header"> 92 <p class="pull-left"> 93 <a id="prev-top" href="#" onclick="gotoPage(prev)"> 94 <span class="glyphicon glyphicon-chevron-left"></span> 95 </a> 96 </p> 97 <p class="pull-right"> 98 <a id="next-top" href="#" onclick="gotoPage(next)"> 99 <span class="glyphicon glyphicon-chevron-right"></span> 100 </a> 101 </p> 102 <p class="center-block" id="project_title"></p> 103 </header> 104 105 <!-- DOCUMENT BODY --> 106 <div class="container"> 107 108 <div id="row_visual" class="row" style="margin-top: 10px; margin-bottom: 10px"> 109 <!-- MAP + INFO --> 110 <div id="col_img" class="col-sm-12"> 111 <h3>Informatie per klooster</h4> 112 <img id="img1" class="img img-responsive" src="haarlem1578/Haarlem1578.jpg"> 113 114 <div id="infobox"> 115 <span id="infobody">Dit is tekst.</span> 116 <button id="closeBtn" type="button" class="btn btn-default btn-xs" 117 onclick="clearInfo()"> 118 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 119 </button> 120 </div> 121 </div><!--/.col--> 122 </div><!--/.row--> 123 124 <div id="kloosters" class="row"> 125 <p class="smallHeading"><b>Kloosters</b> 126 <!-- SELECTOR --> 127 <select id="selector" class="form-control pull-right" 128 style="margin-right: 15px; margin-top: -15px; width: 180px" 129 onchange="makeSelection()"> 130 <option value="alle">Alle kloosters</option> 131 <option value="bedel">Bedelorden</option> 132 <option value="derde">Derde orde</option> 133 <option value="regulier">Regulieren</option> 134 <option value="overig">Overige kloosters</option> 135 </select> 136 </p> 137 138 <!-- KLOOSTERS --> 139 <!-- k1 --> 140 <div id="k1" class="col-sm-4"> 141 <div class="radio"> 142 <label class="derde"> 143 <input type="radio" name="geb" id="anna" 144 onclick="popup(this.id)">Annaklooster 145 </label> 146 </div> 147 <div class="radio"> 148 <label class="overig"> 149 <input type="radio" name="geb" id="august" 150 onclick="popup(this.id)">Augustijner heremieten 151 </label> 152 </div> 153 <div class="radio"> 154 <label class="overig"> 155 <input type="radio" name="geb" id="begijn" 156 onclick="popup(this.id)">Begijnhof 157 </label> 158 </div> 159 <div class="radio"> 160 <label class="derde"> 161 <input type="radio" name="geb" id="catharina" 162 onclick="popup(this.id)">Catharinaklooster 163 </label> 164 </div> 165 <div class="radio"> 166 <label class="derde regulier"> 167 <input type="radio" name="geb" id="cecilia" 168 onclick="popup(this.id)">Ceciliaklooster 169 </label> 170 </div> 171 <div class="radio"> 172 <label class="overig"> 173 <input type="radio" name="geb" id="celle" 174 onclick="popup(this.id)">Cellebroeders 175 </label> 176 </div> 177 <div class="radio"> 178 <label class="overig"> 179 <input type="radio" name="geb" id="porta" 180 onclick="popup(this.id)">Cisterciënzers 181 </label> 182 </div> 183 <div class="radio"> 184 <label class="derde"> 185 <input type="radio" name="geb" id="clara" 186 onclick="popup(this.id)">Claraklooster 187 </label> 188 </div> 189 </div><!--/.col--> 190 191 <!-- k2 --> 192 <div id="k2" class="col-sm-4"> 193 <div class="radio"> 194 <label class="bedel"> 195 <input type="radio" name="geb" id="claris" 196 onclick="popup(this.id)">Clarissen 197 </label> 198 </div> 199 <div class="radio"> 200 <label class="bedel"> 201 <input type="radio" name="geb" id="dom" 202 onclick="popup(this.id)">Dominicanen 203 </label> 204 </div> 205 <div class="radio"> 206 <label class="bedel"> 207 <input type="radio" name="geb" id="frans" 208 onclick="popup(this.id)">Franciscanen 209 </label> 210 </div> 211 <div class="radio"> 212 <label class="overig"> 213 <input type="radio" name="geb" id="frater" 214 onclick="popup(this.id)">Fraterhuis 215 </label> 216 </div> 217 <div class="radio"> 218 <label class="overig"> 219 <input type="radio" name="geb" id="jan" 220 onclick="popup(this.id)">Jansklooster 221 </label> 222 </div> 223 <div class="radio"> 224 <label class="bedel"> 225 <input type="radio" name="geb" id="karm" 226 onclick="popup(this.id)">Karmelieten 227 </label> 228 </div> 229 <div class="radio"> 230 <label class="bedel"> 231 <input type="radio" name="geb" id="karm2" 232 onclick="popup(this.id)">Karmelietessen 233 </label> 234 </div> 235 <div class="radio"> 236 <label class="overig"> 237 <input type="radio" name="geb" id="lazar" 238 onclick="popup(this.id)">Lazarusklooster 239 </label> 240 </div> 241 </div><!--/.col--> 242 243 <!-- k3 --> 244 <div id="k3" class="col-sm-4"> 245 <div class="radio"> 246 <label class="derde"> 247 <input type="radio" name="geb" id="magda" 248 onclick="popup(this.id)">Magdalenaklooster 249 </label> 250 </div> 251 <div class="radio"> 252 <label class="derde"> 253 <input type="radio" name="geb" id="margriet" 254 onclick="popup(this.id)">Margrietklooster 255 </label> 256 </div> 257 <div class="radio"> 258 <label class="derde"> 259 <input type="radio" name="geb" id="maria" 260 onclick="popup(this.id)">Mariaklooster 261 </label> 262 </div> 263 <div class="radio"> 264 <label class="derde"> 265 <input type="radio" name="geb" id="michiel" 266 onclick="popup(this.id)">Michielsklooster 267 </label> 268 </div> 269 <div class="radio"> 270 <label class="derde"> 271 <input type="radio" name="geb" id="norbert" 272 onclick="popup(this.id)">Norbertijnen 273 </label> 274 </div> 275 276 <div class="radio"> 277 <label class="regulier"> 278 <input type="radio" name="geb" id="waard" 279 onclick="popup(this.id)">Regulieren in de Waard 280 </label> 281 </div> 282 <div class="radio"> 283 <label class="derde"> 284 <input type="radio" name="geb" id="ursula" 285 onclick="popup(this.id)">Ursulaklooster 286 </label> 287 </div> 288 <div class="radio"> 289 <label class="regulier"> 290 <input type="radio" name="geb" id="zijl" 291 onclick="popup(this.id)">Zijlklooster 292 </label> 293 </div> 294 </div><!--/.col--> 295 </div><!--/.row--> 296 297 <div id="instruction" class="row" style="margin-bottom: 20px">
298 <div class="col-sm-12 small hyphenate text-justify"> 299 <i>Selecteer één van bovenstaande kloosters of 300 beperk eerst de keuze met de knop rechtsboven. Op de kaart verschijnt het 301 klooster met het volgnummer van de stichting; onderaan 302 een link 'Lees verder...' naar de pagina van de desbetreffende instelling.</i> 303 </div> 304 </div> 305 306 <!-- TEXT --> 307 <div id="row_text1" class="row hyphenate text-justify"></div> 308 <div id="row_text2" class="row hyphenate text-justify"></div> 309 <div id="row_text3" class="row hyphenate text-justify"></div> 310 <div id="row_text4" class="row hyphenate text-justify"></div> 311 <div id="row_text5" class="row hyphenate text-justify"></div> 312 313 <!-- NAVIGATION --> 314 <div id="row_nav" class="row"> 315 <div id="nav_left" class="col-xs-3"> 316 <a id="prev" class="btn btn-default pull-left" href="#" role="button" 317 onclick="gotoPage(prev)"><span class="glyphicon glyphicon-chevron-left"> 318 </span></a> 319 </div> 320 321 <div id="nav_share" class="col-xs-6 text-center"> 322 <button class="btn btn-default" role="button" 323 onclick="showShareButtons()"> 324 <span class="glyphicon glyphicon-send"></span> 325 <span class="small">Delen</span> 326 </button> 327 328 <!-- 329 <button class="btn btn-default" role="button" 330 onclick="gotoPage(Printversie + '#' + sectionId)"> 331 <span class="glyphicon glyphicon-print"></span> 332 <span class="small">Printversie</span> 333 </button> 334 --> 335 <a class="btn btn-default" role="button" 336 href="../search.html"> 337 <span class="glyphicon glyphicon-search"></span> 338 <span class="small">Zoeken</span> 339 </a> 340 </div> 341 342 343 <div id="nav_right" class="col-xs-3"> 344 <a id="next" class="btn btn-default pull-right" href="#" role="button" 345 onclick="gotoPage(next)"><span class="glyphicon glyphicon-chevron-right"> 346 </span></a> 347 </div> 348 </div> 349 350 <!-- BREADCRUMBS AND RELATED --> 351 <div id="row_bc" class="row"> 352 <div class="col-sm-12 bcrumbs"> 353 <p id="bc"></p> 354 <p id="relatedPages"></p> 355 </div> 356 </div> 357 358 </div><!--/.container--> 359 360 <!-- FOOTER --> 361 <footer id="footer"></footer> 362 363 <!-- INFO 364 <span> is required for measuring text width in pixels --> 365 <div id="info"> 366 <!-- k1 --> 367 <div id="info_anna"<p><b>Sint-Annaklooster</b> (in / vóór 1485) 368 ― <a href="#" onclick="gotoPage(Annaklooster)"> 369 Lees verder...</a></div> 370 371 <div id="info_august"<p><b>Augustijner heremieten</b> (1490) 372 ― <a href="#" onclick="gotoPage(Augustijnen)"> 373 Lees verder...</a></div> 374 375 <div id="info_begijn"<p><b>Begijnhof</b> (in / vóór 1262) 376 ― <a href="#" onclick="gotoPage(Begijnhof)"> 377 Lees verder...</a></div> 378 379 <div id="info_catharina"<p><b>Sint-Catharinaklooster</b> (vóór 1395) 380 ― <a href="#" onclick="gotoPage(Catharinaklooster)"> 381 Lees verder...</a></div> 382 383 <div id="info_cecilia"<p><b>Sint-Ceciliaklooster</b> (vóór 1400) 384 ― <a href="#" onclick="gotoPage(Ceciliaklooster)"> 385 Lees verder...</a></div> 386 387 <div id="info_celle"<p><b>Cellebroeders</b> (in / vóór 1496) 388 ― <a href="#" onclick="gotoPage(Cellebroers)"> 389 Lees verder...</a></div> 390 391 <div id="info_porta"<p><b>Cisterciënzers</b> (Porta Coeli, Heemstede) 392 ― <a href="#" onclick="gotoPage(Cistercienzers)"> 393 Lees verder...</a></div> 394 395 <div id="info_clara"<p><b>Claraklooster</b> (1454) ― 396 <a href="#" onclick="gotoPage(Claraklooster)"> 397 Lees verder...</a></div> 398 399 <div id="info_claris"<p><b>Clarissen</b> (mogelijk 1471) ― 400 <a href="#" onclick="gotoPage(Clarissen)"> 401 Lees verder...</a></div> 402 403 <!-- k2 --> 404 <div id="info_dom"<p><b>Dominicanen</b> (1287) 405 ― <a href="#" onclick="gotoPage(Dominicanen)"> 406 Lees verder...</a></div> 407 408 <div id="info_frans"<p><b>Franciscanen</b> (1453) 409 ― <a href="#" onclick="gotoPage(Franciscanen)"> 410 Lees verder...</a></div> 411 412 <div id="info_frater"<p><b>Fraterhuis</b> (1397) 413 ― <a href="#" onclick="gotoPage(Fraterhuis)"> 414 Lees verder...</a></div> 415 416 <div id="info_jan"<p><b>Jansklooster</b> (1310) 417 ― <a href="#" onclick="gotoPage(Jansklooster)"> 418 Lees verder...</a></div> 419 420 <div id="info_karm"<p><b>Karmelieten</b> (1249) 421 ― <a href="#" onclick="gotoPage(Karmelieten)"> 422 Lees verder...</a></div> 423 424 <div id="info_karm2"<p><b>Karmelietessen</b> (1465) 425 ― <a href="#" onclick="gotoPage(Karmelietessen)"> 426 Lees verder...</a></div> 427 428 <div id="info_lazar"<p><b>Lazarusklooster</b> (1307 / 1308) 429 ― <a href="#" onclick="gotoPage(Lazarusklooster)"> 430 Lees verder...</a></div> 431 432 <div id="info_magda"<p><b>Magdalenaklooster</b> (in / vóór 1474) 433 ― <a href="#" onclick="gotoPage(Magdalenaklooster)"> 434 Lees verder...</a></div> 435 436 <!-- k3 --> 437 <div id="info_margriet"<p><b>Margrietklooster</b> (vóór 1446) 438 ― <a href="#" onclick="gotoPage(Margrietklooster)"> 439 Lees verder...</a></div> 440 441 <div id="info_maria"<p><b>Mariaklooster</b> (in / vóór 1440) 442 ― <a href="#" onclick="gotoPage(Mariaklooster)"> 443 Lees verder...</a></div> 444 445 <div id="info_michiel"<p><b>Michielsklooster</b> (in / vóór 1415) 446 ― <a href="#" onclick="gotoPage(Michielsklooster)"> 447 Lees verder...</a></div> 448 449 <div id="info_norbert"<p><b>Norbertijnen</b> (waarschijnlijk 1414) 450 ― <a href="#" onclick="gotoPage(Norbertijnen)"> 451 Lees verder...</a></div> 452 453 <div id="info_waard"<p><b>Regulieren in de Waard</b> (1405) 454 ― <a href="#" onclick="gotoPage(Regulieren_Waard)"> 455 Lees verder...</a></div> 456 457 <div id="info_ursula"<p><b>Ursulaklooster</b> (vóór 1400) 458 ― <a href="#" onclick="gotoPage(Ursulaklooster)"> 459 Lees verder...</a></div> 460 461 <div id="info_zijl"<p><b>Zijlklooster</b> (in / vóór 1372) 462 ― <a href="#" onclick="gotoPage(Zijlklooster)"> 463 Lees verder...</a></div> 464 465 </div> 466 467 <!-- SCRIPTS --> 468
468<script src="../jquery/jquery-1.11.2.js"></script>
468 469
469<script src="multimint2.js"></script>
469<!-- project code --> 470
470<script src="../haarlemtools/color.js"></script>
470<!-- color schemes --> 471 <!--script src="../haarlemtools/Hyphenator.js"></script>
471<!-- hyphenation --> 472 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 473
473<script src="../bootstrap/js/bootstrap.min.js"></script>
473<!-- Required for collapse --> 474
474<script src="../bootstrap/workaround/ie10-viewport-bug-workaround.js"></script>
474 475 476
476<script> 477 $('#infobox').hide(); 478 var defaultMap = 'haarlem1578/Haarlem1578.jpg'; 479 var textColor = $('body').css('color'); 480 481 var rbId = ""; 482 function popup(id) 483 { 484 rbId = id; 485 var curId = "#" + "info_" + id; 486 var curInfo = $(curId)[0]; 487 if (curInfo == undefined) 488 { 489 alert("Nog niet beschikbaar: " + id); 490 return; 491 } 492 493 var poi = 'haarlem1578/poi-' + id + '.jpg'; 494 $('#img1').attr('src', poi); 495 $('#poi').show(); 496 497 var pop = $("#infobody")[0]; 498 pop.innerHTML = curInfo.innerHTML; 499 $('#infobox').show() 500 } 501 502 function clearInfo() 503 { 504 $('#infobox').hide(); 505 $('#' + rbId).removeAttr('checked'); 506 $('#img1').attr('src', defaultMap); 507 } 508 509 function makeSelection() 510 { 511 clearInfo(); 512 var cat = $('select option:selected')[0].value; 513 if (cat == 'alle') unselectCat() 514 else selectCat(cat); 515 } 516 517 function selectCat(cname) 518 { 519 unselectCat(); 520 $('#kloosters label').not('.'+cname).css('color', 'silver'); 521 $('#kloosters label').not('.'+cname).children().prop('disabled', true); 522 } 523 524 function unselectCat() 525 { 526 $('label').css('color', textColor); 527 $('input[type=radio]').prop('disabled', false); 528 } 529 </script>
529 530 531
531<script src="content2.js"></script>
531<!-- specs content --> 532 533 534 </body> 535</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.