resizing to browser window

[mreif]

I tried the script below and it doesn't work. I am new to this.
Also, Is there any way to get "index.html" to load if the end user's screen is 1024x768 and above and load "index2.html" if the resolution in below 1024x768?

Thanks in advance!


<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
window.location="index.html";
}
else
{
window.location="index2.html";
}
//-->
</SCRIPT>

[Mr J]

index.html is the default file in your root directory that is called when someone comes to your site.

In order for you to redirect, the script is placed in your index.html file which will then redirect to the appropriate page, therefore you cannot have 2 index.html files in the same directory.

You need to go something like this

<SCRIPT type="text/javascript">
<!--
if ((screen.width>=1024) && (screen.height>=768)){
window.location="page1.html";
}
else{
window.location="page2.html";
}
//-->
</SCRIPT>

[mreif]

isn't that the same thing I have?

I have the javascript in my index.html file and it is directing to index2.html if the resolution is under 1028x768.

Do I have to name my home pages different than index and index2 and have a new index be a blank page that re-directs depending on resolution?

[konithomimo]

no. index.html is the first page that they go to. so you can't redirect to it.

you could use index2.html and index3.html though

[Bill Posters]

No need to have two redirection pages. Simply have the index page as the one for those on the 'smaller' resolutions and redirect those with higher resolutions. By having the smaller page as the default, users without js are more likely to get a layout that works within their particular setup.
(It's probably safe to say that the majority of non-js users will also tend to be amongst those using lower screen resolutions [lower-specced PCs and non-GUI browsers such as handhelds].)
It also saves wasting one of your most important content-carrying pages on redirection which is particularly important from the perspective of search engines (which should be thought of as non-js visitors).


Aside from all that, you'll probably be wanting to check the dimensions of the browser window, rather than the screen itself, as not all users will be running their browser windows maximised.

<script type="text/javascript">

var bWidth, bHeight;

if (window.innerWidth) {
bWidth = window.innerWidth;
bHeight = window.innerHeight;
}
else if (document.body) {
bWidth = document.body.clientWidth;
bHeight = document.body.clientHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
bWidth = document.documentElement.clientWidth;
bHeight = document.documentElement.clientHeight;
}

if ((bWidth >= 1024) && (bHeight >= 768)) {
window.location = 'index2.html';
}

</script>

It's been a while since I messed around with this kind of script, so the properties may not be entirely correct.