Hi,

When I tried out the AlwaysVisibleControl, which is a very nice feature I think, I found a little side effect that it has. It turns out that it is possible to keep on scrolling the IE web browser forever if you are a bad guy. (I am running IE 7 beta 2)

This is how you do it:

Add a panel (id="m_panel", make it 200 by 200) to one of your web pages that have other content so that you have a physical size of the page. Add an AlwaysVisibleControl and code it as the following:

<atlasToolKit:AlwaysVisibleControlExtender ID="fce" runat="server">

                <atlasToolKit:AlwaysVisibleControlProperties TargetControlID="m_panel" VerticalSide="Top"

                    VerticalOffset="140" HorizontalSide="Left" HorizontalOffset="70" ScrollEffectDuration=".1" />

            </atlasToolKit:AlwaysVisibleControlExtender>

View the page in your web browser and resize it so that the panel is outside the bounds of the web window. Now you can just keep on scrolling in e.g vertical direction forever.

Is there a way to set the web browser minimum allowed window size in your code to prevent this kind of behavior?

Thanks!

I concocted a technique which (if the user has JavaScript enabled) prevents a particular element (div in my case) from being resized smaller than a certain height (should work for width as well); not sure if that would help for your case or not.  I seem to recall that it isn't possible to set the browser window size using JavaScript because it is prevented for security reasons.  You could also open your page in a pop up window using JavaScript and prevent it from being resized at all, but then users can't resize the window to make it larger either.

Acknowledgments to Andy Langton at http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ for his cross-browser get viewport size function

On my page I have a div as follows:

<div style="width: 100%; height:415px; overflow:auto; margin-right:20px" id="divContent">

<!-- insert content here --> 

</div> 

Disclaimer: This div is actually on a content page, and the ContentPlaceHolder is inside a table cell on the Masterpage.  The table is 800px wide, so with no cellpadding/spacing, divContent will be 800px wide (100%).  Don't see why that particular rather unusual setup would be required, however.

I used the following JavaScript to make the div automatically change height when the window is resized, and to enforce a minimum height (415px) for the div:

 

function getWindowHeight() 
{ 
 var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
    viewportheight = window.innerHeight;
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
    viewportheight = document.documentElement.clientHeight;
 }
 
 // older versions of IE
 
 else
	{		
    viewportheight = document.getElementsByTagName('body')[0].clientHeight;
	}	
	return viewportheight; 
} 
 
window.onresize = resize;
window.onload = resize;

function resize() {  
		var docheight = getWindowHeight();
		var dv = document.getElementById('divContent');		
      if (docheight > 650)
			{
				docheight = docheight - 235;
				dv.style.height = docheight + 'px';
			}
			else
			{
				dv.style.height = '415px';
			}      
}

The subtraction of 235 pixels is a result of the navigation bar on my Masterpage which is 235 pixels high. If you want your div to take up the full height of the window then you can just chuck that line.

Kind of a funky almost-solution to your question about enforcing minimum size. It worked out for what I needed to do, so hopefully it might for you or someone else!

 Hi Mtv, I find your resizing solution very interesting but I am not quite sure how to implemented. Could you elaborate a bit more how to to this or post a more complete example? I am also using a masterpage and a contentpage and I think the javascript code for the resizing goes in the masterpage but I am unsure on how to call it, particularly the onresize function!

 Thanks,

Daniel
 

Hi Daniel,

Below you will find a complete example that is as close as possible to the situation in our real-world application.  I made the height values smaller in this version to make the resizing more obvious at lower screen resolutions.  In my case, the javascript code for resizing is on the content page, because there is only one page in our application where we wanted the functionality.  I don't see why it wouldn't work on the master page if that better suits your application.  In that case, I would recommend assigning an id to the outermost div on your master page, and adjusting the javascript so it resizes that div instead (and move the javascript itself to the master page, as well).  You also should not have to call the resize() function manually, because the window.onresize and window.onload lines should take care of calling it for you.

Other notes: 

In our application we unfortunately spawn a pop-up window, so I included a Default.aspx to open the content page in a pop-up for completeness.  The resizing works equally well in a normal window.

Firefox (version 3 is all I have installed on this machine, not sure if it is the same for older versions) will not resize the div until you release the mouse button, but IE resizes as you continue to click and drag the window border.

You may notice that the "docheight = docheight - 150;" line would make more sense if it said 100 (the height of the 'navigation bar') instead of 150, but the extra 50 pixels is a fudge factor to make sure the div is not actually too tall for the window size (without the extra pixels, no matter how tall or short the window is, there is always a vertical scroll bar).  50 is probably excessive, but you can obviously adjust this as needed and I recommend checking with multiple browsers since there may be some variation.

Hope this helps explain things a bit better!

--Matt

Default.aspx (to launch the pop-up window):

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
<script language="javascript" type="text/javascript">
    var myWindow = open('Content.aspx','myWindow','width=900px,height=400px,chanelmode=no,directories=no,location=no,menubar=no,resizable=yes,scrollbars=yes,status=yes,titlebar=yes,toolbar=no');
    myWindow.focus();
</script>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>

Content.aspx (the content page):

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Content.aspx.cs" Inherits="Content" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script language="javascript" type="text/javascript">

function getWindowHeight() 
{ 
    var viewportheight;
 
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined')
    {
        viewportheight = window.innerHeight;
    }
 
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
     {
        viewportheight = document.documentElement.clientHeight;
     }

    // older versions of IE

    else
    {		
        viewportheight = document.getElementsByTagName('body')[0].clientHeight;
    }
    	
    return viewportheight; 
}
 
window.onresize = resize;
window.onload = resize;

function resize()
{  
    var docheight = getWindowHeight();
    var dv = document.getElementById('divContent');		
    if (docheight > 400)
    {
	    docheight = docheight - 150; // adjust this line if you want the div to take up the full height of the container
	    dv.style.height = docheight + 'px';
    }
    else
    {
	    dv.style.height = '300px';
    }      
}

</script>
    <div style="background-color: Blue; width: 100%; height:300px; overflow:auto; margin-right:20px" id="divContent">
    Hello, World!
    </div>
</asp:Content>

MasterPage.master:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="margin: 0px">
            <table id="Table1" style="width: 800px" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td>
                        <div style="height: 100px; background-color: Lime">Navigation bar</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                        </asp:ContentPlaceHolder>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>