screen redirect script based on aspect ratio

[kevin186]

hello please help me. i cant find this anywhere and dont know if its possible. i need to redirect users to different pages on my websites based on the aspect ratio of their resolution. i am using flash for my sites which will max out at 100% of width and height. so, i want to redirect to the version of the page that will best suit them, with 2 different versions based on 4:3 and 16:9, so that when they click the full screen button on my flash, it will fill their monitor fully. i could do this with the regular Screen Size Redirect Scripthttp://www.dynamicdrive.com/dynamicindex9/info3.htm , but i would have to input so many different screen resolutions just to make sure i am covered. i would like to just have a function that takes screen.width divided by screen.height and compares it to my ratios of being > < = 4:3 or 16:9

thanks

[BLiZZaRD]

Why don't you just do it all in Flash?

stage.height and width will return a value, based on that value you can load movie1 or movie 2.

Seems a little easier than all that you said.

OR, you could just make 2 links, one for each aspect ratio. Let the user click on the one they want.

[kevin186]

Why don't you just do it all in Flash?

stage.height and width will return a value, based on that value you can load movie1 or movie 2.

Seems a little easier than all that you said.

OR, you could just make 2 links, one for each aspect ratio. Let the user click on the one they want.

thanks for your reply. unfortunately i dont have the skills for actionscript or javascript. i am just new in the game and i am as self taught as time allows. the link idea is simple, but not what i came for. i dont mean to be unappreciative, but i really want to do it with the javascript. is there no way to modify the Screen Size Redirect Script to perform the math of dividing width into height and then to compare it to a number? probably simple for you, but i just dont know anything about javascript. i tried to modify the code myself, but cant figure what variables and commands are needed by javascript. can you solve my mental anguish so that i dont have to learn javascripting right now just to create a simple script? as far as i know, this screen redirect does not exist, dont you want to be the first one to do it?

[BLiZZaRD]

So right now you have 2 swf files yes? one for 4:3 and one for 16:9, correct?

And you want something that will find the aspect ratio of the users computer, and based on that match them with the correct swf for them to view?

If that is correct, then tell me the following:

1) Names of the 2 Flash files you are using.
2) Version of Flash you are using (7, 8, 9or MX, MX 2004, CS3)
3) When you need it by

:)

[kevin186]

So right now you have 2 swf files yes? one for 4:3 and one for 16:9, correct?

And you want something that will find the aspect ratio of the users computer, and based on that match them with the correct swf for them to view?

If that is correct, then tell me the following:

1) Names of the 2 Flash files you are using.
2) Version of Flash you are using (7, 8, 9or MX, MX 2004, CS3)
3) When you need it by

:)

you are correct, although i didnt created the second file yet until i was able to first redirect it. but i can easily create the second one.

and yes i do want to detect the aspect ratio so that they are matched with the correct swf.

1)futurama4x3.swf, futurama16x9.swf (generic examples of names)
2) CS3
3) no real due date, this is just for fun

i tried to edit that screen redirect script, but i really am not sure about the language. my code below didnt work, but i really didnt expect it to:

<script language="JavaScript1.2">

if (screen.height/screen.width<.75) //if <4:3
window.location.replace("http://www.example.com/page1.htm")

else if (screen.height/screen.width>.75) //if >4:3
window.location.replace("http://www.example.com/page2.htm")

else if (screen.height/screen.width=.75) //if =4:3
window.location.replace("http://www.example.com/page3.htm")

</script>

[BLiZZaRD]

