{"id":3,"date":"2025-10-25T14:40:35","date_gmt":"2025-10-25T14:40:35","guid":{"rendered":"https:\/\/nerdsea.nl\/?page_id=3"},"modified":"2026-08-01T17:18:10","modified_gmt":"2026-08-01T15:18:10","slug":"surfspots","status":"publish","type":"page","link":"https:\/\/nerdsea.nl\/hoofdpagina\/surfspots\/","title":{"rendered":"Surfspots"},"content":{"rendered":"\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2500\" height=\"713\" src=\"https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275.jpg\" alt=\"\" class=\"wp-image-85\" srcset=\"https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275.jpg 2500w, https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275-300x86.jpg 300w, https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275-1024x292.jpg 1024w, https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275-768x219.jpg 768w, https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275-1536x438.jpg 1536w, https:\/\/nerdsea.nl\/wp-content\/uploads\/2025\/10\/linobanner-scaled-e1775677470275-2048x584.jpg 2048w\" sizes=\"auto, (max-width: 2500px) 100vw, 2500px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group alignwide has-medium-font-size is-layout-flow wp-block-group-is-layout-flow\" style=\"min-height:0px;padding-right:0;padding-left:0\">\n<style>\n  \/* Make all widths include borders and padding *\/\n  .surfspots-map,\n  .table-selector,\n  .table-selector select,\n  .table-container {\n    box-sizing: border-box;\n  }  \n\n\n\/* Center the dropdown above the table container *\/\n  .table-selector {\n    position: sticky;\n    top: 0;\n    z-index: 200; \/* higher than your table header *\/\n\n    margin: 0 !important;\n    padding: 0 !important;\n\n    text-align: left;\n    display: flex;\n\n  }\n\n  \/* Style the dropdown *\/\n.table-selector select {\n    font-size: clamp(12px, 2vw, 18px);\n    font-weight: bold;\n    width: 100%;\n    height: clamp(20px, 6vw, 40px);\n    bottom: 50%;\n    padding-left: 5px;\n    \n    \/* Borders *\/\n    border-top: 1px solid black;\n    border-left: 1px solid black;\n    border-right: 1px solid black;\n    border-bottom: none;\n\n    background-color: #ccc;\n    color: #fff;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    text-align: left;\n\n  \/* Forceer text naar links in dropdown en verwijder pijl in dropdown *\/\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n }\n\n  select:focus,\n  select:focus-visible {   \n    background-color: #ccc;\n    color: #fff;\n    \n    \/* Borders *\/\n    border-top: 1px solid black;\n    border-left: 1px solid black;\n    border-right: 1px solid black;\n    border-bottom: none;\n    outline: none; \/* this removes the extra thick outline when it is selected*\/\n  }\n\n  select:hover {\n    border: none;\n    background-color: #eee;\n\n    \/* Borders *\/\n    border-top: 1px solid black;\n    border-left: 1px solid black;\n    border-right: 1px solid black;\n    border-bottom: none;\n    \n    color: #000;\n  }\n\n \/* add the custom arrow *\/\n .table-selector::after {\n    content: \"\";\n                        \n    position: absolute;\n    right: 10px;\n    top: 50%;   \/* keep 50% to make it pivot around its center *\/\n    transform: translateY(-50%); \/* keep -50% to make it pivot around its center *\/\n                        \n    width: clamp(12px, 2vw, 20px);\n    height: clamp(12px, 2vw, 20px);\n                        \n    background-image: url(\"https:\/\/nerdsea.nl\/tables\/arrow_top_chevron.svg\");\n    filter: brightness(0) invert(1);\n    background-size: contain;\n    background-repeat: no-repeat;\n    background-position: center;\n                        \n    pointer-events: none;\n                        \n    transition: transform 0.3s ease;\n    vertical-align: bottom;\n  }\n                        \n  \/* flip the custom arrow *\/\n  .table-selector.flipped::after {\n    transform: translateY(-50%) rotate(180deg);\n  }\n\n  \/* Removed iframe styles, just targeting the container *\/\n  .table-container {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  \/* Verwijder white space tussen dropdown en table *\/\n.table-selector + #table-container {\n  margin-block-start: 0 !important;\n}\n\n\/* Verwijder white space tussen dropdown en table *\/\n.has-medium-font-size {\n  font-size: 0px !important;\n}\n\n.surfspots-map {\n  width: 100%;\n  height: auto;\n  display: block; \/* removes small gaps *\/\n  margin-bottom: 10px;\n  border: 1px solid #000;\n  border-radius: 0px;\n}\n\n<\/style>\n\n<img decoding=\"async\" src=\"https:\/\/nerdsea.nl\/tables\/SVG_test.svg\" class=\"surfspots-map\" alt=\"Surfspots map\">\n\n<div class=\"table-selector\">\n  <label for=\"surfspot-select\"><\/label>\n  <select id=\"surfspot-select\" onchange=\"changeTable(this.value)\">\n    <option value=\"texel_table\">Texel<\/option>\n    <option value=\"wijk_aan_zee_table\" selected=\"\">Wijk aan Zee<\/option>\n    <option value=\"ijmuiden_table\">IJmuiden<\/option>\n    <option value=\"zandvoort_table\">Zandvoort<\/option>\n  <\/select>\n<\/div>\n\n<div id=\"table-container\">\n  <\/div>\n\n<script>\n\nconst BASE_URL = \"https:\/\/nerdsea.nl\/tables\/\";\n\nconst selector = document.querySelector(\".table-selector\");\nconst select = document.getElementById(\"surfspot-select\");\n\nasync function loadTable(spot) {\n  const container = document.getElementById(\"table-container\");\n\n  \/\/ Prevent loading when nothing is selected\n  if (!spot) {\n    container.innerHTML = \"\";\n    return;\n  }\n\n  const url = `${BASE_URL}${spot}.html`;\n  container.innerHTML = \"Laden...\";\n\n  try {\n    const response = await fetch(url);\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n\n    const htmlContent = await response.text();\n\n    const tempDiv = document.createElement(\"div\");\n    tempDiv.innerHTML = htmlContent;\n\n    container.innerHTML = \"\";\n\n    const scripts = tempDiv.querySelectorAll(\"script\");\n\n    Array.from(tempDiv.childNodes).forEach(node => {\n      if (node.nodeName !== \"SCRIPT\") {\n        container.appendChild(node.cloneNode(true));\n      }\n    });\n\n    scripts.forEach(oldScript => {\n      const newScript = document.createElement(\"script\");\n\n      Array.from(oldScript.attributes).forEach(attr => {\n        newScript.setAttribute(attr.name, attr.value);\n      });\n\n      if (oldScript.textContent) {\n        newScript.textContent = oldScript.textContent;\n      }\n\n      document.body.appendChild(newScript);\n    });\n\n  } catch (error) {\n    console.error(\"Error loading table content:\", error);\n    container.innerHTML = \"Kon de voorspelling niet laden.\";\n  }\n}\n\n\/* -----------------------------\n   Dropdown + arrow behaviour\n------------------------------ *\/\n\n\/\/ Flip arrow when opening dropdown\nselect.addEventListener(\"mousedown\", () => {\n  selector.classList.add(\"flipped\");\n});\n\n\/\/ Close flip when losing focus\nselect.addEventListener(\"blur\", () => {\n  selector.classList.remove(\"flipped\");\n});\n\n\/\/ Also handle keyboard navigation (important!)\nselect.addEventListener(\"keydown\", (e) => {\n  if (e.key === \"Escape\") {\n    selector.classList.remove(\"flipped\");\n  }\n});\n\n\/\/ When selection changes: load table\nfunction changeTable(spot) {\n  selector.classList.remove(\"flipped\");\n  loadTable(spot);\n}\n\n\/\/ Initial load\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const initialSpot = select.value;\n  loadTable(initialSpot);\n});\n\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>TexelWijk aan ZeeIJmuidenZandvoort<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-3","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/pages\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/comments?post=3"}],"version-history":[{"count":320,"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/pages\/3\/revisions"}],"predecessor-version":[{"id":871,"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/pages\/3\/revisions\/871"}],"wp:attachment":[{"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/media?parent=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}