10
edits
Changes
Jump to navigation
Jump to search
Line 25:
Line 25: − + − + Line 62:
Line 62: − 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 − } − } − + + − + + + + + + + + + + Line 89:
Line 95: + + + + + + + Line 99:
Line 112: − − 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> Line 111:
Line 117: − + − + − + Line 124:
Line 130: − + + + + + + +
General improvements, updated the dual screen view code and added a little of my own research
*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)
<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%"
| 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 ==
== 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:
<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>
</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==