I did it by hand, with the help of a script

WOW! That's what you meant by "it took the most time". I just finished the map in 5 min.!

You forgot to tell me what permissions to set, but I figured it out.

Still in progress (naming keys ) but here is the page:

casio dot toppagedesign dot com slash keypad

The font you've got now is fine, but Comic Sans is plenty readable as well.

Edit: Page turn fail

Oh yeah, I forgot, sorry. You can remove the code

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-25020274-1']);
  _gaq.push(['_setDomainName', 'clrhome.tk']);
  _gaq.push(['_setAllowHash', 'false']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

(It's for my site's analytics.) Permissions need to be set to +w for the files conf.xml and log.txt. You also need to have a link to jquery.js, but I see you've got it.

Wow... you never cease to amaze me, Deep Thought!

A fun little suggestion - include a section that tells the ports of the key?
(Don't know if this is the right terminology for it )

Yeah, I'll try to figure out how to get that to work.

BTW: finished naming all the keys!

Oh, I only have the names done, not getkey etc.

BTW: how would I get more feilds? like an sdk keycode one?

EDIT: I now have all the getkeys and explanations finished (YEAH!)

Just to let you know, you should avoid double-posting if the two posts are within 6 hours of each other. Use the MODIFY or QUICK MODIFY button instead

Hey Deep, I improved your script a little.

CSS:

Code: [Select]

            div
            {
                position: relative;
                height: 576px;
                background: url(http://clrhome.org/resources/keypad/paper.png) top left no-repeat;
        overflow: auto;
            }

Nice, but I updated mine to make it even better -- I'll explain.

FFR: you can use Tipsy for tooltips. It is a jQuery addon.

http://onehackoranother.com/projects/jquery/tipsy/#

Thanks for the tip, but I don't like using too many third-party scripts in my projects I'm even considering moving all my stuff out of jQuery.

Anyway, I changed a lot of things. Here's a brief list so you can change your copy to match:

• The entire storing code block (everything before the <!DOCTYPE) was updated to make encodings more consistent. (I'm a consistency freak.) You should probably copy-paste that section again.

•          div
           {
              position: relative;
              height: 576px;
              background: url('paper.png') top left no-repeat;
           }

  was changed to

           div
           {
              position: relative;
              min-height: 500px;
              padding-bottom: 76px;
              background: url('paper.png') top left no-repeat;
           }

  Instead of adding scrollbars when the content gets too big (as you've done with your overflow: auto rule), this makes it extend the div when content is too long. I chose to do this because I personally don't like scrollbars in the middle of my page.
• I added "margin: 0;" to the body element. Just a minor detail, but I think it makes it look better.
• The $('img').after() function was changed so that the hover table has an absolute positioning, not a fixed one. Honestly, I'm not sure why I made it fixed in the first place; that made it glitch when you scroll down the page.

That should be it. Again, feel free to use my script!