Internet Browser: Difference between revisions
added some information |
General improvements, updated the dual screen view code and added a little of my own research |
||
| Line 25: | Line 25: | ||
*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 | * You can check <em>navigator.platform=="Nintendo 3DS"</em> as well. | ||
=== Scrolling === | |||
=== Key | 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= | <meta name="viewport" content="width=400"> | ||
<style> | <style> | ||
body { margin: 0px; } | body { margin: 0px; } | ||
#topscreen { width: | #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== | ||