Page 1 of 1
How to determine if "auto" x & y scroll bars are displayed
Posted: Sat Aug 15, 2015 2:14 pm
by dscorca
I have a 1000px by 95px html container and have the 'overflow x' and 'overflow y' properties set to 'auto'.
What I need to do is, if the html contents have caused the scroll bars to display, then I want to show a button so the user can expand the html container's contents to a larger display. I cannot find any way to determine if the overflow x or y has triggered the scroll bars.
Any thoughts?
Re: How to determine if "auto" x & y scroll bars are displayed
Posted: Sat Aug 15, 2015 7:45 pm
by Alex
You can use the following JavaScript code to determine if the scroll bars are displayed:
Code: Select all
var htmlContainer = document.getElementById("htmlContainerId");
var hasVerticalScrollbar = htmlContainer.scrollHeight > htmlContainer.clientHeight;
var hasHorizontalScrollbar = htmlContainer.scrollWidth > htmlContainer.clientWidth;
Re: How to determine if "auto" x & y scroll bars are displayed
Posted: Mon Aug 17, 2015 11:30 am
by dscorca
Thank you so much Alex, that's exactly what I was looking for.
I added the follow to the record format's 'onload' event and now the buttons appear only when their respective html containers (SCNOTE0501 and SCNOTE0502) exceed the initial box size.
var html0501 = document.getElementById("SCNOTE0501");
var html0502 = document.getElementById("SCNOTE0502");
var hasVerticalScrollbar = html0501.scrollHeight > html0501.clientHeight;
if (hasVerticalScrollbar) {
applyProperty("btn0501","visibility","visible");
} else {
applyProperty("btn0501","visibility","hidden");
}
var hasVerticalScrollbar = html0508.scrollHeight > html0508.clientHeight;
if (hasVerticalScrollbar) {
applyProperty("btn0502","visibility","visible");
} else {
applyProperty("btn0502","visibility","hidden");
}
Re: How to determine if "auto" x & y scroll bars are displayed
Posted: Mon Aug 17, 2015 11:39 am
by Alex
Great! Glad I could help.