JavaScript - How To Detect Screen Resolution With Php And Javascript?

im totally new to javascript and i would like to know how i can make my internet page detect the resolution of someone's computer and on base of that use different 'html pages' so that the background fits etc.

All-

I have a page coded that pulls files from a directory using PHP then sets them up using a Flash type player to stream the video. My problem is that I have to resize the video window for each computer I play it on. They all have different resolutions. I was able to use:

Code:

<script type="text/javascript" src="/jwplayer/swfobject.js"></script>
        <script type="text/javascript">


var x = (+screen.width);
var y = (+screen.height);


if (x == '1920' & y == '1080')
        {
                var xn = 1440;
                var yn = 900;
                document.write(xn);
                document.write(yn);






        }

if (x == '1024' & y == '600')
        {
                var xn = 900;
                var yn = 400;
                document.write(xn);
                document.write(yn);
        }



                swfobject.registerObject("player","9.0.98","/jwplayer/expressInstall.swf");
        </script>

To pull out the current Resolution of the user and pass to a variable the resolution I want the video to be.


Here is where the video code is


Code:

 <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="900" height="400">
                <param name="movie" value="/jwplayer/player.swf" />
                <param name="allowfullscreen" value="true" />

                <param name="allowscriptaccess" value="always" />

                <?
                echo "<param name='flashvars' value='file=../Movies$full_dir.mp4 =../Movies$full_dir.jpg' />";
                ?>
                <object type="application/x-shockwave-flash" data="/jwplayer/player.swf" width="900" height="400">
                        <param name="movie" value="/jwplayer/player.swf" />

                        <param name="allowfullscreen" value="true" />

                        <param name="allowscriptaccess" value="always" />
                        <?
                        echo "<param name='flashvars' value='file=../Movies$full_dir.mp4&image=/Movies$full_dir.jpg' />";
                        ?>
                        <p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p>

                </object>
        </object>

In the video part, where it says Height and Width, I just need to have it take the 2 variables i created depending on the resolution used. Variables xn or yn.

Any ideas? Please Please help! been stumped on this all afternoon!!

Thanks
Defyer!

Hi all,

I'm new to javascript and im trying to teach myself how to use it, however, ive come accross a problem. I'm using this code embeded in a HTML page for rollover images:

Code:

<script language="JavaScript" type="text/javascript">
				<!--
					if (document.images) {

						homebuttonup       = new Image();
 						homebuttonup.src   = "./Images/nav/home2.png" ;
  						homebuttondown     = new Image() ;
  						homebuttondown.src = "./Images/nav/home2.png" ;
	
						newsbuttonup       = new Image();
 						newsbuttonup.src   = "./Images/nav/news.png" ;
  						newsbuttondown     = new Image() ;
  						newsbuttondown.src = "./Images/nav/news2.png" ;
	
						gallerybuttonup       = new Image();
 						gallerybuttonup.src   = "./Images/nav/gallery.png" ;
  						gallerybuttondown     = new Image() ;
  						gallerybuttondown.src = "./Images/nav/gallery2.png" ;
						
						}

						function buttondown( buttonname )
						{
    						if (document.images) {
    					  document[ buttonname ].src = eval( buttonname + "down.src" );
    						}
							}
						function buttonup ( buttonname )
							{
  						  if (document.images) {
    					  document[ buttonname ].src = eval( buttonname + "up.src" );
    					}
					}
				// -->
			</script>
           
<a href="index.html?cmd=welcome" onmouseover="buttondown('homebutton')"onmouseout="buttonup('homebutton')">
<img src="./Images/nav/home2.png" name="homebutton" border="0" /></a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
<a href="about.html?cmd=welcome" onmouseover="buttondown('newsbutton')"onmouseout="buttonup('newsbutton')">
<img src="./Images/nav/news.png" name="newsbutton" border="0" /></a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<a href="services.html?cmd=welcome" onmouseover="buttondown('gallerybutton')"onmouseout="buttonup('gallerybutton')">
<img src="./Images/nav/gallery.png" name="gallerybutton" border="0" /></a>

This works completly fine in 1280 x 800 but goes mental when you hover over it in 1024 x 768 screen resolution. Can anyone help please, it would be greatly appreciated!

Dear all,

I would like to know if javascript can detect the screen idle time, if certain time come up in idle, then it will redirect to another page, any help will be appreciate, thanks!

Eddie

Hi all,

I'm trying to detect the screen resolution of the client's computer.
I've been using the following example:

PHP Code:
<HTML>
<TITLE>screen resolution</TITLE>
<HEAD>
</HEAD>
<BODY>

<?php
if(isset($_COOKIE["users_resolution"]))
$screen_res = $_COOKIE["users_resolution"];
else //means cookie is not found set it using Javascript
{
?>
<script language="javascript">
<!--
writeCookie();

function writeCookie()
{
var today = new Date();
var the_date = new Date("December 31, 2023");
var the_cookie_date = the_date.toGMTString();
var the_cookie = "users_resolution="+ screen.width +"x"+ screen.height;
var the_cookie = the_cookie + ";expires=" + the_cookie_date;
document.cookie=the_cookie

location = 'get_resolution.php';
}
//-->
</script>
<?php
}
?>


<?php
echo "Your screen resolution is set at ". $screen_res;
?>
</BODY>
</HTML>

This all works fine except it doesn't factor in if the user changes their screen resolution for any reason. In my own experience I often change resolutions depending on what I'm doing.

I posted the question in there PHP forum http://www.codingforums.com/showthread.php?t=192440 but it looks like I'm needing a pure JS solution.

Fou-Lu kindly offered their approach:
Quote:
Originally Posted by Fou-Lu
As for detecting changes, only javascript can do that. Instead of using PHP to check that, use pure javascript and alter you're function to check if its cookies are not existant OR the sizes have changed compared to the cookie, update them.
And as mentioned, they will still only take effect after the next page load.

Could someone help me with this?
I want the end result to be something like http://www.screenresolution.org/
in that if you change your resolution then refresh the page, the screen resolution is updated.

I hope I've explained this clearly? Let me know if you need any more information.

The next challenge is then getting my PHP functions to work in the following manner:
PHP Code:
if ($screen_width > 1024){
   function('1280');
else {
  function('1024');
}