https://github.com/byteface/typenav
navigate websites with your keyboard
https://github.com/byteface/typenav
Last synced: 8 months ago
JSON representation
navigate websites with your keyboard
- Host: GitHub
- URL: https://github.com/byteface/typenav
- Owner: byteface
- License: gpl-3.0
- Created: 2016-01-21T11:27:06.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-01-22T07:43:35.000Z (about 10 years ago)
- Last Synced: 2025-05-12T04:52:28.855Z (11 months ago)
- Language: JavaScript
- Size: 265 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# typenav
### Navigate websites with the keyboard
typenav enables the keyboard for quick site navigation and can be setup without much effort. It's useful to quickly jump around a website with strokes of the keyboard.
It's very easy to add typenav to your site and enable keyboard navigation for your users.
Also there's a chrome-plugin *almost ready*, allowing you to navigate lots of websites faster and even add configurations for your own favourite sites.
## setup...
example json configuration...
```
{
"nav":[
{
"keys":["c"],
"url":"/contact"
},
{
"keys":["h"],
"url":"/home"
}
]
}
```
With this example typing 'c' or 'h' would launch the url
## longer keys
you can now also have longer keys. if you type part of a key it will trigger...
```
{
"nav":[
{
"keys":["cats"],
"url":"/cats",
"target":"parent"
},
{
"keys":["cobras"],
"url":"/cobras",
"target":"parent"
},
{
"keys":["facebook"],
"url":"http://www.facebook.com/mypage",
"target":"blank"
}
]
}
```
so typing 'ca' at least would take you to the cats page, typing 'co' to the cobras page and 'fa' would send the user to your facebook page.
## init
by default typenav loads a config.json from same directory as the html page...
```
TYPENAV.init();
```
however you can specify the path...
```
TYPENAV.init( '/path/to/my/config.json' );
```
but even more awesome is you can pass a chunk of json allowing you to build dynamic typenavs on the fly...
```
typenav_json={"nav":[{"keys":["a"],"url":"#abracadabra"}]}
TYPENAV.init( typenav_json );
```
## NOTES
• If a form field on the page is selected, typenav is disabled as to not block users from using textboxes etc
• Binding to hash urls allows you to expand functionality by triggering anchors or js functions
## EXAMPLES
check out examples/quick for quick setup
typenav in action at http://en.r8lst.com/ - press any key on the keyboard to jump to top level nav items
TODO - dynamic nav example.
## CHROME PLUGIN
The chrome plugin loads config files depending on the site you're on. These config files are on github and can be found in the gh-pages branch in the websites folder. So anyone can add a config.json for sites used a lot.
plugin is in /archive at mo whilst i sort it out.
## LICENCE
GPL