Adopting website to window resolution

[latino.ad7]

The website I have displays poorly depending what screen resolution people have. It vary a lot between 800-600 and 1680-1050 etc. On the high res screen it hardly takes half the screen.

 

So I'd like to use javascript or javascript/css to adjust the website according to screen resolution. Someone advised the following code, but it doesn't seem to work for me.

 

Do you have some code to do this? Any help would be great.

 

<?php

session_start();

if (!isset($_SESSION['browser_width'])) {

?>

<script type="text/javascript">

width = screen.width;

height = screen.height;

if (width > 0 && height >0) {

    window.location.href = "http://localhost/toolbar/index.php?width=" + width + "&height=" + height;

} else

    exit();

</script>

<?php

}

if ($_GET['width']){

$_SESSION['browser_width']=$_GET['width'];

$width=$_GET['width'];

}

else {

$width=$_SESSION['browser_width'];

}

include("$width.css");

?>

800.css

#main_div{

width: 798px;// set under for border expansion not triggering bottom scroll bar

 

1024.css

#main_div{

//width: 1024px;//skip width and expand full size

width:100%;

[ronvanb]

I will try to help. If you like javascript librarys like jQuery. This would be a solution. I have tested it in IE and firefox.

I dont know how it performs in other browsers.

If you don't want to work with librarys because they take up space. Just let me or us know.

I hope this is a solution.

 

function screenWidth(){
var height=0; 
var width=0;
if (self.screen) {     // for NN4 and IE4
width = screen.width;
height = screen.height
}

if(width < 801 && width > 783){            // I took the scrollbar in consideration
$('#main_div').css("width", "798px");    // If you have a scrollbar on the right. You have to adjust the main_div width
}

if(width > 1024){
$('#main_div').css("width", "100%");
}
}

$(window).load(function(){
screenWidth();
});

 

You can keep adding screen resolutions in the code.

[latino.ad7]

I'm afraid that I don't follow. I just learn Javascript. I didn't use the libraries, but I could try to do that.

 

Where do I include your code? Should I just tag it using <script type="text/javascript"> code </script> within php code?

[ronvanb]

I'm gonna look for a solution without a library. Just a moment.

When it is finished you can do this.

Just open a new document. Think of a name for the script and give it the extension .js

You can cut and paste the code in the js file.

 

In the head of your html or php page. You can say:

 

<script language="javascript" src="nameOfFile.js" type="text/javascript"></script>

 

Upload the file to your server and test it. If you get errors.  Firefox is a great browser to find the errors.

 

The code you showed us. Is it complete? Because the function exit() is a php function. It will not work between javascript tags.

 

In the css use /* comment */ instead of // comment. I think these are php comments and not css.

 

Just a moment.

 

 

[ronvanb]

I have tried. But if i don't use a lybrary.

I get a security risk warning in IE. Maybe i am doing something wrong

I know we need to learn the basics. But with a library like jQuery or yui from YAHOO you can reduce your code and it is more crossBrowser compatible.

 

Here is a link to jQuery.

http://jquery.com/

 

If you click on download jQuery. You can copy/paste the code in a new file.js. For example. You can name it jquery.js

It is only one script. So it is not hard to do. Just upload jquery.js and your new screenWidth.js script to your server

 

In the head of your php/html script:

<script language="javascript" src="jquery.js" type="text/javascript"></script>

<script language="javascript" src="screenWidth.js" type="text/javascript"></script>

 

The script i already posted works for me.

I wish there where just one standard for javascript.

 

Succes. If you have any questions? No problem.

[latino.ad7]

I tried with jquery. At least I didn't get any error msg. What I did, I included jquery.js and screenWidth.js on the server. screenWidth.js is the code, which you posted.

 

In the head of my php/html script I put:

<script language="javascript" src="jquery.js" type="text/javascript"></script>

<script language="javascript" src="screenWidth.js" type="text/javascript"></script>

 

Do I also need some .css files?

 

There doesn't seem to be any effect. In a high res, my website takes half the screen, just as before. I tried in res 1024, 1152 and 1680.

 

So what do I do wrong?

[ronvanb]

It's hard for me to say what is going on.

after var width=0;

On a new line paste in this one:

 

alert("see if jQuery works");

 

Save it and upload to your server.

Try the code. If you get an alert. It means jQuery works.

If you don't get an alert. It means there is something wrong with the path to jquery.js

or screenWidth.js.

 

If the .js flies are in a seperate folder. You have to change the path in your html/php page.

Something like:  src="myJsFolder/jquery.js". I don't know because i can't see the the structure of the folders on your server.

 

Can you post the css of the #main_div.

I have not used css at all on the main_div.

 

With jQuery it is possible ( not a productive solution ) to write all your css in javascript.

 

If you get the the alert you can delete the alert("see if jQuery works");

 

I have tested it on an 800/600 resolution. It gets a width of 798px.

Changed my resolution to 1280/1024 and it gets a width of 100%

I used a background-color to test it.