Difference between revisions of "Widget:Ppplanner03"
Line 1: Line 1:
−
<div id="container" style="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 21: Line 21:
 
   // Add click event listener to the image container
 
   // Add click event listener to the image container
 
   document.getElementById('container').addEventListener('click', showIframe);
 
   document.getElementById('container').addEventListener('click', showIframe);
 +
});
 +
</script>-->
 +
<div id="container" style="position: relative; 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;">
 +
  <button id="maximizeButton" style="position: absolute; bottom: 10px; right: 10px;">Maximize</button>
 +
</div>
 +
 +
<script>
 +
document.addEventListener('DOMContentLoaded', function () {
 +
  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 = '800px'; // Adjusted width to match the image width
 +
    iframe.style.height = '406px'; // Adjusted height to match the image height
 +
    iframe.style.border = 'none'; // Optional: Remove border
 +
 +
    // Append the iframe to the container
 +
    document.getElementById('container').appendChild(iframe);
 +
  }
 +
 +
  // Add click event listener to the image container
 +
  document.getElementById('container').addEventListener('click', showIframe);
 +
 +
  // Add click event listener to the maximize button
 +
  document.getElementById('maximizeButton').addEventListener('click', function() {
 +
    const container = document.getElementById('container');
 +
    const runImage = document.getElementById('runImage');
 +
    const iframe = container.querySelector('iframe');
 +
 +
    // Toggle between original and max width
 +
    if (container.style.width === '100%') {
 +
      container.style.width = '800px'; // Original width
 +
      container.style.height = '406px'; // Original height
 +
      iframe.style.width = '800px'; // Original width for iframe
 +
      iframe.style.height = '406px'; // Original height for iframe
 +
    } else {
 +
      container.style.width = '100%'; // Max width
 +
      container.style.height = '100%'; // Max height
 +
      iframe.style.width = '100%'; // Max width for iframe
 +
      iframe.style.height = '100%'; // Max height for iframe
 +
    }
 +
  });
 
});
 
});
 
</script>
 
</script>

Revision as of 00:24, 1 May 2024

 <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 800px; height: 406px;">
 <button id="maximizeButton" style="position: absolute; bottom: 10px; right: 10px;">Maximize</button>

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

 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 = '800px'; // Adjusted width to match the image width
   iframe.style.height = '406px'; // Adjusted height to match the image height
   iframe.style.border = 'none'; // Optional: Remove border

   // Append the iframe to the container
   document.getElementById('container').appendChild(iframe);
 }

 // Add click event listener to the image container
 document.getElementById('container').addEventListener('click', showIframe);

 // Add click event listener to the maximize button
 document.getElementById('maximizeButton').addEventListener('click', function() {
   const container = document.getElementById('container');
   const runImage = document.getElementById('runImage');
   const iframe = container.querySelector('iframe');

   // Toggle between original and max width
   if (container.style.width === '100%') {
     container.style.width = '800px'; // Original width
     container.style.height = '406px'; // Original height
     iframe.style.width = '800px'; // Original width for iframe
     iframe.style.height = '406px'; // Original height for iframe
   } else {
     container.style.width = '100%'; // Max width
     container.style.height = '100%'; // Max height
     iframe.style.width = '100%'; // Max width for iframe
     iframe.style.height = '100%'; // Max height for iframe
   }
 });

}); </script>





https://docs.analytica.com/images/d/d2/Ppplanner03.png 1156 570