Javascript Navigation Part Deux

Yesterday i posted some code related to using JavaScript to assis in keyboard navigation of a website, In that post I mentioned there was a problem when manually scrolling past chapter, today I’ve fixed that problem and am posting the solution.

The Solution is not particularly difficult, all you need to do is determine the users position and then determine which header that would go under. First things first, a interval must be set up to run a script every so often, when testing I use 3 seconds as it gave me enough to to scroll around the page and make sure it was all working well, but the final version of the script I moved up to every half second. Setting up a command to run over so often is easy.

I set that up in an init function that I called once the page was loaded (that function also included getting all the H1 tags and setting some variables) then comes the locator function

Snipplr: http://snipplr.com/view/45934/better-javascript-keyboard-navigation/

That code will process all of the h1 tags and find the one your actually reading, and set the currentpos variable (part of the larger script in the post Working with Javascript Input) to wherever you are allowing you to skip headers based on your current location instead of your last location.

This code is in another example (again, this one is modified to work better work with project gutenburg formatting, this time it’s using H5 tags) on the examples page.

This code was made with the GoogleTV in mind, so no testing was done outside of webkit, but it should work fine in firefox and IE (although it might need a few modifications). If anybody has an application in mind for web use let me know and I can help you tweak it to work in the big 3 desktop browsers.

There are two other improvements I have in mind that I might incorporate in the future. The first is being able to type in the chapter number and the second is implementing smooth scrolling instead of the current jump to method. I’m not sure if I’ll do those any time soon, but it all depends on the time I have.

Working with JavaScript key input

Recently I was selected to win a free googletv as part of their tv web developers program. Layout wise I don’t expect much to be different that any other device with a 1080p monitor, but the controller has some other media buttons that I though might have some use, and with a lack of a mouse, alternative control methods came into mind.

The devices media buttons are, unfortunately, outside of my testing ability because I can’t replicate their input, but assume the control unit has some basic arrow inputs* then it should be no problem to highjack those to do my bidding.

I’ve done a few things and decided to upload them to the Examples tab under javascript (once, you know, I program all the stuff and make it work, havent done that yet) so ou can check them out, all the code is in the file so it should be easy to look at and examine the construction process. The simplest (and probably the most convient to use) is below in all it’s coded glory. To make it short, it allows you to go between H1 tags with the Left and Right keyboard buttons.

Snipplr: http://snipplr.com/view/45909/javascript-keyboard-navigation/

There is a current problem with the system, if you manually scroll past a H1 tag then it doesn’t register it and press the next one may ump you back up the document. I’m pretty sure I have a solution but havent really had the time to implement it, and so It’s not in this code, I’ll update if/when I do fix that downside and pose the code.

You can view this code, along with some other modifications of the same concept on the example page. Also note, the example that uses this has been modified, it uses the H2 tag to work better with how project guttenburg lays out it’s HTML files.

*The device given to me is a Logitech Revue, which actually comes with a full keyboard control, but since I love my Logitech Harmony remote I’m much more likely to use that instead of whip out a keyboard. And I can see a time in the future where full keybaord layouts are probably either less common or, not particularly convient.

UPDATE: 8:58PM
the examples are up on the example page now, looks a little baren, just not enough time to fill it properly.

Multi-forms, the amazing time saver

I’ve done a couple of things that involve a very similar front end, and a identical back end, the latest of which was a basic quiz system. The front end always involves forms (because the internet was made to fill out pointless data on) and making form and form can be a pain. So, i’ve adapted a technique I made for the quiz to make it a little more clear.

To start, I use a multidimensional array usually, kinda link the one below

So thats the data for the form, it’s very simple but it’s only an example, I’ve done this with large forms over 100 entries and it does make things simpler, I’ve also added default value formulas and if the form is saved (used in conjunction with my javascript ajax auto-saver), you can add any additional variables you want, I usually stick in a save one set true/false to denote if I am saving it, I also usually store this in an external file separate from the document and display code so it can be called in multiple places (for instance, the script that saved this data also calls it and checks it against that save field to determine if it should be included in the mysql_query(). That lets me use one saver file and have it save the data from a bunch of files.

Another advantage of this system is that the from is not generated in a very predictable manner and a less experienced user can change it (either through details instructions or blind “replace this thingy here” methodology) and when properly linked to the saving script neither they or you have to deal with making modifications to the save code (and that can save some serious time if the form changes often or there are many of them to work with)

So how does the saving work? simple, lets say we have loaded the data up into the save script. the array is called $form, and it has the subfeilds type, default, and save as mentioned above, and we’ll send it to the save script via POST. The simplest method of managing this would be something like this:

So that will write the name of the form item into a mysql table with the needed schema, it again is very basic, I have added features to make the sceme as it writes (be careful who can do that or you’ll have a huge mess on your hands), and to overwrite old entries, really all depends on what you need it to do.

So thats the style of the array holding the information and saving it, the display part is the key part though, it too is very simple. If you use any non-input type types (like I did in the first example) it’s best to check for those first, then display the standard type fields afterwards (most often the standard ones I use are text and hidden) A basic outline could be like this

‘; foreach($form as $name => $data){ echo $name.”:”; if($data[‘type’]==’date’){ list($month,$day,$year)=explode(‘/’,$data[‘default’]); echo ‘The dates can be put where, with their own loops, or you could load a JS date module or something’; echo ‘I didn’t put them in here because there long, and this post is long enough already’; }else if($data[‘type’]==’gender’){ echo ”; echo ”; }else{ echo ‘ ‘; } echo ‘
‘; } echo ‘

Modify and needed and you got a form, if you decide to make further changes to the form it’s a lot simpler and faster than going through the html code. You have have someone not experience in HTML at all do it, you can have it output in another language, really anything, it’s all in the output section.

You can also get really fancy with this, I have one that calculates the information in the save file and sends in back to the page to update the non-saved fields (a little slower than a native JS update but it doesn’t requires another et of formulas to update). I’ve also used this concept for a quiz engine, the files are easy to modify and instead of the save engine I have a correction engine which determines the users score. And with a quick $_GET script I can load an infinite number of quizes without ever having to re-look at the correction or display code. It’s all in the implementation of the ideal.

Please note that none of the code on this page has been tested and was written from memory, if there’s one thats not working post a comment and I’ll fix it up for you.