PageSourceSearch

https://janskerk-haarlem700.nl/deel1/haarlem1578.html?id=Haarlem1578

html janskerk-haarlem700.nl collected 2026-10-07 20:55:22 UTC 18,469 bytes, 535 lines download raw bytes

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&euml;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 &eacute;&eacute;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&#243;&#243;r 1485)
368      &horbar; <a href="#" onclick="gotoPage(Annaklooster)">
369      Lees verder...</a></div>
370    
371      <div id="info_august"<p><b>Augustijner heremieten</b> (1490)
372      &horbar; <a href="#" onclick="gotoPage(Augustijnen)">
373      Lees verder...</a></div>
374    
375      <div id="info_begijn"<p><b>Begijnhof</b> (in / v&#243;&#243;r 1262)
376      &horbar; <a href="#" onclick="gotoPage(Begijnhof)">
377      Lees verder...</a></div>
378    
379      <div id="info_catharina"<p><b>Sint-Catharinaklooster</b> (v&#243;&#243;r 1395)
380      &horbar; <a href="#" onclick="gotoPage(Catharinaklooster)">
381      Lees verder...</a></div>
382    
383      <div id="info_cecilia"<p><b>Sint-Ceciliaklooster</b> (v&#243;&#243;r 1400)
384      &horbar; <a href="#" onclick="gotoPage(Ceciliaklooster)">
385      Lees verder...</a></div>
386    
387      <div id="info_celle"<p><b>Cellebroeders</b> (in / v&#243;&#243;r  1496)
388      &horbar; <a href="#" onclick="gotoPage(Cellebroers)">
389      Lees verder...</a></div>
390		
391      <div id="info_porta"<p><b>Cisterci&euml;nzers</b> (Porta Coeli, Heemstede)
392      &horbar; <a href="#" onclick="gotoPage(Cistercienzers)">
393      Lees verder...</a></div>
394    
395      <div id="info_clara"<p><b>Claraklooster</b> (1454) &horbar;
396      <a href="#" onclick="gotoPage(Claraklooster)">
397      Lees verder...</a></div>
398    
399      <div id="info_claris"<p><b>Clarissen</b> (mogelijk 1471) &horbar;
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      &horbar; <a href="#" onclick="gotoPage(Dominicanen)">
406      Lees verder...</a></div>
407      
408      <div id="info_frans"<p><b>Franciscanen</b> (1453)
409      &horbar; <a href="#" onclick="gotoPage(Franciscanen)">
410      Lees verder...</a></div>
411      
412      <div id="info_frater"<p><b>Fraterhuis</b> (1397)
413      &horbar; <a href="#" onclick="gotoPage(Fraterhuis)">
414      Lees verder...</a></div>
415      
416      <div id="info_jan"<p><b>Jansklooster</b> (1310)
417      &horbar; <a href="#" onclick="gotoPage(Jansklooster)">
418      Lees verder...</a></div>
419      
420      <div id="info_karm"<p><b>Karmelieten</b> (1249)
421      &horbar; <a href="#" onclick="gotoPage(Karmelieten)">
422      Lees verder...</a></div>
423      
424      <div id="info_karm2"<p><b>Karmelietessen</b> (1465)
425      &horbar; <a href="#" onclick="gotoPage(Karmelietessen)">
426      Lees verder...</a></div>
427      
428      <div id="info_lazar"<p><b>Lazarusklooster</b> (1307 / 1308)
429      &horbar; <a href="#" onclick="gotoPage(Lazarusklooster)">
430      Lees verder...</a></div>
431      
432      <div id="info_magda"<p><b>Magdalenaklooster</b> (in / v&#243;&#243;r  1474)
433      &horbar; <a href="#" onclick="gotoPage(Magdalenaklooster)">
434      Lees verder...</a></div>
435      
436      <!-- k3 -->
437      <div id="info_margriet"<p><b>Margrietklooster</b> (v&#243;&#243;r 1446)
438      &horbar; <a href="#" onclick="gotoPage(Margrietklooster)">
439      Lees verder...</a></div>
440      
441      <div id="info_maria"<p><b>Mariaklooster</b> (in / v&#243;&#243;r 1440)
442      &horbar; <a href="#" onclick="gotoPage(Mariaklooster)">
443      Lees verder...</a></div>
444      
445      <div id="info_michiel"<p><b>Michielsklooster</b> (in / v&#243;&#243;r 1415)
446      &horbar; <a href="#" onclick="gotoPage(Michielsklooster)">
447      Lees verder...</a></div>
448      
449      <div id="info_norbert"<p><b>Norbertijnen</b> (waarschijnlijk 1414)
450      &horbar; <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      &horbar; <a href="#" onclick="gotoPage(Regulieren_Waard)">
455      Lees verder...</a></div>
456      
457      <div id="info_ursula"<p><b>Ursulaklooster</b> (v&#243;&#243;r 1400)
458      &horbar; <a href="#" onclick="gotoPage(Ursulaklooster)">
459      Lees verder...</a></div>
460      
461      <div id="info_zijl"<p><b>Zijlklooster</b> (in / v&#243;&#243;r  1372)
462      &horbar; <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.