If you like keyboard shortcuts, or you know how to use Vi to control navigation of a page, then you’re going to love this! (this is not to be confused by jsvi which allows vi control for a textarea in your browser)

I used to use a Firefox extension called Vimperator that basically allowed me to control and navigate through websites using the keyboard with Vim like commands. It was a good tool, actually a great tool, but I got frustrated when I didn’t have this same functionality on Safari, or any Fluid apps (making web apps into a distinct desktop application).

I had planned initially on making jsVim work with websites I developed, but then I realized not too many people would be happy with Vim control on those pages, unless I had a unique activation key event that enabled the rest of the key commands. But anyway, I digress. So it occured to me that making it cross browser specific would be ideal, and the use of Grease[monkey,kit] would allow me to do that.

So long story short, I developed jsVim in javascript form and then created an accompanying Grease[monkey,kit] script to utilize jsVim. There’s still much work to be done (incorporating keyboard events for links/hrefs/onlicks, search/find, colon[:] console commands, etc), but I think what is available is a pretty good start to get this out into the wild.

You can use svn to check out the code, or you can just install the greasemonkey script and get to work using it right away (if you have grease[monkey,kit] already installed).

Greasemonkey script

SVN
svn co http://svn.jadecell.org/jsvim/

Here are some useful commands that should get you started working around in your browser:

• ‘j’ - scroll down on the page (like using the down arrow)
• ‘k’ - scroll up on the page (like using the up arrow)
• ‘Shift+j’ - scroll down a full page (like using the Page Down button)
• ‘Shift+k’ - scroll up a full page (like using the Page Up button)
• ‘h’ - scroll left on the page (like using the left arrow)
• ‘l’ - scoll right on the page (like using the right arrow)
• ‘Shift+h’ - Go Back in history (like the browser back button)
• ‘Shift+l’ - Go Forward in history (like the browser forward button)
• ‘Shift+g’ - goto the bottom of the page
• ‘gg’ or ‘U’ - goto the top of the page
• ‘Alt+Shift+?’ - disable jsVim keyboard shortcuts
• ‘Esc’ - re-enable keyboard shortcuts, remove cursor in a form field from view, remove bottom console window

The next big TODO, is to get link navigation working and a full out help menu when you press the ‘?’ in the window.

Any other ideas and comments are always welcome.

===================

UPDATE:
This script will not work with Firefox’s quick search. Be sure to uncheck “Search for text when I start typing” in the Preferences >> Advanced >> General settings. I’m sure there is a workaround for this, but in the meantime, to get quicksearch up is to type ‘/’, i’ll have my quicksearch disabled until I can get this to work well.

so in my spare time i’ve been sitting in on the mootools (a javascript library) IRC room…and have been in on a bit of conversations here and there.

There are several times where i’m just oblivious to alot of what they’re talking about…mostly because this group has advanced so far into the development of the project, its a bit hard to catch up for a noob. i’m sure some can, but i havent been so lucky, i think mostly because i’m just not familiar with javascript completely anyway. i’ve dabbled alot and restructured js code to work the way i want…but that doesn’t mean i know javascript.

So i’ve decided to do my own toolkit, framework, library or whatever you want to call it. I’m in no way trying to compete with other toolkits, so please don’t bash on what i’m doing…although constructive criticism is always welcome. This is totally for learning purposes, and i’m just making it available to anybody else who could find it useful.

It’s still a work in progress, and all i’ve got so far is a set of tools for divElements, ie innerHTML, border, background, etc.

grab the source using svn:

svn co http://dev.jadecell.org/jadecellScript

or directly here

This work is licensed under a
Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

This is a tough one to create a subject for, but here are the details:

aa ab ae a ac ad

Move by Value
<–move | move–>

Move by Text
<–move | move–>

On the web application I develop on, there was a previous moveModule created and used that would grab the selection from a pulldown and move it over to another pulldown (this was used for dynamic adding and selecting if you don’t know what you could use this for). The issue was that if you moved a selection from one to the other, and then back, the selection would then NOT be put back in the right place but at the end of the pulldown box (this can be annoying if you have a pulldown list full of states or countries). This made the original function very simple and small since it only needed to add an option at the end, but left several users wondering where the option went especially on a very very long list.

The initial remedy was to check the values and then add and insert accordingly. This did the trick, only if the value and text matched. Sometimes the option value was substitued for an id number (useful with a SQL table), so if the id’s and text’s didn’t sync accordingly by number and alphabetical order, then you’d have a mismatch. So I developed two functions that would take the place according to which the programmer defines. One for Value and one for Text (moveModuleByValue & moveModuleByText).

In the example html file, if you view the source you’ll notice that i’ve mismatched option ‘ad’ to accurately see the differences in the two move methods. Try to move that option back and forth between the two move functions to see it work effectively.

I would have tried to make this just one function, but i was not able to figure out how to interchange the DOM of .text and .value flawlessly. If I have time to hack at it more i’ll figure it out, but this seems to do the job just fine for me.

Comments and suggestions are always welcome.

movemodule.html
movemodule.js