asked on

How can I do to detect if scroolls bars are visible in a popup window with javascript?

I need to detect with javascript if a popup have or not a scroolbars

I was reading some info from:
http://stackoverflow.com/questions/2299869/detect-if-window-has-scrollbar-in-ie-using-javascript-window-open

But it doesn't help me

For exmple in the next url
http://samples.genexus.com/dimpopup/webpanel1.aspx

When you press confirm button it show a popup.

In Firefox I can check if this popup have a scroollbars with this simple code:
window.scrollbars.visible

But in IE is not easy to do the same.

Any body can help me?

thnaks!

R-Byter

Look here:

https://www.experts-exchange.com/questions/20968033/Detect-Scrollbar.html

Regards

Samuel Liew

It can be done. See the example code I have put together.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
window.onresize = doCheckSB;
window.onload = doCheckSB;
var timeout;
function doCheckSB() {
	if(timeout) clearTimeout(timeout);
	timeout = setTimeout(checkSB, 1000);
}
function checkSB() {
	var windowWidth  = $(window).width();
	var windowHeight = $(window).height();
	
	var docWidth  = $(document).width();
	var docHeight = $(document).height();
	
	if(windowWidth >= docWidth && windowHeight >= docHeight) alert("No scrollbars!");
	if(windowWidth < docWidth) alert("Horizontal is visible");
	if(windowHeight < docHeight) alert("Vertical is visible");
}
</script>
</head>

<body>
<p><a href="#" onclick="$('body').css('width', '150%');">Make page have horizontal scrollbars</a><br />
<a href="#" onclick="$('body').css('height', '150%');$('html').css('height', '150%');">Make page have vertical scrollbars</a></p>
<p><a href="#" onclick="$('body').css('width', '').css('height', '');$('html').css('height', '');">Clear scrollbars</a>
</p>
<p><a href="#" onclick="checkSB();">Check for scrollbars</a></p>
</body>
</html>

Open in new window

Samuel Liew

Here is the simplified version (that either returns true or false)

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function checkSB() {
	return ($(window).width() < $(document).width() || $(window).height() < $(document).height());
}
</script>

Open in new window

ASKER CERTIFIED SOLUTION

Samuel Liew

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial