Changing the screen size using JS 1

GTony · Jan 14, 2004

If anyone can help I would certainly appreciate it.

I've heard that with Javascript, you can check a user's screen resolution and then resize your web pages to fit the users screen perfectly. I've searched everywhere on the net for some code to help me do this but I can't find anything. I have found code that will check a screen resolution and then redirect the user to a certain page, this is good although I don't want to have to replicate web pages several times over for the different resolution sizes.

If someone knows of code that can do the job for me then please let me know. Thanks for your help.

Lrnmore · Jan 14, 2004

This measures the screen and sizes accordingly:

Code:

<html><head><title>Test</title>
<script language=&quot;JavaScript&quot;>
function tst_window(){
var hgt = screen.availHeight - 35;
var wd = screen.availWidth;
var left = 0;
var attrib = 'width='+wd+',height='+hgt+',top=0,left='+left;
var tstwin = window.open(&quot;[URL unfurl="true"]http://www.google.com&quot;,&quot;&quot;,attrib);[/URL]
tstwin.focus();
}
</script></head><body>
<a href=&quot;[URL unfurl="true"]http://www.google.com&quot;[/URL] onClick=&quot;tst_window();return false;&quot;>
Test Window</a>
</body></html>

Great Javascript Resource:

http://devedge.netscape.com/library/manuals/2000/javascript/1.5/guide/

GTony · Jan 15, 2004

Thanks for your help Lrnmore, I'l try that out today and let you know how I get on.

geniedon · Jan 15, 2004

yes i wanted to know the answer to this question (resizing my page to any screen resolution) aswell but Lrnmore i don't understand the links to google.com, could ya explain it a bit more as i'm a bit baffled also will this work with a page done in css using no tables.

Lrnmore · Jan 15, 2004

geniedon,

The example demonstrates how javascript can obtain the users
display settings e.g. "800"x"600".

One example I can think of is to obtain this info,
then call the appropriate style sheet with a document.write,
giving you a different look for a larger monitor.

Maybe GTony will share how he's using the info with his
pages. Here's a link that may help you also.

http://www.webreference.com/js/tutorial1/manipulate.html

Lrnmore · Jan 15, 2004

Here's something I tested, gets the info, writes a div to
be different sizes according to width and height.

Code:

<html><head><title>Test</title>
<script language=&quot;JavaScript&quot;>
var hgt = screen.availHeight/2;
var wd = screen.availWidth/2;
document.write('<style type=&quot;text/css&quot;>.test{ width:'+wd+'px; background:blue;'+
    'height:'+hgt+'px;}</style>');
</script></head><body>
<div class=&quot;test&quot;>
Test Text inside</div>Outside Division
</body></html>

geniedon · Jan 16, 2004

geniedon,
thanks for the info Lrnmore, i think i might have worded what i was saying wrong this is the code for my page as you can see all the images are in <div> tags related to cafe.css
how could i encorperate this to be resize to any resolution :

<HTML>
<HEAD>
<TITLE>Café Recordings: The Website </TITLE>

<link rel="stylesheet" type="text/css" name="style1" href="cafe.css">

</HEAD>
<BODY>
<DIV CLASS="largelogo">
<IMG SRC="images/largelogo.gif" WIDTH=218 HEIGHT=247 ALT=""></DIV>
<DIV CLASS="curve">
<IMG SRC="images/curve.gif" WIDTH=402 HEIGHT=137 ALT=""></DIV>
<DIV CLASS="smalllogotop">
<IMG SRC="images/smalllogotop.gif" WIDTH=235 HEIGHT=88 ALT=""></DIV>
<DIV CLASS="jaesaudio">
<IMG SRC="images/jaesaudio.gif" WIDTH=73 HEIGHT=33 ALT="jaesaudio"></DIV>
<DIV CLASS="afb">
<IMG SRC="images/afb.gif" WIDTH=49 HEIGHT=33 ALT="frostbittenuk.co.uk"></DIV>
<DIV CLASS="broadcite">
<IMG SRC="images/broadcite.gif" WIDTH=38 HEIGHT=33 ALT="broadcite.com"></DIV>
<DIV CLASS="smalllogobottom">
<IMG SRC="images/smalllogobottom.gif" WIDTH=75 HEIGHT=33 ALT=""></DIV>

</BODY>
</HTML>

any help would be useful

Lrnmore · Jan 16, 2004

geniedon,

Please "post" if you read this, then I don't have to wonder
if you are waiting for a response on the new thread.

I thought we'd leave the new one open, someone else may give
a better example.

The page below uses the style's "zoom" to adjust the page
size, you'll have to check complaince, I tested it in IE6.
The link is to the Netscape site that does size according
to the client. Maybe some info for you there.

Code:

<script language=&quot;JavaScript&quot;>
var hgt = screen.AvailHeight;
var wd = screen.AvailWidth;
function sz(){
var zoom = 0;
if(wd > 1000) {
 zoom = 1.3 ; }
if(wd < 1000) {
 zoom = 1; }
document.write('<div id=&quot;content&quot; style=&quot;zoom:'+zoom+';&quot;>');
}
function rset(){
document.all.content.style.zoom = 1;
}
</script></head><body><center>
<script type=&quot;text/javascript&quot;>sz();</script>
<div id=&quot;d1&quot; align=&quot;center&quot;>This is a Test</div><p>
<img src=&quot;bluerightarrow1b.gif&quot; width=&quot;45&quot; height=&quot;46&quot; alt=&quot;&quot; border=&quot;0&quot; align=&quot;&quot;></p>
<input type=&quot;button&quot; value=&quot; Resest 1:1  &quot; onClick=&quot;rset()&quot;>
</div></body></html>

http://devedge.netscape.com/library/manuals/2000/javascript/1.5/guide/index.html

Hope this will give you a start.

geniedon · Jan 19, 2004

hi Lrnmore,
sorry about the miscommunication i think ya rite about leaving that thread open, thanks alot for the new code it seems to work like a treat actually it's brilliant i might need to do some adjustments so it can fit with wot i'm doing , you seem to be the man.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Changing the screen size using JS 1

GTony

IS-IT--Management

Lrnmore

Technical User

GTony

IS-IT--Management

geniedon

Programmer

Lrnmore

Technical User

Lrnmore

Technical User

geniedon

Programmer

Lrnmore

Technical User

geniedon

Programmer

Similar threads

Part and Inventory Search

Sponsor