10
edits
Changes
Jump to navigation
Jump to search
General improvements, updated the dual screen view code and added a little of my own research
Line 25:
Line 25:
window.onload=function() + {+ if (navigator.userAgent.indexOf('Nintendo 3DS') == -1) //If the UserAgent is not "Nintendo 3DS"+ {
− location.replace('http://www.3dbrew.org'); //Redirect to an other page
− }
− }
+
+
+Here's how your webpage can span both screens:
−# Ensure that your page takes up exactly 320x432 pixels.
−# Add the following JavaScript just before the </body> tag:
− <script>document.body.scrollTop = 220;</script>
+
+
*CSS 3 (some functionality is unavailable)
*CSS 3 (some functionality is unavailable)
*DOM Levels 1-3
*DOM Levels 1-3
−*ECMAScript
+*ECMAScript (partial support for ECMA-262 5th Edition)
−*XMLHttpRequest
+*XMLHttpRequest Level 2
*Canvas Element (some functionality is unavailable)
*Canvas Element (some functionality is unavailable)
Line 62:
Line 62:
<script type="text/javascript">
<script type="text/javascript">
− if (navigator.userAgent.indexOf('Nintendo 3DS') == -1) { //If the UserAgent is not "Nintendo 3DS"
− location.replace('http://www.3dbrew.org'); //Redirect to an other page
− }
− </script>
</script>
−* You can check navigator.platform=="Nintendo 3DS" as well (harder to spoof).
+* You can check <em>navigator.platform=="Nintendo 3DS"</em> as well.
+=== Scrolling ===
−=== Key Codes ===
+Scrolling can be altered by modifying <em>document.body.scrollTop</em> and <em>document.body.scrollLeft</em>. However, there are drawbacks related to working with these properties:
+* Both properties return 0 when accessed
+* Setting one property resets the other property's scroll position
+In order to set both at the same time (without either resetting to 0), use <em>window.scrollTo</em>.
+=== Events ===
+==== Key Events ====
+The following buttons trigger the <em>onkeydown</em>, <em>onkeypress</em> and <em>onkeyup</em> events:
{|class="wikitable" width="20%"
{|class="wikitable" width="20%"
Line 89:
Line 95:
| 40 || Down
| 40 || Down
|}
|}
+
+The events cannot have their default action cancelled. Other buttons do not trigger key events.
+
+==== Touch/Mouse Events ====
+<em>onmousedown</em>, <em>onmouseup</em> & <em>onclick</em> are all triggered by the browser. However, the <em>onmousedown</em> event doesn't trigger until you've held the stylus on the screen for ~2 seconds, which is when text selection mode is activated. The events cannot have their default action cancelled.
+
+The <em>onmousemove</em> and common touch/gesture events are not supported.
== Screen Resolution ==
== Screen Resolution ==
Line 99:
Line 112:
== Using Both Screens ==
== Using Both Screens ==
−Generally the easiest way to accomplish the correct layout is to create HTML elements that "contain" the top and bottom screens. Here's an example:
Generally the easiest way to accomplish the correct layout is to create HTML elements that "contain" the top and bottom screens. Here's an example:
Line 111:
Line 117:
<html>
<html>
<head>
<head>
− <meta name="viewport" content="width=320">
+ <meta name="viewport" content="width=400">
<style>
<style>
body { margin: 0px; }
body { margin: 0px; }
− #topscreen { width: 320px; height: 220px; overflow: hidden; }
+ #topscreen { width: 400px; height: 220px; overflow: hidden; }
− #bottomscreen { width: 320px; height: 212px; overflow: hidden; }
+ #bottomscreen { width: 320px; height: 212px; overflow: hidden; margin: 0 auto; }
</style>
</style>
</head>
</head>
Line 124:
Line 130:
</html>
</html>
−This scheme allows the page to be easily manipulated through JavaScript.
+This scheme allows the page to be easily manipulated through JavaScript. In order to have the window snap to the correct position, use the following JavaScript code:
+ window.setInterval(function () {
+ window.scrollTo(40, 220);
+ }, 50);
+This automatically resets the position if the user accidentally scrolls the page.
==Example Sites==
==Example Sites==