resolution detection with notification pop-up?

[Chadi]

I have 15% of my visitors using 800x600 resolution, which makes my forum home look cramped and horrible. Can someone please explain how I can setup a script that automatically detects a visitor using this exact resolution (or perhaps any below 1024x768) and popup a window warning, or static warning on the actual page (maybe header?)...with a custom message suggesting they increase their resolution?

Even browser / version detection also would be great too, along with javascript being disabled.

I would appreciate some insight on this. Thanks.

[veenuisthebest]

Here is a JavaScript that does exactly this
http://tech6.com/showthread.php?t=4

You can test a working Demo of this code at www.home.vinayaks.com , simply set your res. to anything less than 1024x768 and it redirects you to an error page.

[Chadi]

Ok, but I do not want to block them out. I only want to post a simple small notice, a suggestion or "tip" of some sort.

If someone created a mod for this, that would be really neat.

[veenuisthebest]

the above code does not block them out. If you go directly to http://www.home.vinayaks.com/home.php at res 800, you'd still be able to view the page.

So, you can simply provide a link at the error page to the main page (in my case home.php)
OR you can display a message at the main page itself with the help of the above code.

[Chadi]

I added the below in headinclude template, my site refused to load.

<script language="javascript">
if (window.screen){
var w = screen.width;
tmt_url_640 = "http://www.talkjesus.com/misc.php?do=page&template=resolution_warning";
tmt_url_800 = "http://www.talkjesus.com/misc.php?do=page&template=resolution_warning";
tmt_url_1024 = "http://www.talkjesus.com/misc.php?do=page&template=resolution_warning";
if(w<740){
self.location.replace(tmt_url_640);
}
if(w>=740 & w<835){
self.location.replace(tmt_url_800);
}
if(w>=835){
self.location.replace(tmt_url_1024);
}
}
</script>

Any idea why?

headinclude looked like this with the script code

<meta http-equiv="Content-Type" content="text/html; charset=$stylevar[charset]" />
<meta name="generator" content="vBulletin $vboptions[templateversion]" />
<if condition="$show['threadinfo']">
<meta name="keywords" content="<if condition="$threadinfo['taglist']">$threadinfo[taglist], </if>$threadinfo[prefix_plain_html] $threadinfo[title], $vboptions[keywords]" />
<meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$threadinfo[prefix_plain_html] $threadinfo[title] $foruminfo[title_clean]" />
<else /><if condition="$show['foruminfo']">
<meta name="keywords" content="$foruminfo[title_clean], $vboptions[keywords]" />
<meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$foruminfo[description_clean]" />
<else />
<meta name="keywords" content="$vboptions[keywords]" />
<meta name="description" content="$vboptions[description]" />
</if></if>

<!-- CSS Stylesheet -->
$style[css]
<if condition="is_browser('opera') AND !is_browser('opera', '8.0.1')">
<style type="text/css" id="vbulletin_opera8fix_css">
ul, ol { padding-$stylevar[left]:20px; }
</style>
</if>
<if condition="$show['editor_css']">
$editor_css
</if>
<!-- / CSS Stylesheet -->

<style type="text/css">
@import url("clientscript/vbulletin_css/site.css");
</style>

<script type="text/javascript" src="$stylevar[yuipath]/yahoo-dom-event/yahoo-dom-event.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript" src="$stylevar[yuipath]/connection/connection-min.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript">
<!--
var SESSIONURL = "$session[sessionurl_js]";
var SECURITYTOKEN = "$bbuserinfo[securitytoken]";
var IMGDIR_MISC = "$stylevar[imgdir_misc]";
var vb_disable_ajax = parseInt("$vboptions[disable_ajax]", 10);
// -->
</script>
<script type="text/javascript" src="clientscript/vbulletin_global.js?v=$vboptions[simpleversion]"></script>
<if condition="$show['popups']"><script type="text/javascript" src="clientscript/vbulletin_menu.js?v=$vboptions[simpleversion]"></script></if>

<script type="text/javascript">
document.cookie = "psistats_screenwidth = " + self.screen.width;
document.cookie = "psistats_screenheight = " + self.screen.height;
document.cookie = "psistats_screendepth = " + self.screen.colorDepth;
</script>

<script language="javascript">
if (window.screen){
var w = screen.width;
tmt_url_640 = "http://www.talkjesus.com/misc.php?do=page&template=resolution_warning";
tmt_url_800 = "http://www.talkjesus.com/misc.php?do=page&template=resolution_warning";
tmt_url_1024 = "http://www.talkjesus.com/misc.php?do=page&template=resolution_warning";
if(w<740){
self.location.replace(tmt_url_640);
}
if(w>=740 & w<835){
self.location.replace(tmt_url_800);
}
if(w>=835){
self.location.replace(tmt_url_1024);
}
}
</script>

<if condition="$vboptions['externalrss']">
    <link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] RSS Feed" href="external.php?type=RSS2" />
    <if condition="$show['foruminfo'] OR $show['threadinfo']">
        <link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] - $foruminfo[title_clean] - RSS Feed" href="external.php?type=RSS2&amp;forumids=$foruminfo[forumid]" />
    </if>
</if>

Also, what's the actual proper way of linking/calling custom added pages (added via style manager)? For example, one of them is called custom_resolution_xp, but I linked the entire thing in the code. What would the short url be?

edit: with the way I linked to the custom page, the browser just looped when trying to load the page.

[veenuisthebest]

tmt_url_640 = "http://www.talkjesus.com/misc.php?do=page&template=resolution_warning";
tmt_url_800 = "http://www.talkjesus.com/misc.php?do=page&template=resolution_warning";
tmt_url_1024 = "http://www.talkjesus.com/misc.php?do=page&template=resolution_warning";

How would you enter the site this way ?? You are blocking all the res. to enter the site.

Do something like this instead !!

tmt_url_640 = "http://www.talkjesus.com/misc.php?do=page&template=resolution_warning";
tmt_url_800 = "http://www.talkjesus.com/misc.php?do=page&template=resolution_warning";
tmt_url_1024 = "http://www.talkjesus.com/";

Also, what's the actual proper way of linking/calling custom added pages (added via style manager)?

You do not add custom pages through style manager. You add just templates. I'd also recommend you to put the res. code at the top of the headinclude template.

By the way, does this work ?

?do=page&template=resolution_warning