Serge's Technology View

Talk about Technologies, Software Architecture and Management

Archive for the ‘Technology’ Category

How to add key navigation to your web-site

This is probably an old topic which still raises here and there.

Day ago while waiting for delayed flight on United, I was doing some follow up on the discussion about my Theme for Gallery 3 and was asked if I could add support for Keyboard navigation.

In general, it is easy topic, especially when jQuery is supported for the web-site.

An objective is to allow visitor use keyboard to navigate. In my case it is applied to Gallery pagination enabling use of Left/Right/Up keys to move between photos or album pages.

While being simple in implementation, it adds a convenience for the end user enabling keyboard navigation versus mouse clicks.

So let’s add it…

First, we need some “anchors” on the page to find dynamically what our keys would do when pressed.

In case of my theme, I have paginator control allowing user navigate first/prev/next/last or go level up in the gallery structure (small arrow buttons/links), but it could be anything.

If we are to be W3C-friendly, then <link> tag in the header is more appropriate, but I am not going to use it in the example below. So let’s assume we have 5 links as following

<a title="First (Ctrl+Left)" id="g-navi-first" href="/first.html">First</a>
<a title="Prev (Left)" id="g-navi-prev" href="/prev.html">Prev</a>
<a title="Parent (Ctrl+Up)" id="g-navi-parent" href="/parent.html">Parent</a>
<a title="Next (Right)" id="g-navi-next" href="/next.html">Next</a>
<a title="Last (Ctrl+Right)" id="g-navi-last" href="/last.html">Last</a>

As you can see we have 5 different actions to take and we have selected key combinations we are going to use.
Code above by itself, would only work with mouse click.
What we need next is very small jQuery code to bring life into it and add desired keyboard sensitivity.
Please notice that it would override default arrow key based scroll support of the browser. So if you want to keep both then simply adjust code below to your liking.

There goes the code. Simply dump it into JS file and add reference in your page:

/**
*
* Copyright (c) 2010 Serguei Dosyukov, http://blog.dragonsoft.us
*
*/

$.fn.KbdNavigation = function() {

  $(this).bind("keydown", function(event) {
    var lnk = "";
    var lnk_first, lnk_prev, lnk_parent, lnk_next, lnk_last;
    lnk_first  = $("#g-navi-first").attr("href");
    lnk_prev   = $("#g-navi-prev").attr("href");
    lnk_parent = $("#g-navi-parent").attr("href");
    lnk_next   = $("#g-navi-next").attr("href");
    lnk_last   = $("#g-navi-last").attr("href");
   
    switch(event.keyCode) {
      case 0x25: // Ctr+Left/Left
        if(event.ctrlKey) { lnk = lnk_first; } else { lnk = lnk_prev; }
        break; 
      case 0x26: // Ctrl+Up
        if(event.ctrlKey) { lnk = lnk_parent; }
        break;
      case 0x27: // Ctrl+Right/Right
        if(event.ctrlKey) { lnk = lnk_last; } else { lnk = lnk_next; }
        break; 
    }
   
    if(lnk) {
      window.location = lnk;
      return true;
    }
   
    return true;
  });
}

$(document).ready( function() {
  $(document).KbdNavigation({});
});

PHP, MySQL and error “2006: MySQL server has gone away”

As a hobby I like to do little photography.

Same time I do not like to give my photos to someone else to host, so I have my gallery.

It runs on Menalto’s Gallery 3 engine – nice, open source, PHP based with MySQL back-end.

Not my primary programming language, but allows me to host and enhance my blog, keep my gallery and small web-site.

Last night, while bringing some old photos over from my backup gallery (G3 is still under development and I do not want to recreate gallery if anything to happen, and it did – I killed the setup…), I noticed that import process start to fail. Several attempts to recover did not give much of the progress and I went digging error logs.

Well,.. I learned something interesting. I am not a PHP programmer, at least it is not that I do for living, or not at this time… but even doing simple house work forces you learn things :)
G3 runs on Kohana framework and there is a wrapper for DB access.

What happend was that some of the SQL requests began timing out

Database_Exception [ 44 ]: #2006: MySQL server has gone away

In case when queries are not optimal, one has to learn how to manage PHP… through php.ini…

MySQL timeout related errors are “fixed” by telling mysql to reconnect… and for that “tricks” are handy…
From browsing, reading, browsing, filtering, … while waiting for G2 Import I have found a solution which lead me here. One of interest is called mysqli.reconnect. Little magic - simply adding the following line in PHP.INI would tell MySQL reconnect.

mysqli.reconnect=1

It may be still slow, but at least connection would recover gracefully.

We can talk about code styles, code protection and error handling, but line above is a hidden gold on the end of the rainbow called PHP.

Crystal Reports 2010 – rumors are out

It has been two years since Crystal Reports 2008 was released. It feels old now – no support for new .Net technologies, no support for new export formats, etc.

So question is – when we would see any of this?

Accordingly to Blair Wheadon,  Product Manager in the Volume Business Unit at SAP, our cries may be answered relatively soon.

Post is a nice summary and I hope features discussed would be in the final product.

Few highlights I pick for myself and with comments:

  • Crystal Reports Basic will no longer be included in Visual Studio 2010
    Finally! Every time I have to set-up Visual Studio environment, I have to make sure I do not bring CR Basic along since I have a full version instead.
    Do not worry “Crystal Reports for Visual Studio 2010 will be provided by SAP as a free download, no registration required“.
    We are committed to have a beta version at the time that Visual Studio 2010 goes GA. A production release will be no later than Q3 2010
  • There are slight changes in Licensing… as usual, read it through.
  • 64-bit run-time support.
    Good! Platform independent code for .Net applications.
  • New WPF Viewer
    Even better! No more .Net 2.0 assemblies (I hope)
  • New XLSX export to take advantage of the big grid for data-only Excel exports
    Finally! 64K page limit is inconvenient, to say the least.

You can read about other more or less important improvements in Blair’s post, but these are answers for questions I was looking for.

Valid XHTML 1.0 Transitional  Valid CSS!