Tag Archives: javascript

EnterAsTab.js

by stuporglue Posted on April 16, 2013

I was creating a mobile website and pressing enter on my iPad keyboard kept submitting the form.

Here’s the short script I wrote to avoid that problem It’s EnterAsTab.js. It’s pure JavaScript (no jQuery or anything) so there’s no dependencies, although you could use jQuery to refine which elements have the function applied.

EnterAsTab is on GitHub

function enterAsTab(e){
if ( e.which == 13 ) {
        // We’re on a submit, so click it
        if(this.getAttribute(‘type’).toLowerCase() == ‘submit’){
            return; // let default bubble up
        }
        var n,t;
        n = this;
        do {
            n = n.nextSibling;
            if(n === null){ return; }// no next sibling. Do default behavior
            if(n.tagName != “INPUT”){ continue; }
            // don’t deal with things without a type (such as labels or text nodes) or which are hidden
            t = n.getAttribute(‘type’);
            if(t === null || t.toLowerCase() == ‘hidden’){
                continue;
            }
            if(t.toLowerCase() == ‘submit’){
                return; // bubble up to default
            }else{
                n.focus(); // Found one. Focus,prevent default and done
                e.preventDefault();
                return;
            }
        } while(n !== null);
}
}
function applyEnterAsTab(){
    var inputs = document.getElementsByTagName(‘input’);
    for(var i = 0;i<inputs.length;i++){
        inputs[i].onkeypress=enterAsTab;
    }
}

Usage

You can apply it to all <input> field by simply running:

applyEnterAsTab(); // all input elements are now set to use EnterAsTab

If you’ve got jQuery or Zepto already you can do something like:

$('input.enterastab').on('keypress',enterAsTab); // Only the inputs with enterastab class

$("#oneform input").on('keypress',enterAsTab);   // All inputs within a specific form
Posted in Computers, GitHub, Programming | Tagged , , | Leave a comment

Create a Side-to-Side Draggable HTML5 Canvas in a Div

by stuporglue Posted on May 8, 2012

I have been playing with Pixastic and a little bit of HTML5 canvas image manipulation for a site I’m working on. I load an image into an HTML5 canvas and let the user do some basic manipulation, including zooming in on the image.

Zooming in on the image quickly causes the canvas to outgrow my browser window. The div around the canvas is set to use overflow: auto so that the growing canvas doesn’t disrupt the rest of the page flow.

<div id="pageimgdiv" style="max-width: 100%; overflow: auto;">
   <canvas> 
      Your browser doesn't support HTML5 Canvas
   </canvas>
</div>

The overflowed div gains horizontal scrollbars (but not vertical ones, since there’s no max-height in my case). Unfortunately many people, including myself, don’t have horizontal scrolling configured for their mouse which means scrolling down to the scrollbar, moving over, then scrolling back up.

JQuery To The Rescue

I was able to use JQuery and the scrollLeft() function to make the canvas dragable within the div. The canvas itself doesn’t change sizes or pan (which would require a second canvas used as a buffer, I think). Instead we get the mouse position and current scrollLeft setting when the mouse is clicked, and then scroll more as they move the mouse, until they release the mouse or until they leave the wrapper div.

I’m using JQuery 1.7.2.

$(document).ready(function(){
    $('#pageimgdiv').on(
    {
	mousedown: function(clicke){
	    origX = clicke.pageX + $('#pageimgdiv').scrollLeft();
	    $('#pageimgdiv').on(
	    {
		mousemove : function(e){
		    curX = e.pageX + $('#pageimgdiv').scrollLeft();
		    var diff = (origX - curX);
		    var newpos = $('#pageimgdiv').scrollLeft() + diff;
		    if(newpos > ($('canvas').width() - $('#pageimgdiv').width())){
			newpos = ($('canvas').width() - $('#pageimgdiv').width());
		    }
		    if(newpos < 0){
			newpos = 0;
		    }
		    $('#pageimgdiv').scrollLeft(newpos);
		}
	    }
	    );
	},
	mouseleave: function(){
	    $('#pageimgdiv').off('mousemove');
	},
	mouseup: function(){
	    $('#pageimgdiv').off('mousemove');
	},
	click: function(){
	    $('#pageimgdiv').off('mousemove');
	}
    }
    );
});

Embrace and Extend

This code only scrolls horizontally. You could easily extend it to use scrollTop() and enable vertical scrolling as well.

Posted in Computers, Programming | Tagged , | Leave a comment