Difference between revisions of "Widget:Ppplanner03"
Line 23: | Line 23: | ||
}); | }); | ||
</script>--> | </script>--> | ||
− | <div id="container" style=" | + | <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 () { | ||
− | + | // Function to show the iframe when the image is clicked | |
− | |||
function showIframe() { | function showIframe() { | ||
− | // Hide the | + | // Hide the image |
document.getElementById('runImage').style.display = 'none'; | 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 | |
− | iframe.style. | + | |
+ | // 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>