PDA

View Full Version : Two (dual) Monitors - Two Applications - Please Help



me_myself
06-09-2008, 09:32 PM
We have our older version of the client-server software running on my pc - the older version needs 800x600 (cannot run in higher resolutions). Now we have a new version of the software - web based - which needs 1024x768 (will not run in lower resolutions). For this reason, i have two monitors and planned on using dual/extended screens.

The problem i am facing with the above is the script i am using for the 1024x768 application takes the default screen resolution (800x600) and not its monitor resolution (1024x768) - how do i make it so that the application checks for its current monitor resolution and display.

Thanks.

jscheuer1
06-10-2008, 06:57 AM
If it is running on two monitors at once, it must adapt to the lower resolution monitor.

Now, that said, I really cannot tell form your post what you are doing exactly. If all you need to know is how to test in javascript for screen resolution, the javascript properties that will tell you this are:

screen.width

and:

screen.height

me_myself
06-17-2008, 05:15 PM
If it is running on two monitors at once, it must adapt to the lower resolution monitor.

Now, that said, I really cannot tell form your post what you are doing exactly. If all you need to know is how to test in javascript for screen resolution, the javascript properties that will tell you this are:

screen.width

and:

screen.height

Here is what i am doing - i have a monitor connected to my laptop. I have set my laptop screen resolution to be 800x600 and the external monitor to be 1024x768. Now i launch IE in the external monitor. When i open the application in IE, i get a message saying the browser needs a minimum of 1024x768 to run the application - the application is taking the screen resolution of my laptop screen and not the external screen in which the IE is opened.

Thanks.

jscheuer1
06-17-2008, 06:02 PM
Because - as far as I know - additional monitors may only extend, or show a copy of the existing desktop, you would need to disable the lower res monitor.

If you are using the other monitor to extend the desktop, rather than as a copy of it, you might be OK as long as the program that needs the higher resolution launches only in the extended portion of the desktop. Getting this to happen is beyond me though. I've only ever been able to get things over to the extended monitor by dragging them. Unless, if your were able to make the external monitor the primary monitor with the one on the lap top being the extension - that might work.

If all you want is to run the program, disable the lap top's monitor and hope that the program will now take the dimensions and resolution from the active monitor.

I don't think this is anything to do with javascript though. You could at least test the browser in the extended monitor by pasting:

javascript:alert(screen.width + ' x ' + screen.height)

into the browser's address bar to see what res the browser thinks it has.

me_myself
06-17-2008, 06:15 PM
Thanks for the script. When i used it, it shows the correct browser resolution (primary as 800x600 and the secondary as 1024x768) but the javascript which i use some how always takes the primary screens resolution :confused: :confused:

jscheuer1
06-17-2008, 06:17 PM
I just edited my last post while you were replying. First you would need to know what the browser thinks the res is (I just explained it but you missed it as you were already replying, go back and do that part). If the browser is seeing the lower res, you cannot force it to tell the web based code anything different. If the web based code relies solely on javascript, HTML and server - side code, it is simply getting the wrong information - probably from the browser, and could be coded to give the user the option of overriding that and running it anyway. But if it uses active x or java, it might be getting the wrong idea from the computer itself, and I would be unsure how to make it do anything different without disabling the low res monitor.

None of this matters much either way unless you have access to the code of the web based application, and can change it

jscheuer1
06-17-2008, 06:24 PM
Thanks for the script. When i used it, it shows the correct browser resolution (primary as 800x600 and the secondary as 1024x768) but the javascript which i use some how always takes the primary screens resolution :confused: :confused:

OK, well we need to know how the web based application is determining the resolution. It obviously either doesn't use javascript, or if it does, it's using it wrong.

me_myself
06-17-2008, 08:01 PM
Here is the script which determines the browser resolution -



<script>
function CheckResolution()
{
if(window.screen.width >= 1024 && window.screen.height >= 768)
{
document.getElementById("imgLaunch").style.display = 'block';
document.getElementById("imgMessage").style.display = 'none';
}
else
{
document.getElementById("imgLaunch").style.display = 'none';
document.getElementById("imgMessage").style.display = 'block';
}
}
</script>

<!-- below code within the body -->

<td>
<img id="imgLaunch" style="display:none;" src="images/icon_success.jpg" width="156" height="123" border="0">
<img id="imgMessage" style="display:none;" src="images/icon_failure.jpg" width="156" height="123" border="0">
</td>


