Hello this post is the one of the things i have stumbled upon today
I was working on a project and i was requested to do something ala Gmail shortcuts, aka you press a specific button and something happens, well, first off i looked on the web to see if there is any information, which of course it’s not at least from what i looked so i had to build it myself
First off we’ll start with a basic XHTML, containing an un-ordered list, styled a bit, the real secret is the JS itself, you can style the xhtml/css as you want, it doesnt really matter. To save space i’ll upload the complete final files at the end of this post, with instructions and comented css/xhtml/jquery
The XHTML
<div class="desc">
<p> This is Version 1 of the project. This demo now shows how you can press any letters
and only the relevant names that start with that letter show up. In the future you can expect: further
filtering, arrow navigation, special key functionality + more </p>
</div>
<p class="tip"> Press any letter to show only the names starting with that letter.</p>
<p class="msg"> </p>
<div class="helpBox">
</div>
<div class="container">
<ul>
<li>John Smith</li>
<li>....names go here with or without an empty space , see below </li>
<li> Jimmy Carter</li>
</ul>
<div class="clear"></div>
</div>
</div>
Okay what everything means is the p.tip is basically a tip, how to use the system, not important in the JS.
the div.helpBox is very important, because in JS, it will hold the letter the user typed, due to the JS used only 1 letter will be saved, the last one he typed.
the div.container ul holds the li elements that are the things we are interested in, and finally the li tags hold the names we wish to search through.
Please note that after you understand how this works, you can change the xhtml/css structure to anything that suits you, this is just a demo, to show a concept.
Regarding the JS it is commented extensively within the file so please read that. It is possible to make it work for how many letters you want, however the code gets exponentially bigger as conditions have to be added, i will make a post about how to get 2-3 letters to work together very very easily after we build in more functionality in this post, like left/right navigation, what happens if you have different things u want sorted, and of course a top navigation that can switch between the various lists you have stored
Please note that this system can be used for a very extensive part, i posted about what you can do with a li tag in This Post so you could read that also
Attached is a full functional demo, with the js file commented at every step of the way, so for js instructions please refer there
In the next post i will show you how you can have left/right arrow keys functions, and in part 3 a top navigation bar, if you have multiple lists, and updated and enhanced left/right arrow key functionality to work with the new lists (this actually took me a while to figure out) AND in finally part 4 the ability to sort via 2 and 3 letters, each part being build on the code that is here ((this i havent done yet, so it will take some trial and error to do so this post may not come as soon as the other 2 parts
Here is the attached file How To Do Quick Shortcuts ala Google Mail Part 1 and a demo can be viewed online HERE
You must be logged in to post a comment.
Void
Life
Earth 
Wind
Water
Fire 
Light
[...] Comments Alexandru Dinulescu's Thoughts » Blog Archive » How To Do Quick Shortcuts ala Google… on Links within links that actually workAlexandru Dinulescu's Thoughts » Blog Archive [...]