|
|
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';
| |
| | | |
− | // Create and configure the iframe
| + | <div id="container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"> |
− | 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
<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>