asked on

Need to check for Browser Resolution..

Hello All-

Using the code below, I have my Web Application open at a resolution of 1024x768. I need to pop open an alert if the user Maximizes or Minimizes the browser window (ie changes e resolution). Is it possible that this alert can have a Yes or No button so if they click Yes the browser will reload with a resolution of 1024x768 and if they click No then the window just remains the same size?

Please post code if this can be done, thanks.

<!-- Inside head area -->
 
<script language="javascript" type="text/javascript">
      window.resizeTo(1024, 768) //width,height
</script>

Open in new window

oobayly

You could use the javascript confirm method:
http://www.w3schools.com/JS/js_popup.asp

It does only have OK, Cancel buttons though, so you have to work your message accordingly

if (confirm('Your message')){
  window.resizeTo(1024, 768);
}

Open in new window

JoshinHtown

ASKER

Hello oobayly-

I tried the below code (might want to check in case I made a mistake) and upon the Application opening, when I click maximize no alert pops up. Am I missing something?

<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("If you want to print to a scale, then the Resolution must be at 1024x768.  Would you like to print to scale?");
if (r==true)
  {
  window.resizeTo(1024, 768);
  }
else
  {
  
  }
}
</script>
</head>

Open in new window

oobayly

How are you calling show_confirm()?

JoshinHtown

ASKER

Ahh great question. I guess I'm not calling it yet. Do I need to place anything in Default.aspx.vb? If so, where?

JoshinHtown

ASKER

Hi oobayly-

I still need some help on this. Do you have any suggestions for me based on my last post?

Regards,

JoshinHtown

ASKER

I placed the below code in the Page_Load event of my Default.aspx.vb And while it works when the page first loads, I was hoping the page would fully load and then upon the user changing the page size (maximize, minimize, etc) the script could then popup and ask if the user wants to go back to 1024x768.

Can I do this? If so, what event in my codebehind should I place the above code in or what modifications do I need to make?

Thanks

ClientScript.RegisterStartupScript(Me.GetType(), "show_confirm", "<script>show_confirm();</script>")

Open in new window

oobayly

Instead of calling show_confirm when the page loads, call it when the body (window) resizes:

<body onResize='show_confirm();'>

Open in new window

JoshinHtown

ASKER

Hi oobayly-

Thanks to your new code it works partially but 2 things :

1) when the page first loads it shows the show_confirm prompt (I was hoping it would not show this prompt when the page first loads).

2) When the page has loaded and I resize the page, the prompt comes up as desired but I have to click OK twice in order to get it to resize the page back. Same thing on the Cancel button.

This is close. Suggestions?

JoshinHtown

ASKER

Any thoughts oobayly on my last post? sorry I know you are very busy. I feel this is very close.

oobayly

To prevent the dialog being shown when the page is loaded, try hooking the resize event only when the page loads.
As for the other multiple dialogs, that's a bit of a problem as the resize event is being fired. You could have a flag that specifies whether the dialog is to be shown. The problem is that the number of times the event is fired may vary from browser to browser. Firefox on my machine doesn't even fire the onresize event.

Personally I'd dispense with the javascript, and force the page to be 1024px wide. It does however the doctype to be set for the page, ie:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  <style type='text/css'>
    body{
      width: 1280px;
      margin-left: auto;
      margin-right: auto;
    }
  
  </style>

Open in new window

JoshinHtown

ASKER

Hello oobayly-

So to make sure I understand you, your above code will keep the page at the same size regardless if the user tries to maximize, etc? Below is a part of my code but I'm still able to change the page size, etc. I did take out the OnResize() code from before.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head id="Head1" runat="server">
 
<script language="javascript" type="text/javascript">
      window.resizeTo(1024, 768) //width,height
</script>
 
    <title></title>
   <%--  For LTR. . . use these styles if dir="ltr" in html tag   --%>   
   <style type="text/css">
        .appFloat1 {float: left;} 
        .appFloat2 {float: right;}
        .appAlign1 {text-align: left;}
        .appAlign2 {text-align: right;}
        .combined1 {float: left; text-align: left;}
        .combined2 {float: right; text-align: right;}
        .mapPosition {left: 260px;} 
        .dockPosition {left: 0px;} 
    }
 
   </style>
   <style type='text/css'>
    body{
      width: 1280px;
      margin-left: auto;
      margin-right: auto;
    }
  
  </style>
  
  
    <link href="/aspnet_client/System_Web/2_0_50727/CrystalReportWebFormViewer3/css/default.css"
        rel="stylesheet" type="text/css" />
    
    
 
</head>
<body style="margin: 0px 0px 0px 0px; background-color: white; width: 100%; font-family: Verdana; font-size:8pt; " >

