Grow your CSS skills. Land your dream job.

Trying to add Keyboard Nav to this MooTools script…Please Help

  • # September 15, 2011 at 11:43 pm

    Here is my script thus far

    window.addEvent("domready", function(){
    var maxLength = 100;
    var counterFluid = 1;
    var wall = new Wall("wall", {
    "draggable":true,
    "autoposition":true,
    "inertia":true,
    "width":150,
    "height":150,
    "preload":true,
    "rangex":[-6,6],
    "rangey":[-6,6],
    callOnUpdate: function(items){
    items.each(function(e, i){
    var a = new Element("img[src=/path/your/images/"+counterFluid+".jpg]");
    a.inject(e.node);
    counterFluid++;
    // Azzera counter
    if( counterFluid > maxLength ) counterFluid = 1;
    })
    }
    });
    // Init Fluid Wall
    wall.initWall();

    // Behaviors
    $("mv-top").addEvent("click", function(e){
    e.stop();
    wall.moveTo(wall.getCoordinatesFromId(wall.getActiveItem()).c, -6);
    }.bind( this ))

    $("mv-bottom").addEvent("click", function(e){
    e.stop();
    wall.moveTo(wall.getCoordinatesFromId(wall.getActiveItem()).c, 5);
    }.bind( this ))

    $("mv-left").addEvent("click", function(e){
    e.stop();
    wall.moveTo(-6,wall.getCoordinatesFromId(wall.getActiveItem()).r);
    }.bind( this ))

    $("mv-right").addEvent("click", function(e){
    e.stop();
    wall.moveTo(5,wall.getCoordinatesFromId(wall.getActiveItem()).r);
    }.bind( this ))

    $("mv-center").addEvent("click", function(e){
    e.stop();
    wall.moveTo(0,0);
    }.bind( this ))
    });

    I would like to add keyboard navigation to this, but not having luck. A colleague suggests to use the snippet below, however I’m a bit confused on how to integrate it. Any help is greatly appreciated!

    Suggested Keyboard Nav Script

    if (event.key == 'up') {
    var cc = this.mywall.getCoordinatesFromId(this.mywall.getActiveItem());
    if( $$("a[rel=" + cc.c + "x" + ((cc.r)-1) + "]").length > 0 ){
    $$("a[rel=" + cc.c + "x" + ((cc.r)-1) + "]").fireEvent("click")
    this.mywall.moveTo(cc.c , ((cc.r)-1) )
    }
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".