Difference between revisions of "Widget:Ppplanner03"
Line 1: | Line 1: | ||
+ | <!--<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;"> | ||
+ | </div> | ||
+ | <script> | ||
+ | document.addEventListener('DOMContentLoaded', function () { | ||
+ | function showIframe() { | ||
+ | // Hide the image | ||
+ | document.getElementById('runImage').style.display = 'none'; | ||
− | <div id="container" style="position: | + | // 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); | ||
+ | }); | ||
+ | </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;"> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | document.addEventListener('DOMContentLoaded', function () { | ||
+ | let iframeAdded = false; | ||
+ | |||
+ | function showIframe() { | ||
+ | // Hide the initial image | ||
+ | document.getElementById('runImage').style.display = 'none'; | ||
+ | |||
+ | // Check if an iframe has already been added | ||
+ | if (!iframeAdded) { | ||
+ | // 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 | ||
+ | const container = document.getElementById('container'); | ||
+ | container.appendChild(iframe); | ||
+ | iframeAdded = true; // Update flag to indicate iframe is added | ||
+ | |||
+ | // Create maximize button | ||
+ | const maximizeButton = document.createElement('button'); | ||
+ | maximizeButton.textContent = 'Maximize'; | ||
+ | maximizeButton.style.position = 'absolute'; | ||
+ | maximizeButton.style.bottom = '10px'; | ||
+ | maximizeButton.style.right = '10px'; | ||
+ | |||
+ | // Add click event listener to maximize button | ||
+ | maximizeButton.addEventListener('click', function() { | ||
+ | iframe.style.width = '1200px'; // Max width for iframe | ||
+ | iframe.style.height = '600px'; // Max height for iframe | ||
+ | maximizeButton.style.display = 'none'; // Hide the maximize button | ||
+ | }); | ||
+ | |||
+ | // Append maximize button to the container | ||
+ | container.appendChild(maximizeButton); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // Add click event listener to the image container | ||
+ | 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;"> | <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 800px; height: 406px;"> | ||
</div> | </div> |
Revision as of 01:05, 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 () {
let iframeAdded = false;
function showIframe() { // Hide the initial image document.getElementById('runImage').style.display = 'none';
// Check if an iframe has already been added if (!iframeAdded) { // 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 container width iframe.style.height = '406px'; // Adjusted height to match the container height iframe.style.border = 'none'; // Optional: Remove border
// Append the iframe to the container const container = document.getElementById('container'); container.appendChild(iframe); iframeAdded = true; // Update flag to indicate iframe is added
// Create maximize button const maximizeButton = document.createElement('button'); maximizeButton.textContent = 'Maximize'; maximizeButton.style.position = 'absolute'; maximizeButton.style.bottom = '10px'; maximizeButton.style.right = '10px';
// Add click event listener to maximize button maximizeButton.addEventListener('click', function() { iframe.style.width = '100vw'; // Max width for iframe iframe.style.height = '100vh'; // Max height for iframe maximizeButton.style.display = 'none'; // Hide the maximize button });
// Append maximize button to the container container.appendChild(maximizeButton); } }
// Add click event listener to the image container document.getElementById('container').addEventListener('click', showIframe);
}); </script>