We will just do it all internally in Flash (Easy, don't freak out ;) )

I will match your devices, but it will have to wait, as I don't run CS3 at work. When I get home I will work on a couple of examples for you.

Hopefully with luck, I can just provide you with a little piece of AS to place on the "full screen" button you have:



so that when they click the full screen button on my flash,

[kevin186]

the full screen button is part of the SlideShowPro component, i am not sure if that can be edited. is there any way to have that javascript do a redirect based on the math of width divided by height, or is that out of the scope of what javascript can do? and why the hell are you working on a sunday? watch some cartoons

[BLiZZaRD]

well, you could try something like the following:



var e=(screen.width/screen.height);
if (e=1.66){
window.location.replace("http://www.example.com/page2.htm");
else{
window.location.replace("http://www.example.com/");
}


and just add an if for each major aspect ratio (I think there are 6 or 7) umm.. 1.33, 1.37, 1.66, 1.78, 1.85 and 2.35 are the ones I know off the top of my head.

Just make sure the JS is correct, as I am not much help on JS yet. (But I am learning it)

[djr33]

Your reasoning makes sense, but there's a flaw.

Not everyone, in fact it may be rare that anyone has the browser maximized. So any screen, regardless of dimension may be any width or height, within the maximum dimensions of the monitor.

There are not simply 16:9 and 4:3 monitors, but, then, any aspect ratio of windows.

You would be best off, probably, running it as a choice, or perhaps with an autodetect within flash, to guess which is closest.

Really though I'd just pick one and let people deal with it. If someone had a widescreen monitor, pillarboxing won't be all that stunning. And if you are making something intended to feel like a film, well, go widescreen, and letterbox for the 4:3 monitors and they'll not only be accepting of it, but most people will probably think it's cool, that "film look".


Blizzard, those do seem about accurate for common ratios, though it's futile to try and list them all because they vary, especially from country to country.

[BLiZZaRD]

True. Another option would be instead of finding aspect ratio find the view point (browser window size) and based on that use >= or <= to go to the desired movie.



<script type="text/javascript">
<!--

var viewportwidth;
var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>

[kevin186]

djr33, thanks for your input. but please dont discourage blizzard. can a javascript simply be made to redirect based on aspect ratio. its really irrelavent to debate the personal uses of individuals having maximized or not. i just want to make the script work. blizzard, your redirect code looks good, but i cant get it to work. i tried editing it every which way, except for the correct way. i would not need every apect ratio, but just one and for it to be ><=.75, which is the height divided by width of the most common 1024x768. i would choose height divided by width since it gives a solid non repeating number of .75. the reciporical is 1.3333333333333333333333333333333333333333333333333repeating:eek:.

[kevin186]

True. Another option would be instead of finding aspect ratio find the view point (browser window size) and based on that use >= or <= to go to the desired movie.



<script type="text/javascript">
<!--

var viewportwidth;
var viewportheight;

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>


you lost me even further with this code. i have no idea what it is and how its used, but i am sure its great. but thanks for your time

[kevin186]

well, you could try something like the following:



var e=(screen.width/screen.height);
if (e=1.66){
window.location.replace("http://www.example.com/page2.htm");
else{
window.location.replace("http://www.example.com/");
}


and just add an if for each major aspect ratio (I think there are 6 or 7) umm.. 1.33, 1.37, 1.66, 1.78, 1.85 and 2.35 are the ones I know off the top of my head.

Just make sure the JS is correct, as I am not much help on JS yet. (But I am learning it)

WE DID IT. IT WORKS! thanks for your help blizzard. this is exactly what i was trying to do. i removed some of the brackets and semilcolons to make it work,and also reversed the order of width and height.
<script language="JavaScript1.2">

/*Aspect Ratio Redirect Script (By kevin186 from www.marizs23.com and BLiZZaRD from www.dynamicdrive.com)*/

var e = (screen.height/screen.width)
if (e>.75)
window.location.replace("http://www.example.com/page1.htm")
else if (e<.75)
window.location.replace("http://www.example.com/page2.htm")
else if (e==.75)
window.location.replace("http://www.example.com/page3.htm")

</script>

in ur face space coyote

[kevin186]

Your reasoning makes sense, but there's a flaw.

Not everyone, in fact it may be rare that anyone has the browser maximized. So any screen, regardless of dimension may be any width or height, within the maximum dimensions of the monitor.

There are not simply 16:9 and 4:3 monitors, but, then, any aspect ratio of windows.

You would be best off, probably, running it as a choice, or perhaps with an autodetect within flash, to guess which is closest.

Really though I'd just pick one and let people deal with it. If someone had a widescreen monitor, pillarboxing won't be all that stunning. And if you are making something intended to feel like a film, well, go widescreen, and letterbox for the 4:3 monitors and they'll not only be accepting of it, but most people will probably think it's cool, that "film look".


Blizzard, those do seem about accurate for common ratios, though it's futile to try and list them all because they vary, especially from country to country.

regardless of the size of the browser at the moment the page loads doesnt matter. the script that blizzard and i created works flawlessly, atleast in firefox and ie. it detects the monitor resolution and loads the correct page based on the script. it doesnt matter if the person has the browser big or small, i have my flash page set to fill 100%. the important part is that it loaded the correct aspect ratio swf and so when the full screen button is pressed, it makes full use of the screen. damn i am happy.

[BLiZZaRD]

Glad it works. Told you my JS wasn't up to snuff. It has been a long day.



you lost me even further with this code.


There are sizes to every screen. The actual viewable screen (aspect ratio) and the part of the browser that is not taken up by toolbars, headers, status bars, etc. (called the viewport).

I was taking off on Daniels mention of windowed browsers, etc. If I have a window open, but not full screen then it won't matter what aspect ratio I have.

I was giving you a code that detects the current view port size of the open window, in case you would rather have used that, and I knew that code worked. :)

[kevin186]

Glad it works. Told you my JS wasn't up to snuff. It has been a long day.



There are sizes to every screen. The actual viewable screen (aspect ratio) and the part of the browser that is not taken up by toolbars, headers, status bars, etc. (called the viewport).

I was taking off on Daniels mention of windowed browsers, etc. If I have a window open, but not full screen then it won't matter what aspect ratio I have.

I was giving you a code that detects the current view port size of the open window, in case you would rather have used that, and I knew that code worked. :)

thanks blizzard, but i guess i wasnt so clear when i first asked for help. the most important thing for me was monitor size, not browser size. because it only made a difference once the full screen button is pressed. the viewport can be any size because the flash will resize to fill the browser because i have it set to be 100%width and height. www.marisz23.com/futurama.html change ur monitor to different aspect ratios to see what i mean. ><=.75 of your height/width will each result with a different page and swf loading, so when u click the full screen button, it will have the proper dimention to fit your screen fully. thanks

[BLiZZaRD]

No no, you were clear, I was just offering another option :)