|
JavaScript - Ie Detects Wrong Screen Resolution. Why?!?
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! Similar TutorialsAll- 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! 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. 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 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 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.
Hey guys I've been trying to get this script working to change a couple attributes in the CSS but it hasn't been working. It's supposed to change the left and right margins of the #content tag if the resolution is greater that 1024x768. The text doesn't seem to want to stay in the center. Heres the code: Code: <!--
if (screen.width > 1024)
{
ChangeCSS('#content','marginLeft','28%');
ChangeCSS('#content','marginRight','29%');
}
//-->
Heres the CSS: Code: #content {
margin-bottom:0;
margin-top:0;
margin-left:24%;
margin-right:27%;
position: absolute;
width: 38em;
}
The CSS code is all inline because this is a tumblr and I don't have a place to host style sheets. Can anyone tell me whats wrong? Thanks! I am struggling to find a solution that enables me to have a div that is a certain percentage height of the window and then when the user is using a different resolution, it remains at that percentage of the screen height - not going off of the bottom as I have a fixed percentage no scroll full background image. I have sorted it for width but can't get it to work for height. any ideas? lol Bee x Hi, I know this is a very bad idea, but I need to do it just to prove a point. I was wondering if it is possible to remove content from a website based on the screen resolution, rather than have to redirect to a new URL. For example: Code: <if height greater than 800px>
Lots of code
<else>
<br/>
</if>
Thank you Hey I have ben writing & understanding this code but I can't make this work, have done my homework..so I have atleast tried http://jsfiddle.net/defencedog/hLZCt/ I want to have a screen (50% transparent white) pop up over an image on rollover with a button that, when pushed, will swap the image with a different one. Anyone know the easiest way to do this. The image is in a scrolling bunch of images similar to this: http://kellyperso.com
Hi I have the code below which geocodes a postcode and returns a lat a long value. Its standard code from Google maps. I just want to print these values to a screen. I tried document.write(value) but this produces nothing. Any help would be greatly appreciated. Code: <script type="text/javascript">
var localSearch = new GlocalSearch();
function usePointFromPostcode(postcode)
{
localSearch.setSearchCompleteCallback(null,
function()
{
if (localSearch.results[0])
{
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
}
document.write(resultLat+resultLng);
//alert("Latitude: " + resultLat + "\nLongitude: " + resultLng + " q");
});
localSearch.execute(postcode + ", UK");
}
</script>
TIA Stew I use a program that produce a graphic (imagine a sinusoid, more or less). There is no opportunity to obtain from the program an output of the coordinates of the points of this curve. I desperately tried a way to achieve this, for example using a program that transform a normal raster image in a vector, and after read the vector, but all this is not precise nor accurate. I wonder if there is a way to obtain this result. Bye Hi, I was working on my web page and noticed that depending on the width of the screen, the Iframe I created would not display correctly. Because of that I needed to come up with a piece of code that would detect the screens horizontal resolution and pick the right Iframe to be loaded. Below are the scenarios that specify which one should be loaded. I am very bad with javascript so could someone help me come up with a piece of code that would load the right frame? Thanks. The web address where the code will go is www.jumbledfun.com/nasa.html. If the horizontal resolution of the screen is less then 1600 I would like this Iframe to be loaded: (It Would Go Under The If Part) Code: <iframe src="http://www.jumbledfun.com/nasaframes/nasalivelr.html" width= "55%" height= "580%" scrolling="no" frameborder="0"/> </iframe> If the horizontal resolution of the screen is 1600 or more I would like this Iframe to be loaded: (It Would Go Under The Else Part) Code: <iframe src="http://www.jumbledfun.com/nasaframes/nasalive.html" width= "100%" height= "300%" scrolling="no" frameborder="0"/> </iframe> This is the format that I would want it in: Code:
<script type="text/javascript">
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
</script>
Hi Guys, I would like to be able to change my webpage background image according to the screen resolution the user uses so: if screen resolution is greater than or equals to 1200*600 then background = mybackground.jpg no-repeat else background = #000000 THANKS A MILLION! Hey guys, I was trying to make a Javascript game that moves an image across the screen randomly. Instead of executing properly, it just shows the image's starting point, and stops. No movement. Is there anyway I could fix this? Thanks, Fizz. Code: <html>
<head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
</style>
</head>
<script language="javascript">
function Start() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function NewDest() {
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650); //Ending Location - left
var dest_y = 500; //Ending Location - top
var interval = 10; //Move 10px every initialization
moveImage();
}
function moveImage() {
//Keep on moving the image till the target is achieved
if(x < dest_x) x = x + interval;
if(y < dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("ufo").style.top = y+'px';
document.getElementById("ufo").style.left = x+'px';
if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',30);
if (x == dest_x) && (y == dest_y) {
NewDest();
}
}
}
</script>
<body onload="Start()">
<div id="ufo" class="movable">
<img src="Mouse.jpg" alt="mouse" WIDTH = 30/>
</div>
</body>
</html>
Hi there I know this picture_viewr js is a fullscreen slide Would it be possible to set a screen size (700x500 e.g.) and then set a background color or the part that would be outside this window??? Thx a lot allberto http://www.alfaaudiovisual.com/pictu...er/ByB/ByB.htm Hi friends, I have a dropdown menu,when i select one item from the dropdown menu,i want a checkbox to be created on the screen.How do i achieve this? Thank You Madhusudan Hi guys, I'm completely new here and seeking some help on this js: http://www.javascriptkit.com/script/...ow/index.shtml i'm building my picture website, an example is this one: http://www.lucagodina.com/mello/test.htm do you know how can i have all the thumbnails on the same row, and scrolling? because if i've let's say 100 pictures, the thumbnails will cover the pics itself! Would also be great to have play-next-previous button... i know i'm asking a lot! hope someone can help me out! |
|||||||