the purpose of the above code is to Check if the browser resolution is above 1024, if it is equal or above 1024, it should display an image and if it is below, it should display a different image

Please help me change the script to successfully capture the "current" browser resolution and display the application.

Thanks

jscheuer1
06-17-2008, 08:47 PM
This almost seems too simple, but I don't see anywhere that the code gets executed. The way you have it, with the script in the head (I'm assuming) and the markup in the body, it would have to be onload, and you haven't shown and/or mentioned that happening.

Generally, this would be a better strategy (all in the body, all in the td in fact):


<td>
<img id="imgLaunch" style="display:none;" src="images/icon_launch.jpg" width="156" height="123" border="0">
<img id="imgMessage" style="display:none;" src="images/icon_launch_disabled.jpg" width="156" height="123" border="0">
<script type="text/javascript" defer="defer">
function CheckResolution()
{
if(screen.width >= 1024 && screen.height >= 768)
{
document.getElementById("imgLaunch").style.display = 'block';
document.getElementById("imgMessage").style.display = 'none';
}
else
{
document.getElementById("imgLaunch").style.display = 'none';
document.getElementById("imgMessage").style.display = 'block';
}
}
CheckResolution();
</script>
</td>

me_myself
06-17-2008, 08:57 PM
Sorry for not mentioning it, the function was getting called in the body onload.

