Difference between revisions of "Widget:Ppplanner03"

Line 23: Line 23:
 
});
 
});
 
</script>-->
 
</script>-->
<div id="container" style="position: relative; cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px;">
+
<div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px;">
 
   <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 800px; height: 406px;">
 
   <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 800px; height: 406px;">
 
</div>
 
</div>
Line 29: Line 29:
 
<script>
 
<script>
 
document.addEventListener('DOMContentLoaded', function () {
 
document.addEventListener('DOMContentLoaded', function () {
   let iframeAdded = false;
+
   // Function to show the iframe when the image is clicked
 
 
 
   function showIframe() {
 
   function showIframe() {
     // Hide the initial image
+
     // Hide the image
 
     document.getElementById('runImage').style.display = 'none';
 
     document.getElementById('runImage').style.display = 'none';
  
     // Check if an iframe has already been added
+
     // Create and configure the iframe
    if (!iframeAdded) {
+
    const iframe = document.createElement('iframe');
      // Create and configure the iframe
+
    iframe.src = 'https://acp.analytica.com/view0?invite=4711&code=3885603542485212689';
      const iframe = document.createElement('iframe');
+
    iframe.style.width = '100%'; // Set the iframe width to fill the container
      iframe.src = 'https://acp.analytica.com/view0?invite=4711&code=3885603542485212689';
+
    iframe.style.height = '100%'; // Set the iframe height to fill the container
      iframe.style.width = '800px'; // Adjusted width to match the image width
+
    iframe.style.border = 'none'; // Optional: Remove border
       iframe.style.height = '406px'; //
+
 
 +
    // Append the iframe to the container
 +
    document.getElementById('container').appendChild(iframe);
 +
 
 +
    // Add a click event listener to the iframe to remove it when clicked
 +
    iframe.addEventListener('click', function () {
 +
       iframe.remove();
 +
      document.getElementById('runImage').style.display = 'block';
 +
    });
 +
  }
 +
 
 +
  // Add click event listener to the image container
 +
  document.getElementById('container').addEventListener('click', showIframe);
 +
});
 +
</script>

Revision as of 00:34, 1 May 2024

 <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 800px; height: 406px;">

<script> document.addEventListener('DOMContentLoaded', function () {

 // Function to show the iframe when the image is clicked
 function showIframe() {
   // Hide the image
   document.getElementById('runImage').style.display = 'none';
   // Create and configure the iframe
   const iframe = document.createElement('iframe');
   iframe.src = 'https://acp.analytica.com/view0?invite=4711&code=3885603542485212689';
   iframe.style.width = '100%'; // Set the iframe width to fill the container
   iframe.style.height = '100%'; // Set the iframe height to fill the container
   iframe.style.border = 'none'; // Optional: Remove border
   // Append the iframe to the container
   document.getElementById('container').appendChild(iframe);
   // Add a click event listener to the iframe to remove it when clicked
   iframe.addEventListener('click', function () {
     iframe.remove();
     document.getElementById('runImage').style.display = 'block';
   });
 }
 // Add click event listener to the image container
 document.getElementById('container').addEventListener('click', showIframe);

}); </script>