Issue
The following snippet is supposed to replace the static image with the window loaded by the Javascript function, when the user clicks the image. The problem is that the Javascript block that is loaded does not respect the width and height if its div
element, it gets squished to the left.
What am I doing wrong?
<div style="display: flex; justify-content: space-between;">
<div style="text-align: center;">
<!-- Your image -->
<img id="myImage" src="https://raw.githubusercontent.com/ucc23/test/main/berkeley29.webp" alt="Clickable Image" style="width:355px;height:250px; cursor: pointer;">
<!-- Div to contain Aladin Lite viewer -->
<div id="aladin-lite-div" style="width:355;height:250"></div>
<!-- Aladin Lite script (will be loaded after the image is clicked) -->
<script type="text/javascript">
// Function to load Aladin Lite after image click and hide the image
function loadAladinLiteAndHideImage() {
// Dynamically load the Aladin Lite script
let aladinScript = document.createElement('script');
aladinScript.src = "https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js";
aladinScript.charset = "utf-8";
aladinScript.onload = function () {
A.init.then(() => {
let aladin = A.aladin('#aladin-lite-div', {survey:"P/DSS2/color", fov:0.1, target: "103.269 16.929"});
// Remove the image
document.getElementById('myImage').remove();
// Hide the image
//document.getElementById('myImage').style.visibility = "hidden";
// Show the Aladin Lite viewer
document.getElementById('aladin-lite-div').style.display = 'block';
});
};
document.head.appendChild(aladinScript);
}
// Event listener for image click
document.getElementById('myImage').addEventListener('click', loadAladinLiteAndHideImage);
</script>
</div>
<!-- Left block -->
<table style="text-align: center; width:355px;height:250px;">
<!-- Row 1 (title) -->
<tr>
<td colspan="5"><h3>Table title</h3></td>
</tr>
<!-- Row 2 -->
<tr>
<th><a>C1</a></th>
<th><a>C2</a></th>
<th><a>C3</a></th>
<th><a>C4</a></th>
<th><a>C5</a></th>
</tr>
<!-- Row 3 -->
<tr>
<td>1.0</td>
<td>0.52</td>
<td>9.7</td>
<td>534</td>
<td>3.0</td>
</tr>
</table>
</div>
Solution
The issue with the Aladin Lite viewer not respecting the width and height of its div
element is due to the missing px
unit in the style
attribute of the div
. In your code, you have specified the width and height as width:355;height:250
, but you should include the px
unit to define the dimensions correctly.
To fix the issue, update the style
attribute of the div
element as follows:
<div id="aladin-lite-div" style="width:355px;height:250px"></div>
By adding the px
unit, the Aladin Lite viewer should now respect the width and height of its div
element, and the content should no longer be squished to the left.
Answered By - CodeApacalypse
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.