I copied your code to TD as you said (removed the one in the head and removed body onload), but still no luck :(

It always takes my laptops primary resolution which is 800x600, even though the monitor where the IE resides has 1024x768 :confused:

Any ideas? Thanks.

jscheuer1
06-18-2008, 12:20 AM
It always takes my laptops primary resolution which is 800x600, even though the monitor where the IE resides has 1024x768

If that's the case, why did the browser report the resolution correctly when we asked it directly? There should be no difference between pasting in:

javascript:alert(screen.width + ' x ' + screen.height)

to the address bar as we tried and:


if(screen.width >= 1024 && screen.height >= 768)

Just as a test, change it to (add to it temporarily):


<td>
<img id="imgLaunch" style="display:none;" src="images/icon_launch.jpg" width="156" height="123" border="0" alt="go">
<img id="imgMessage" style="display:none;" src="images/icon_launch_disabled.jpg" width="156" height="123" border="0" alt="nogo">
<script type="text/javascript" defer="defer">
function CheckResolution()
{
alert(screen.width + ' x ' + screen.height);
if(screen.width >= 1024 && screen.height >= 768)
{
document.getElementById("imgLaunch").style.display = 'block';
document.getElementById("imgMessage").style.display = 'none';
}
else
{
document.getElementById("imgLaunch").style.display = 'none';
document.getElementById("imgMessage").style.display = 'block';
}
}
CheckResolution();
</script>
</td>

To see the actual numbers at that point in the code. If they are correct, there may be something wrong with your images. You may have two of the same images, just with different filenames. Or your markup could be off somehow, or there could be other code on or associated with the page that's conflicting somehow.

If the numbers are wrong in this test, it simply shows yet another reason why 'sniffing' the browser isn't always the best course to take. A simple statement on the page:


This page requires 1024 x 768 screen resolution or higher. Do you wish to proceed?

Would do just as well.

Then again, you could keep your 'sniff' test for the vast majority of cases where it would be appropriate, and have an override button that will launch your application:


<input type="button" onclick="launch();" value="Override - Launch Anyway">

The onclick="launch();" is just a stand-in for whatever the code might actually need to be, as what you've shown me so far gives me no clue what that might be.

me_myself
06-18-2008, 02:07 PM
Very Strange - when i test the page in Firefox, the browser shows the alert with the correct resolution (800 in 800 monitor and 1024 in 1024 monitor) and also shows the correct image in firefox. But when i see the page in IE, the script alert shows 800x600 in both monitors and also the disabled image in both monitors. Pasting the entire code of the page -





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Launch Screen</title>
</head>

<body id="roma_launch_bg" >
<div id="launch_holder" align="center">
<table width="632" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="212" valign="top"><table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/spacer.gif" width="100" height="170"></td>
</tr>
<tr>
<td>
<img id="imgLaunch" style="display:none;" src="images/icon_launch.jpg" width="156" height="123" border="0" alt="go">
<img id="imgMessage" style="display:none;" src="images/icon_launch_disabled.jpg" width="156" height="123" border="0" alt="nogo">
<script type="text/javascript" defer="defer">
function CheckResolution()
{
alert(screen.width + ' x ' + screen.height);
if(screen.width >= 1024 && screen.height >= 768)
{
document.getElementById("imgLaunch").style.display = 'block';
document.getElementById("imgMessage").style.display = 'none';
}
else
{
document.getElementById("imgLaunch").style.display = 'none';
document.getElementById("imgMessage").style.display = 'block';
}
}
CheckResolution();
</script>
</td>
</tr>
</table></td>
<td width="420" valign="top"><table id="launch_content" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/spacer.gif" width="1" height="120"></td>
</tr>
<tr>
<td align="left" valign="top"><p>Welcome Message</p>
<p>&nbsp; </p></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>


Thanks a million for all the help so far. Truly appreciate it.

jscheuer1
06-18-2008, 04:39 PM
This means what I said:


If the numbers are wrong in this test, it simply shows yet another reason why 'sniffing' the browser isn't always the best course to take.

You really are left with the two alternatives (and variations on them) that I mentioned after that. The only other thing I can think of is, if there is only one instance of IE open and it is in the extended monitor, if it still gets it wrong, then you really are 'in trouble' If it gets it right, you could keep your current setup, just making sure to have only the one instance open.

How many people besides yourself will be using this dual monitor setup with one monitor less than 1024 and the other greater than or equal to 1024?

me_myself
06-18-2008, 04:46 PM
I had opened only one instance of IE7. Opened it in my laptop screen, then resized, draged it over to the secondary monitor and made it full size - No luck with the script in IE both ways.

In our office, there are a bunch of sales guys who use their laptops connected to an external monitor. They take their laptop with them when they go out, when they are in, they connect their external monitors to their laptop.

Why does Firefox 3 show the correct details while IE 7 craps out !!??!!

The best part is the new application works well only on IE7 :( :confused: :eek:

Is the situation hopelessly screwed ??!!

jscheuer1
06-18-2008, 04:58 PM
Is the situation hopelessly screwed ??!!

No, not unless the rest of the script will barf in IE if IE thinks it is on a smaller monitor. If that's not the case, you just need an override option.

me_myself
06-18-2008, 05:14 PM
Whats an override option?

Thanks for the help jscheuer1

jscheuer1
06-18-2008, 09:11 PM
Whats an override option?

Let me be clear. If your web based application simply will not run in a browser that thinks it's on a monitor with too low of a resolution, then this probably will not help, though there may still be a way.

However, if the only thing preventing it from running is your javascript resolution test, you can change the test to instead of being a filter - allowing 1024 and above, denying those below - to an advisory. If the user wants to try anyway, they could click a button or link provided for that purpose.

me_myself
06-18-2008, 09:57 PM
Yep - the web based application will not run in resolutions lower than 1024x768 :(

Since there is no way out in javascript, i think i should look for options in Asp .Net - thats the language the application is built on.

Thanks for all your help jscheuer1 / John.

me_myself
06-19-2008, 09:07 PM
I was googling around and came to a site where they checked the browsers inner width and height. I tried using that and it worked, it now shows the correct image in the correct browser resolutions.



<html>
<head>
<title> screen size detection</title>
<script language="javascript" type="text/javascript">
function testRes(){

//opera Netscape 6 Netscape 4x Mozilla
if (window.innerWidth || window.innerHeight){
docwidth = window.innerWidth;
docheight = window.innerHeight;
}
//IE Mozilla
if (document.body.clientWidth || document.body.clientHeight){
docwidth = document.body.clientWidth;
docheight = document.body.clientHeight;
}
alert("the width = "+docwidth+" height = "+docheight);
if(docwidth>=975){

document.getElementById("imgLaunch").style.display = 'block';
document.getElementById("imgMessage").style.display = 'none';
}
else
{
document.getElementById("imgLaunch").style.display = 'none';
document.getElementById("imgMessage").style.display = 'block';
}

}
</script>
</head>
<body onLoad="testRes();">
<img id="imgLaunch" style="display:none;" src="images/icon_launch.jpg" width="156" height="123" border="0" alt="go">
<img id="imgMessage" style="display:none;" src="images/icon_launch_disabled.jpg" width="156" height="123" border="0" alt="nogo">
</body>
</html>


Thanks.

jscheuer1
06-20-2008, 03:35 AM
That's just a variation on the override theme. But it looks like detection to the user, so is better for your purposes. However, with the browser still thinking it's resolution is 800 x 600 will your application run? I thought you said that it would not. But if it does, that's great!