From 34fb7339e094a38580b89b3ced5bfaf068c448f5 Mon Sep 17 00:00:00 2001
From: Kaitlyn Barnard <kbarnard@linuxfoundation.org>
Date: Wed, 18 Jul 2018 16:35:43 -0700
Subject: [PATCH] Adding anchor links to partner page (#9411)

* adding anchor links

* updating link names
---
 content/en/partners/_index.html | 51 +++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/content/en/partners/_index.html b/content/en/partners/_index.html
index c1b43c4ffb..62aa0596f1 100644
--- a/content/en/partners/_index.html
+++ b/content/en/partners/_index.html
@@ -10,9 +10,9 @@ cid: partners
     <main>
         <h5>Kubernetes works with partners to create a strong, vibrant codebase that supports a spectrum of complementary platforms.</h5>
         <div class="col-container">
-          <div class="col-nav"><center><h5><b>Kubernetes Certified Service Providers</b></h5><br>Vetted service providers with deep experience helping enterprises successfully adopt Kubernetes.<br><br><br><button id="defaultIframe" class="button" onClick="updateSrc(this.id)">See KCSP Partners</button></center></div>
-          <div class="col-nav"><center><h5><b>Certified Kubernetes Distributions, Hosted Platforms, and Installers</b></h5>Software conformance ensures that every vendor’s version of Kubernetes supports the required APIs.<br><br><br><button id="firstIframe" class="button" onClick="updateSrc(this.id)">See Conformance Partners</button></a></center></div>
-          <div class="col-nav"><center><h5><b>Kubernetes Training Partners</b></h5><br>Vetted training providers who have deep experience in cloud native technology training.<br><br><br><br><button id="secondIframe" class="button" onClick="updateSrc(this.id)">See KTP Partners</button></center></div>
+          <div class="col-nav"><center><h5><b>Kubernetes Certified Service Providers</b></h5><br>Vetted service providers with deep experience helping enterprises successfully adopt Kubernetes.<br><br><br><button id="kcsp" class="button" onClick="updateSrc(this.id)">See KCSP Partners</button></center></div>
+          <div class="col-nav"><center><h5><b>Certified Kubernetes Distributions, Hosted Platforms, and Installers</b></h5>Software conformance ensures that every vendor’s version of Kubernetes supports the required APIs.<br><br><br><button id="conformance" class="button" onClick="updateSrc(this.id)">See Conformance Partners</button></a></center></div>
+          <div class="col-nav"><center><h5><b>Kubernetes Training Partners</b></h5><br>Vetted training providers who have deep experience in cloud native technology training.<br><br><br><br><button id="ktp" class="button" onClick="updateSrc(this.id)">See KTP Partners</button></center></div>
         </div>
 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 <script type="text/javascript">
@@ -22,34 +22,49 @@ cid: partners
       var secondLink = "https://landscape.cncf.io/grouping=landscape&landscape=kubernetes-training-partner&embed=true";
 
       function updateSrc(buttonId) {
-      	if (buttonId == "defaultIframe") {
+      	if (buttonId == "kcsp") {
         		$("#landscape").attr("src",defaultLink);
+            window.location.hash = "#kcsp";
         }
-        if (buttonId == "firstIframe") {
+        if (buttonId == "conformance") {
          		$("#landscape").attr("src",firstLink);
+            window.location.hash = "#conformance";
         }
-        if (buttonId == "secondIframe") {
+        if (buttonId == "ktp") {
         		$("#landscape").attr("src",secondLink);
+            window.location.hash = "#ktp";
         }
       }
+
+      // Automatically load the correct iframe based on the URL fragment
+      document.addEventListener('DOMContentLoaded', function() {
+        var showContent = "kcsp";
+        if (window.location.hash) {
+          console.log('hash is:', window.location.hash.substring(1));
+          showContent = window.location.hash.substring(1);
+        }
+        updateSrc(showContent);
+      });
 </script>
 </head>
 <body>
     <div id="frameHolder">
-      <iframe id="landscape" frameBorder="0" scrolling="no" style="width: 1px; min-width: 100%" src="https://landscape.cncf.io/grouping=landscape&landscape=kubernetes-certified-service-provider&embed=true"></iframe>
+      <iframe id="landscape" frameBorder="0" scrolling="no" style="width: 1px; min-width: 100%" src=""></iframe>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.0/iframeResizer.js"></script>
       <script>
-        iFrameResize({
-          log:true,
-          messageCallback         : function(messageData){ // Callback fn when message is received
-            if (messageData.message.type === 'showModal') {
-              document.querySelector('body').style.overflow = 'hidden';
-            }
-            if (messageData.message.type === 'hideModal') {
-              document.querySelector('body').style.overflow = 'auto';
-            }
-          },
-        }, '#landscape');
+        document.addEventListener('DOMContentLoaded', function() {
+          iFrameResize({
+            log:true,
+            messageCallback         : function(messageData){ // Callback fn when message is received
+              if (messageData.message.type === 'showModal') {
+                document.querySelector('body').style.overflow = 'hidden';
+              }
+              if (messageData.message.type === 'hideModal') {
+                document.querySelector('body').style.overflow = 'auto';
+              }
+            },
+          }, '#landscape');
+        });
       </script>
     </div>
 </body>