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;"> | <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 800px; height: 406px;"> | ||
</div> | </div> | ||
| Line 22: | Line 22: | ||
document.getElementById('container').addEventListener('click', showIframe); | document.getElementById('container').addEventListener('click', showIframe); | ||
}); | }); | ||
| − | </script | + | </script> |
<div id="container" style="position: relative; cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px;"> | <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;"> | ||
Revision as of 00:25, 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 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);
}); </script>
<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