Within my div element (divChatContainer), there is a top div (divChatContainerTop) containing a "span" element. When this "span" element is clicked, I want the container div to resize to the height of the "divChatContainerTop" (essentially minimizing the chat window to only show the top section).
Here is the HTML code:
<div id="divChatContainer" runat="server" style="overflow-y: scroll; box-sizing: border-box; word-wrap: break-word; width: 20%; max-height: 35%; position: fixed; right: 0px; bottom: 0%; box-sizing: border-box; background-color: #EBECEF; border: solid #3A5896; border-width: 1px 0px 0px 1px; border-radius: 1px;">
<div id="divChatContainerTop" style="text-align: right; box-sizing: border-box; width: 100%; padding: 3px;">
<span style="float: left; box-sizing:border-box;width:50%;overflow:hidden;">Left</span><span id="spanChatMinimize" style="float: right">X</span>
</div>
</div>
Here is the code from the external .js file:
document.getElementById('spanChatMinimize').addEventListener('click', function () {
document.getElementById('divChatContainer').style.height = document.getElementById('divChatContainerTop').style.height + 'px';
});
During debugging, I observed that the function was not being executed. This might be due to an issue with the eventListener syntax or the naming of the "span" element (on MasterPage, they sometimes have names like "ctl00_elementName"). However, since the container element is statically placed in HTML outside the ContentPlaceHolder, this should not be the case.
EDIT: The following code successfully minimizes the chat window:
document.getElementById('spanChatMinimize').addEventListener('click', function () {
document.getElementById('divChatContainer').style.height = '10px';
});
However, the following code does not have any effect:
document.getElementById('spanChatMinimize').addEventListener('click', function () {
document.getElementById('divChatContainer').style.height = document.getElementById('spanChatMinimize').style.height + 'px';
});
It seems that I am unable to retrieve the height of "divChatContainerTop" or the "span" element. Is there a way to get the screen height instead of the height property?