Detecting screen resolution...

[Elliot B.]

I have the following...

index.htm

index800.htm

index1024.htm

Obviously, when someone visits the website it shows index.htm which contains two buttons, 1024x768 or higher, and 800x600. How can I make it so the browser automatically detects the users resolution, and forwards the user to the correct page after x seconds?

[Axel]

You want the HTML in your index page to only consist of this (alter as necessary!): :p

<script language="JavaScript1.2">

<!--

if (screen.width==800||screen.height==600) //if 800x600

window.location.replace("pages/main_800.htm")

else if (screen.width==1024||screen.height==768) //if 1024x768

window.location.replace("pages/main_1024.htm")

else //if all else

window.location.replace("pages/main_1280.htm")

//-->

</script>

[ServaCom]

Can't you just use percentages or make the site fit a minimum width?

Do you have a preview of the design so possible solutions can be offered?

Edited September 23, 2003 by MentalPiracy

[+Nik Louch Subscriber²]

Wow, you REALLY wanna do that? Building pages per resolution?

[Elliot B.]

Another little thing... what is the code that says "You are using a resolution of xxxxx" ?

[+Nik Louch Subscriber²]

It's in the code as posted above by Ax3L (screen.width / screen.height)

alert(screen.width+"x"+screen.height

[Elliot B.]

That code doesn't do everything I asked :p Such as waiting 3 seconds after the detection before it forwards...

[+Nik Louch Subscriber²]

No but if you actually read it and took it in, it's easy to figure out. You asked: what is the code that says "You are using a resolution of xxxxx" ?

The answer was there for the taking.

[Elliot B.]

  njlouch said:

No but if you actually read it and took it in, it's easy to figure out.  You asked: what is the code that says "You are using a resolution of xxxxx" ?

The answer was there for the taking.

I don't see alert(screen.width+"x"+screen.height in the following...

<script language="JavaScript1.2">
<!--
if (screen.width==800||screen.height==600) //if 800x600
window.location.replace("pages/main_800.htm")

else if (screen.width==1024||screen.height==768) //if 1024x768
window.location.replace("pages/main_1024.htm")

else //if all else
window.location.replace("pages/main_1280.htm") 

//-->
</script>

[+Nik Louch Subscriber²]

Then if you can't suss that out, then you REALLY need to get your Javascript sorted. Look, screen.width is there, screen.height is there. Wonder what they return! Sheesh, it's really that simple!

[Elliot B.]

Don't take the pi5s out of me mate :cry: Here's what I mean...

[Elliot B.]

Oh, and the code at the top of the thread doesn't wait 3 seconds before forwarding :(

[memNOC]

  King Mustard said:

Don't take the **** out of my mate. Here's what I mean...

hahahahahahahaa oooohhh ROTFLMMFAOO!!!! :laugh:

that reminds me of the Seinfeld episode where Kramer does movie reviews.. LOL

Kramer: Press the number of the movie you wish to see... 1 for blah 2 for blah...

George: *presses*

Kramer: Did you press 1? ......... Did you press 2?

George: wtf..

Kramer: Why dont you TELL me the name of the movie you want to see

blaaaaahahahaahh still laughing........ thats genius

:ermm:... why, you say? cuz hes making a script that choses the resolution for the user, but IF IT FAILS to do so, then the user can do it manually for themselves??? wtf.. that right there defeats the purpose of the whole script.. just let people chose screen res themselves.. it aint so hard to do :whistle:

[ServaCom]

  Quote

Oh, and the code at the top of the thread doesn't wait 3 seconds before forwarding :(

Wouldn't you rather all this to be invisible to the user?

People don't like waiting...

[+Nik Louch Subscriber²]

Who is taking the ****? I'm not, I'm merely saying the code is all there. There are now 2 posts in this thread that show all you need to know. But hey, in the point of stopping an arguement here goes:

<script>
<!--
document.writeln("You are using a resolution of "+screen.width+"x"+screen.height;
</script>

[Elliot B.]

  njlouch said:

Who is taking the ****? I'm not, I'm merely saying the code is all there. There are now 2 posts in this thread that show all you need to know. But hey, in the point of stopping an arguement here goes:

<script>
<!--
document.writeln("You are using a resolution of "+screen.width+"x"+screen.height;
</script>

Thanks mate, was that hard?

Finally, anyone know what to add to the code to make it forward after x seconds

[Spyder Veteran]

  King Mustard said:

Thanks mate, was that hard?

what a prick. he just helped you and you make some smartassed comment.

its obviously too hard for you to figure out. you're lucky anyone helps you at all

[Elliot B.]

  Spyder said:

  King Mustard said:

Thanks mate, was that hard?

what a prick. he just helped you and you make some smartassed comment.

its obviously too hard for you to figure out. you're lucky anyone helps you at all

Yes, it was too hard for me to figure out. I have NO idea how to code anything. I admit that. And I said that above because he was being sarcastic earlier saying how it was easy to figure out. However, it wasn't easy for me because I don't know anything about coding. Sorry, ok? :(

[Elliot B.]

The final product, cheers guys!

http://www.elliotsworld.co.uk/

[ServaCom]

I don't understand what you have done.

- You use percentages for the tables anyway.

- I get the 1024 page but I have 1280 resolution, the page seems to maximise or is the wrong size.

I think this will forward a page in 3 seconds, no coding required:

<meta http-equiv="Refresh" content="3"; URL="destination.html">

[Elliot B.]

This index.htm page does this...

? Maximises the browser window then...

? Silently forwards to index800.htm if the user is using 800x600 resolution, or index1024.htm if the user is using 1024x768 resolution

I think it's rather successful. Could someone tell me what happens when they use 640x480 or something higher than 1024x768?

[Axel]

  Ax3L said:

You want the HTML in your index page to only consist of this (alter as necessary!):  :p

<script language="JavaScript1.2">

<!--

if (screen.width==800||screen.height==600) //if 800x600

window.location.replace("pages/main_800.htm")

else if (screen.width==1024||screen.height==768) //if 1024x768

window.location.replace("pages/main_1024.htm")

else //if all else

window.location.replace("pages/main_1280.htm")

//-->

</script>

In the code the "//if all else" is not part the actual code, it's just to guide you. This is the part at the bottom which has "else" before hand. This means that if it isn't any of the other resolutions listed, it'll just forward to that page. So if you are 640x480 - that'll forward you to the res listed under "Else". You can expand the list of resolutions by just adding more lines of the "Else if" code. There ya go, simple! :whistle:

[ServaCom]

  Quote

I think it's rather successful. Could someone tell me what happens when they use 640x480 or something higher than 1024x768?

I use 1280 res and get the 1024.htm page but it fills my screen as I have already stated!

So either it auto-maximises (defeating the point of resolution detection!) or it is simply the wrong size for 1024 resolution users.

[Elliot B.]

  MentalPiracy said:

I use 1280 res and get the 1024.htm page but it fills my screen as I have already stated!

So either it auto-maximises (defeating the point of resolution detection!) or it is simply the wrong size for 1024 resolution users.

It doesn't depeat the purpose. Try viewing index1024.htm without having your browser window full-screen and you'll see half the menu is missing, so there's code in index.htm that maximises the browser window.

[ServaCom]

I have reduced the size of your site down till it's quite small on my screen and it is still very readable.

So I don't see the need for maximising it for people with 1024 or above.

[Elliot B.]

Set your screen to 1024x768. Make the browser take up 75% of your screen. View the website. You'll notice some of the buttons at the bottom are missing

EDIT: I've attached a screenshot. As you can see, the browser at 1024x768 needs to be maximised to view the entire menu