Open in new window

oobayly

The window will be whatever size the user wants, but the body will be set to a constant width. If the window is too small, it will enable the horizontal scrollbar so that the entire page can be viewed.
If the window is wider than the body width, the body is centred in the windows.

Your example won't work as you've overridden the margin & width in the body tag's style attribute.

JoshinHtown

ASKER

Hello oobayly-

After extensive testing on your suggestion about forcing the page to be 1024px wide and using your provided code, I couldn't find any consistency's in the ArcGIS Server Web application in printing to scale. The printing to scale relies heavily on the web page resolution. Leaving that aside (I'll assume you haven't dealt with AGS before), the closest I can get is on this OnResize method we were originally talking about.

So can you explain how I can "try hooking the resize event only when the page loads" as you mentioned before? Right now I have the <body onResize='show_confirm();'> code at the very bottom of my Web App just above the </body> tag.

Also if you have any suggestions on how to only have that confirm box only pop up once, please let me know.

Regards,

oobayly

"Right now I have the <body onResize='show_confirm();'> code at the very bottom of my Web App just above the </body> tag."
You can't do that as a page can only have one body tag.

    function body_OnLoad(){
      // Only hook the resize handler after the page has loaded
      document.body.onresize = show_confirm;
    }
    
    function show_confirm() {
      var r=confirm("If you want to print to a scale, then the Resolution must be at 1024x768.  Would you like to print to scale?");
      if (r==true) {
        window.resizeTo(1024, 768);
      }
    }
 
 
<body onload="body_OnLoad();">

Open in new window

JoshinHtown

ASKER

If I already have a <body tag (see below) then where should I place the <body onload="body_OnLoad();"> ? From above it looks like you might have it inside the <script> </script> tags, which wouldn't be right, correct?

<body style="margin: 0px 0px 0px 0px; background-color: white; width: 100%; font-family: Verdana; font-size:8pt; " >

oobayly

Yes, the first block of code is javascript so it has to reside in script tags. For the body tag, what I was trying to show was what you need to set the onload attribute to. I should have added a comment above the body tag to say that it was to be in a different section

Your body tag would become:
<body style="margin: 0px 0px 0px 0px; background-color: white; width: 100%; font-family: Verdana; font-size:8pt; " onload="body_OnLoad();" >

JoshinHtown

ASKER

Ok I tried the below line (just combined the two body tags into one) and it seems to work but when the page loads it still pops up the Show confirm prompt. Ideas?

<body onload ="body_OnLoad()" style="margin: 0px 0px 0px 0px; background-color: white; width: 100%; font-family: Verdana; font-size:8pt; ";>

<script language="javascript" type="text/javascript">

function body_OnLoad(){
// Only hook the resize handler after the page has loaded
document.body.onresize = show_confirm;
}

function show_confirm(){
var r=confirm("If you want to print to a scale, then the Resolution must be at 1024x768. Would you like to print to scale?");
if (r==true)
{
window.resizeTo(1024, 768);
}
}
</script>

JoshinHtown

ASKER

Here is a screenshot. As you can see the map hasn't shown up yet because the page is still loading and the message box pops up. Thoughts?
Page-Loading-screenshot.gif

ASKER CERTIFIED SOLUTION

oobayly

membership

This solution is only available to members.

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

Start Free Trial

JoshinHtown

ASKER

Yes I think you might be onto something there. I have found a property for the Printing Tool called LayoutSOETask1_Shown so when the Print tool is clicked a form popsup giving the print options. I've added that as a sub procedure shown below and I also added code that SHOULD call your script. Funny thing is that if I put that exact same ClientScript line in the Page_Load event it fires but in the procedure below it doesn't execute. It hits that line but never does anything. Am I missing something in the handles, args, etc?

Protected Sub LayoutSOETask1_Shown(ByVal sender As Object, ByVal args As System.EventArgs) Handles LayoutSOETask1.Shown
ClientScript.RegisterStartupScript(Me.GetType(), "btnPrint_OnClick", "<script>btnPrint_OnClick();</script>")
'MsgBox("Did anything popup")
End Sub

JoshinHtown

ASKER

Interesting.. So why would the below line work inside the Page_Load but not work inside that Sub Procedure?

ClientScript.RegisterStartupScript(Me.GetType(), "btnPrint_OnClick", "<script>btnPrint_OnClick();</script>")

JoshinHtown

ASKER

This line below worked.. You have helped me a lot oobayly. Thanks for all the help.

ScriptManager.RegisterStartupScript(Me.Page, GetType(String), "btnPrint", "btnPrint();", True)

oobayly

No worries, glad it all works.