Interaction matters - web development blog

2009 1205

Tabbed CSS only website template

Did you know what a small anchor link can do for you? More, than you might think. You can turn it into an advanced navigation on your website. There is nothing new in this, it was designed to do this. This only make sense, if the scrollbars are visible in your browser, isn't it? Well, no. Anchor links even work, when the invisible content is in an overflow: hidden container. The target element should have the same ID as the anchor link's href attribute.

Show content

   Very very long text... images... forms... btw my over flow is hidden...
   
       I'm invisible by default, 
       but your click just revealed me. :)

This is really nice, but this is too nice to be true. The bad guy this time is Opera. She refuses to play the game and anchoring simply doesn't work in overflow: hidden elements.

After some experimenting, I came up with a working solution: Opera jumps to the desired point, if the overflow is auto. Great, I only need to hide those scrollbars, and I'll have a cross browser, JavaScript free navigation system, that just rocks.

The trick is, that you have to put the overflow:auto element in an overflow: hidden wrapper, that crops the scrollbars.

Category: Programming - Tags: css template free tabs - 11 Read more

2009 1202

Konami codes in javascript

If you ever played any platform, fighting or combat games like Contra or Mortal Combat, then you will be familiar with the special key combinations for executions or special attacks that gives you some extra power, effect, or god mode. The Konami code was one of the fist cheat code in the video gaming history, that special combination later adapted by many games.

In the age of websites, many sites also installed small easter eggs for their visitors, just for fun. See the list here.

I played a little with implementing it, and just a few rows were enough to achieve the desired effect.

var p = 0;
var order = [38,38,40,40,37,39,37,39,66,65];
document.onkeyup = function(e)
{
	var key = (window.event) ? event.keyCode : e.keyCode;
	p = (order[p] == key) ? ++p : 0;
	if( p == order.length ) alert('Boom, secrets unlocked');
};

Category: Programming - Tags: javascript konami-codes Read more

2009 1201

Recursive AJAX calls

Last day I had to hack a webshop's basket management system, and deleting the items had to be done via AJAX. The problem was, that each call had to wait the previous to be completed, otherwise some products kept in the session. The solution was simple: call the AJAX requests recursively on the 'onComplete' event.

Here is a cleaned up code, using MooTools 1.2.4. Call addAjaxParam() to prepare the ajaxParams array.

var ajaxParams = [];
function addAjaxParam( pid )
{
    var obj = {
        'option': 'module_shop_action',
        'product_id': pid
    }
    ajaxParams.push( obj );
}

Category: Programming - Tags: AJAX MooTools JavaScript Read more

Tibor SzászInteraction matters

Tabbed CSS only website template

Konami codes in javascript

Recursive AJAX calls

Briefing

Topics

Friends

Feeling so social

Tags