|
JavaScript - Detecting Screen Resolution - Issues?
Hi there.
I'm considering using the script below to detect the screen resolution of the user and then call a specific CSS for that user. The main aim is so that I can design the website at a fixed width for a larger resolution (used by most people), but if the user has a 980px resoltion then they can be catered for as well. Code: <SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
window.location="highres.html";
}
else
{
window.location="lowres.html";
}
//-->
</SCRIPT>
I don't want to use liquid layouts as I think it looks messy, and I don't want to design to a width of 960px as I don't like the blank space at the sides on larger resolutions. Is this an acceptable method, or do you think i'll run into problems? Any advice would be great. Cheers. Pat. Similar TutorialsI am new to Javascripting but am teaching myself and have written this script from my portfolio site in an effort to detect the users screen resolution so that my art is viewed properly. I have ran the code through a debugger and it has comback as "free of errors" but when I run the webpage on my local machine it does nothing, the page displays as if I had written nothing and due to my limited knowledge of Javascript I am at a loss and hoping for someone to say, "look you screwed this part up fix this and it's good to go"... I'm hoping. Thank You all in advance.. Here is the code Code: <script language="Javascript">
function detect(){
if(screen.width<1280||screen.height<720){
alert("This web page is best viewed with a screen resolution of 1280 by 720 or higher. Your current resolution is "+screen.width+" by "+screen.height+". If possible please change your resolution.")
}
else{
alert("Whoa, you have a high resolution. Nice Job!")
}
}
</script>
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>
<a href="about.html?cmd=welcome" onmouseover="buttondown('newsbutton')"onmouseout="buttonup('newsbutton')">
<img src="./Images/nav/news.png" name="newsbutton" border="0" /></a>
<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! I have set javasscript code to detect and store into variable screen resolution. How to store this javascript into variable PHP? PHP Code: <script type="text/javascript"> var ScreenWidth=screen.width; var ScreenHeight=screen.height; var ScreenResolution=ScreenWidth+"x"+ScreenHeight; document.write("<span style=\"color:red;text-transform: capitalize;\">your current screen resolution is " + ScreenResolution + "</span>"); --></script> } </script> <?PHP $screen=str_replace("#","",$resolution); echo "screen width is:".$screen; ?> Hi All! I have a web application with an aspanel, users can add images, the program automatically make the thumbnail. when user click on thumbnail they can see a pop up modal page. Images are in different sizes, so what I need to achieve is to get the screen resolution or browser visible area and re-size the image according to this resolution. (users could have different type of computer screen with different resolution), I need a JavaScript or jquery code. Thanks in advance I have this script: Code: <SCRIPT language="JavaScript">
<!--
// small
if ((screen.width>=1024) && (screen.width<1280))
{
window.location="0_framside/1_small/849x507.html";
}
// medium
else if ((screen.width>=1280) && (screen.width<1400))
{
window.location="0_framside/2_medium/1105x507.html";
}
// large
else if ((screen.width>=1400) && (screen.width<1600))
{
window.location="0_framside/3_large/1225x639.html";
}
// xlarge
else if ((screen.width>=1600) && (screen.width<1920))
{
window.location="0_framside/4_xlarge/1425x789.html";
}
// manual
else
{
window.location="resolution.html";
}
//-->
</SCRIPT>
See the page in action he http://www.kollalfa.com/temp_LesForMeg/index2.html The problem? On a computer with 1280x1024 resolution, IE detects it to be 1024 (thus sending the user to the wrong page). It works perfectly in all other browsers (that I have tried). Any ideas? Thanks in advance! Dear Forum, I began working on a "best" solution for screen res widths of 1024+ for centralised fixed width pages with potentialy large (or any size) left and right margin graphics and have come up with something I'm very happy with: an outside wrapper set to 100% + overflow hidden (removes the horizontal scrollbar on all screen res) a wrapper inside that set to 1000px with margin auto (allows the central page to be in the middle of, or to fill the page of all screen res - brilliant because originally one main objective was for a left margin not to push the page to the right and out of view on a lower res screen) an inside wrapper inside the centralised one above set to for example, width 1800px and left 400px, allows both margins to be viewable for all screen res larger than the central page (1000px+) ok, so the final hurdle in what for me would be a perfect solution is for any screen res lower than 1000px - currently the horizontal scroll bar is removed - therefore the central page has its right potentialy chopped off.... and so with some research, I've put together the following JavaScript: Code:
<SCRIPT language="JavaScript">
if (screen.width<1000)
{document.getElementById('outsidewrapper').style.cssText='overflow: visible;';}
</SCRIPT>
This is my best effort at JavaScript - I am slowly and steadily learning more. I feel its on the right track, to return the overflow on the outer wrapper would bring the horizontal scroll bar back, but on IE (lower than 1000 res screens) this causes an error and does not work on any browser. If anyone could help with syntax or wisdom how to get this code to work, it'd make for me today a good day, if any of this is difficult to understand without seeing, the site is: http://www.delightwebdesign.co.uk/ many thanks Will I have an html page that contains a div that has overflow:auto. Is there a way to detect if the scrollbar is displayed on the div? If the scrollbar is present then I want a message to be displayed inside another div. If there is no scrollbar then I don't want any message to appear. Thanks Hi guys, i would like a script that detects if quicktime is installed like this one here http://developer.apple.com/internet/...lplugins.shtml but i want it to offer the link to quicktime if not installed, and continue to load the player if quicktime is installed. Im thinking something like this.. Code:
<script type="text/javascript"
src="http://developer.apple.com/internet/webcontent/examples/detectallplugins.shtml "></script>
<script>
if (detectQuickTime == true) {
setTimeout('Redirect()',0);
}
else
{
setTimeout('Redirect2()',0);
}
function Redirect()
{
location.href = 'http://www.mysite.com/player.htm';
}
function Redirect2()
{
location.href = 'http://www.mysite.com/error-install-quicktime.htm';
}
</script>
But i cant make it work. Can anyone help? Is it possible to detect keystrokes on the keyboard? I want to detect the arrow keys in particular. I'm going through the online reference links in the sticky now, great resource! I want to detect the double-press of the space key. However, I want a single press of a space key to have a different function. The double-tap of space should only count if the taps of space are no more than, say, a half second apart. For example: The user hits space once, and javascript begins performing one action. 1/3rd of a second later, they hit the space bar again, and since that is within our threshold of 1/2 of a second, the action that began because the user hit the spacebar once should be cancelled, or undone (which I can write later) and the action when the user hits the spacebar twice should begin. Anyone have an idea how to do this? Thanks! Hi, I have do a calculation when an user enters the value in the textbox during onblur event. But during the onblur event I need to capture the tabkey (keyCode) and if it is 9 do the calculate else not do that. But the problem is we cannot detect a keyCode for tab in onblur. But for sure I need to use onblur in this case and cannot use onkeydown as this will have impact on the UI screen for this particular scenario. How to go about this? in the textbox I am calling onblur = "test()" Please provide a helping hand. Thanks. My credit card processing service will only accept English characters. I need to detect entries in the form that are using non English characters. Is there a way in Javascript to create a function to force a string to UTF-8? My idea is to do something like function forceUTF8(X){ Y = ???? X; return Y; } if ( stringA != forceUTF8(stringA) alert ("You must use English Characters"); I am trying to detect the parent URL on a page for a Facebook application so that if the user is on my site rather than accessing the application via Facebook they will be redirected to the FB App page. In PHP I can use: if(strstr($parenturl,"mysite.com")){header("location:fbapp.com");exit;} Is it possible to do this in JS also? Because with FB Apps the URL is not always the same so instead of detecting a full URL I just want to search for my domain name within document.location.href to see if it exists and IF yes > Redirect back to FB. Hi, Wondering if anyone can help me out with some javascript. How do I check upon clicking a random object on the page that the object onmousedown is an image or not? Any help is much appreciated. -cantonboi Is it possible to call a function when user clicks on an (x,y) point (or a small area). I can't place a new object and just set the "onclick" value, so is it possible to do it without that? Thanks for the help. Hello there, This seems to be a bit of a sore topic on the forums but at least I think I have good reason for wanting to do it - I've written a script that displays tooltips when your mouse hovers over a link - all this is fine, but when I click on the link and move to another page, then click the back button on the browser to go back, the tooltip for the link I clicked is still visible! It'd be great if there was a way of detecting the button had been pressed so that I can hide it... p.s. I tried onclick = "tooltips.hideToolTip(4); return true;" for the links but no joy... Many thanks Edd I have an input box and I want it to function so that when the user presses the enter/return key, it runs a js function. I have the following code: Code: input.onkeydown = function () {
if (event.keyCode === 13) {
// do something
}
}
This works in Safari, Opera, Chrome, and even IE, but not in firefox. Any idea how I could fix this? Thanks, Julian function doUnload() { if (window.event.clientX < 0 && window.event.clientY < 0) { alert("Window is closing..."); } } i get window.event undefined by using var evt =window.event? event : e i get e undefuned var evt =window.event? event : e if (evt.clientX < 0 && evt.clientY < 0) { alert(evt.clientX +"Window is closing..."); } |
|||||||