{"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-04-23T12:30:54","modified_gmt":"2026-04-23T10:30:54","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  \/* Center the dropdown above the table container *\/\n  .table-selector {\n    margin: 0;\n    padding: 0;\n    text-align: left;\n    display: block;\n  }\n\n  \/* Style the dropdown *\/\n  select {\n    font-size: clamp(14px, 2vw, 18px);\n    font-weight: bold;\n    width: 100%;\n    padding: 8px 0px;\n    border: none;\n    border-radius: 0px;\n    border: none;\n    background-color: #ccc;\n    color: black;\n    cursor: pointer;\n    transition: all 0.2s ease;\n  }\n\n  select:focus,\n  select:focus-visible {   \n    border: none;\n    background-color: #ccc;\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\n  \/* Removed iframe styles, just targeting the container *\/\n  .table-container {\n    width: 100%;\n    max-width: 100%;\n    border: none;\n  }\n\n.table-selector + #table-container {\n  margin-block-start: 0 !important;\n}\n\n<\/style>\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  \/\/ Base URL for your tables\n  const BASE_URL = \"https:\/\/nerdsea.nl\/tables\/\";\n\n  \/\/ NOTE: The alwaysVisibleTimes array and toggleRows function should be REMOVED\n  \/\/       from the main page script block if you want them to run from the \n  \/\/       fetched table HTML file instead.\n\n  \/**\n   * Loads the HTML content for the selected surf spot into the container.\n   * Extracts and executes scripts found within the fetched content.\n   * @param {string} spot - The value from the select element (e.g., 'wijk_aan_zee').\n   *\/\n  async function loadTable(spot) {\n    const container = document.getElementById(\"table-container\");\n    const url = `${BASE_URL}${spot}.html`;\n    \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      \/\/ 1. Create a temporary container to safely parse the fetched HTML\n      const tempDiv = document.createElement('div');\n      tempDiv.innerHTML = htmlContent;\n\n      \/\/ 2. Insert only the HTML (excluding scripts for now)\n      container.innerHTML = ''; \/\/ Clear \"Laden...\"\n      \n      \/\/ We use appendChild to move nodes, but first, we need to extract the scripts\n      const scripts = tempDiv.querySelectorAll('script');\n      \n      \/\/ Move all non-script elements to the main container\n      Array.from(tempDiv.childNodes).forEach(node => {\n        if (node.nodeName !== 'SCRIPT') {\n          container.appendChild(node.cloneNode(true));\n        }\n      });\n\n      \/\/ 3. Execute the scripts found in the fetched content\n      scripts.forEach(oldScript => {\n        \/\/ Create a new script element to ensure execution\n        const newScript = document.createElement('script');\n        \n        \/\/ Copy attributes (like src)\n        Array.from(oldScript.attributes).forEach(attr => {\n          newScript.setAttribute(attr.name, attr.value);\n        });\n        \n        \/\/ Copy inline content\n        if (oldScript.textContent) {\n          newScript.textContent = oldScript.textContent;\n        }\n\n        \/\/ Append to the document body or head to execute it\n        document.body.appendChild(newScript);\n        \n        \/\/ Optional: Remove the script element after execution to keep DOM clean\n        \/\/ You may comment this out if you need the script to remain in the DOM\n        \/\/ document.body.removeChild(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  \/\/ The rest of your main page functions (changeTable, initial load) remain the same...\n\n  \/**\n   * Handles the dropdown change event.\n   *\/\n  function changeTable(spot) {\n    loadTable(spot);\n  }\n\n  \/\/ Initial load when the page is ready\n  document.addEventListener('DOMContentLoaded', () => {\n    const initialSpot = document.getElementById(\"surfspot-select\").value;\n    loadTable(initialSpot);\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":189,"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/pages\/3\/revisions"}],"predecessor-version":[{"id":633,"href":"https:\/\/nerdsea.nl\/hoofdpagina\/wp-json\/wp\/v2\/pages\/3\/revisions\/633"}],"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}]}}