Get Resolution

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
calufa
Forum Newbie
Posts: 4
Joined: Mon Jul 24, 2006 1:40 am

Get Resolution

Post by calufa »

Is there any way to get the screen resolution and then using that number set a table position?

Lets say i need it to get a resolution number and then divide it by 2 and add a 200px to that position of a table, how can i do that?

Thank in advanced
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

Yes, but it would be done client-side not server-side. This should go in the client-side forum.

This is some code that I snagged from a site I was using that did what you are asking for. Not sure it'll work for you, but it may be a good starting point.

Code: Select all

<script language="javascript">
if(screen.width == 1024)
{
	document.write("<TD COLSPAN=3><IMG src='images/banner1024_Logon.jpg' border=0></TD>");
}
else if (screen.width == 800)
{
	document.write("<TD COLSPAN=3><IMG src='images/banner800_Logon.jpg' border=0></TD>");
}
else if (screen.width == 1152)
{
	document.write("<TD COLSPAN=3><IMG src='images/banner1152_Logon.jpg' border=0></TD>");
}
else
{
	document.write("<TD COLSPAN=3><IMG src='images/banner1280_Logon.jpg' border=0></TD>");
}
</script>
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Does PHPSniff maybe do this? It will require some client-side scripting yes.

We did some stats gathering recently and I used this effectively (http is an XMLHttpRequest object):

Code: Select all

function sendBrowserInfo()
{
        var sw = screen.width;
        var sh = screen.height;
        var uN = navigator.appName;
        var uV = navigator.appVersion;
        var uA = navigator.userAgent;
        try {
                http.open("GET", 'log_browser_stats.php?w='+sw+'&h='+sh+'&un='+uN+'&uv='+uV+'&ua='+uA, true);
                http.send(false);
        } catch (e) {
                //
        }
}

sendBrowserInfo();
:)
choppsta
Forum Contributor
Posts: 114
Joined: Thu Jul 03, 2003 11:11 am

Post by choppsta »

As with most things on the client side, there are cross browser issues. Here's a page with more info: http://www.howtocreate.co.uk/tutorials/ ... wserwindow

You mention altering the "position" of a table so I presume you're talking about absolute positioning. In this case, once you've calculated the position value you could do something like:

Code: Select all

document.getElementById('myTable').style.left = myPositionValue;
If you're doing anything with Javascript, you MUST bookmark this website: http://www.quirksmode.org/. It will save you much pain.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

omg, is it that easy to make remote script calls?
choppsta
Forum Contributor
Posts: 114
Joined: Thu Jul 03, 2003 11:11 am

Post by choppsta »

Daedalus- wrote:omg, is it that easy to make remote script calls?
It's even easier if you use images.

Code: Select all

var img = document.createElement('img');
img.src = 'http://www.website.com/myScript.php?x='+myData;
Check out the Google Analytics code: http://www.google-analytics.com/urchin.js
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Javascript != PHP :arrow: Client Side.
calufa
Forum Newbie
Posts: 4
Joined: Mon Jul 24, 2006 1:40 am

Post by calufa »

Thanks to all up there,

but this doesnt work

Code: Select all

<script language="javascript">
if(screen.width == 1024)
{
        document.write("<div id="Layer1" style="position:absolute; width:200px; height:296px; z-index:1; left: 190; top: 25%;"><img src="principal0001.png" width="621" height="295"></div>");
}
else if (screen.width == 800)
{
        document.write("<TD COLSPAN=3><IMG src='images/banner800_Logon.jpg' border=0></TD>");
}
else if (screen.width == 1152)
{
        document.write("<TD COLSPAN=3><IMG src='images/banner1152_Logon.jpg' border=0></TD>");
}
else
{
        document.write("<TD COLSPAN=3><IMG src='images/banner1280_Logon.jpg' border=0></TD>");
}
</script>
Can i so something like this?

Code: Select all

<script language="javascript">
var thewidth = screen.width/2 - 200

document.write("<div id="Layer1" style="position:absolute; width: thewidth; height:296px; z-index:1; left: 190;)
</script>
Hehe i dont know anything about php or java i am just a flash programmer.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Post by daedalus__ »

that's javascript, not java. they are two different things

you should be able to do something like that, but i am wondering, if you are assigning that div an id, why are you using inline css?
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

calufa, why not start small? Try a single variant of the screen.width property and see if that is working. It may be something else causing problems.

Code: Select all

<script language="javascript">
if (screen.width == 1024)
{
    alert('Holy cow, we have a 1024 here!');
} 
</script>
calufa
Forum Newbie
Posts: 4
Joined: Mon Jul 24, 2006 1:40 am

Post by calufa »

Everah i will like to use that but i have a layer where i want to add text and have it center in the screen, i was to make something like this:

http://www.azcarivolante.com/gds

I want that my text is always in the middle and haveing a backgound image always fullscreen and if i scale the browser that he identifies the stage size and recalculate it automatelly.
choppsta
Forum Contributor
Posts: 114
Joined: Thu Jul 03, 2003 11:11 am

Post by choppsta »

calufa wrote: Can i so something like this?

Code: Select all

<script language="javascript">
var thewidth = screen.width/2 - 200

document.write("<div id="Layer1" style="position:absolute; width: thewidth; height:296px; z-index:1; left: 190;)
</script>
Hehe i dont know anything about php or java i am just a flash programmer.
If you're a Flash Programmer you should have no trouble picking up Javascript as both Actionscript and Javascript are both based on ECMAScript.

Like I said in my previous post, you have problems with your method:

1. You're using the screen width and not the browser window width which might be completely different. You're also obtaining the width through a browser specific method, so you'll get limited compatibility there.
2. You're using document.write which should really be avoided. Use the DOM methods to create or manipulate elements. Like I suggested, you would then only need to change one style value on the element in question. E.g.

Code: Select all

document.getElementById('Layer1').style.width = thewidth;
3. You method doesn't work if the user then changes the size of their browser window.
Post Reply