[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Need to check for Browser Resolution..

Posted on 2009-04-27
23
Medium Priority
?
334 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:JoshinHtown
  • 14
  • 9
23 Comments
 
LVL 15

Expert Comment

by:oobayly
ID: 24242585
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

0
 

Author Comment

by:JoshinHtown
ID: 24242896
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

0
 
LVL 15

Expert Comment

by:oobayly
ID: 24243530
How are you calling show_confirm()?
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

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

Author Comment

by:JoshinHtown
ID: 24252623
Hi oobayly-

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

Regards,
0
 

Author Comment

by:JoshinHtown
ID: 24253282
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

0
 
LVL 15

Expert Comment

by:oobayly
ID: 24253653
Instead of calling show_confirm when the page loads, call it when the body (window) resizes:
<body onResize='show_confirm();'>

Open in new window

0
 

Author Comment

by:JoshinHtown
ID: 24254152
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?
0
 

Author Comment

by:JoshinHtown
ID: 24261813
Any thoughts oobayly on my last post?  sorry I know you are very busy.  I feel this is very close.
0
 
LVL 15

Expert Comment

by:oobayly
ID: 24262374
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

0
 

Author Comment

by:JoshinHtown
ID: 24263172
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

0
 
LVL 15

Expert Comment

by:oobayly
ID: 24263360
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.
0
 

Author Comment

by:JoshinHtown
ID: 24264475
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,
0
 
LVL 15

Expert Comment

by:oobayly
ID: 24268355
"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

0
 

Author Comment

by:JoshinHtown
ID: 24269437
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; " >
0
 
LVL 15

Expert Comment

by:oobayly
ID: 24269528
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();" >
0
 

Author Comment

by:JoshinHtown
ID: 24269544
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>
0
 

Author Comment

by:JoshinHtown
ID: 24269626
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
0
 
LVL 15

Accepted Solution

by:
oobayly earned 2000 total points
ID: 24271428
It's quite possible that whilst the body has loaded, items (such as iframes etc.) may still be loading. By the looks of it you're testing in IE7 which I don't have on my machine. However the code I give should not display the dialog when the body loads, but only when the window is resized after the body has loaded.

Might I suggest another option, which may be far less intrusive. Just testing a page which asks if I want to resize every time I resize the window is pretty annoying.
It appears you need the window size to be set only for printing, correct? Then how about allowing the user to use the site in whatever size they desire. Stick a "Print" button on the page, which only then asks tells the user about the print requirements, and the shows the print dialog.

I've never used ArcGIS Server, so this approach may be completely unuseable. It's just that the methods for detecting window size & handling the resize events are vastly different across browsers.
// Javascript code
    function btnPrint_OnClick() {
      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);
      }
      window.print();
    }
 
 
<!-- button goes somewhere in body -->
<input type='button' value='Print' onclick='btnPrint_OnClick();'>

Open in new window

0
 

Author Comment

by:JoshinHtown
ID: 24271989
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
0
 

Author Comment

by:JoshinHtown
ID: 24280021
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>")
0
 

Author Comment

by:JoshinHtown
ID: 24280355
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)
0
 
LVL 15

Expert Comment

by:oobayly
ID: 24280446
No worries, glad it all works.
0

Featured Post

NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month18 days, 2 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question