Archivi tag: javascript

MiniJoystick – UI Component for touch screen

With the  diffusion of mobile devices is important to continue to offer to users the most possible number of functions, but there’re some problems due to little screens.
For example, with a 5’’ screen a UI Designer can’t draw all the buttons that could do for a desktop app. Button group like this below, are not possible on a smartphone:

imageSlider
A button group for a image slider

From this problem I thinked to a possible solution, it’s easy to use and easy to code: a miniJoystick component, a simple button that uses the properties of the touch screens.
MiniJoystick is a button that can be clicked or can be dragged to left/rigth, up/down, like the old joystick!
For example, the same button can be used to go to next image (“>”) o go to the last image (“>>”), just click on it or drag-to-right.

Mini-Joystick demo
Mini-Joystick drag to right

This is a demo code of Mini-Joystick idea

SetStyle: Set CSS Properties Without Surprises

Introduction

Using JavaScript to make HTML element, often is used elem.setAttribute("style", "property1:val; property2:val;") to set CSS properties in easy way; but there’s a problem if you had just set a CSS property with elem.style.prop="val" : it will be reset to default browser value!! (Run the test code showed below.)

So I made a simple function to solve this problem and continue to use a setAttribute-like approach.

Using the Code

I wrote the setStyle method in HTMLElement interface, that represents any HTML element, so to use it easily.

This is the function:

HTMLElement.prototype.setStyle = function(str) {    
    var props = str.split(";"); //get properties
    for(var i = 0; i < props.length; i++) {
        var t = props[i].split(":"); //t[0] = property - t[1] = value
        this.style[fixPropName(t[0].trim())] = t[1].trim(); //trim removes white space(s)
    }
}

String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

//trasform text, for example, from background-color to backgroundColor
function fixPropName(str) {
    var tArray = str.split("-");
    var prop = tArray[0];
    for(var i = 1; i < tArray.length; i++) {
        prop += tArray[i].capitalize();
    }
    return prop
}

Now you can use this function, in this way:

var div = document.getElementById("IdElement");
div.setStyle("background:blue; color: white");

This function is just a millisecond (on my PC, and sometimes) slower than setAttribute method, but now you are sure to haven’t unexpected CSS properties change.

To make a test, run this code:

<script>
HTMLElement.prototype.setStyle = function(str) {    
    var props = str.split(";"); //get properties
    for(var i = 0; i < props.length; i++) {
        var t = props[i].split(":"); //t[0] = property - t[1] = value
        this.style[fixPropName(t[0].trim())] = t[1].trim(); //trim removes white space(s)
    }
}

String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

//trasform text, for example, from background-color to backgroundColor
function fixPropName(str) {
    var tArray = str.split("-");
    var prop = tArray[0];
    for(var i = 1; i < tArray.length; i++) {
        prop += tArray[i].capitalize();
    }
    return prop
}
window.addEventListener("DOMContentLoaded", 
function(e) {

var div = document.getElementById("cc");
div.style.opacity = "1";
str = "Opacity: " + div.style.opacity + "<br />";
var endTime, startTime = Date.now(); 
div.setAttribute("style","background:green;color:black");
endTime = Date.now(); 
str += "TimeExec: " +(startTime-endTime) + "<br />";
str += "Opacity: " + div.style.opacity + "<br /><br />";

div.style.opacity = "1";
str += "Opacity: " + div.style.opacity + "<br />";
startTime = Date.now(); 
div.setStyle("background:blue; color: white");
endTime = Date.now(); 
str += "TimeExec: " +(endTime-startTime) + "<br />";
str += "Opacity: " + div.style.opacity + "<br />";

div.innerHTML = str;
}, false);
</script>

<div id="cc">To to to</div>

Article on CodeProject

Javascript specific knowdlege

This week-end I found on Twitter an Javascript escape contest: http://escape.alf.nu. At level 9 there’s need of specific js knowledge:

1) As you know, you can call an object method with: obj.method() or with obj[‘method’](), so using the object like an array, ad accessing to it with a string, so you should also do this: obj[‘meth’+’od’]() and you will have the same result. Continua a leggere

Use RequestAnimationFrame with setTimeout-like function

Introduction

In this article I’ll show how to use jsTimers-rAF, a library that makes use of RequestAnimationFrame simply as the use of setTimeout or setInterval function.

In github there’re some examples of use, but now I’ll show how to use the library to change the background on the page, as a div, or what else you can imagine to do with requestAnimationFrame. Continua a leggere

Request Animation Frame polyfill for Firefox nightly

Recently I tried a script uses Request Animation Frame with jsTimers-rAF-hack on firefox nightly and I saw  it doesn’t work. I debugged and I saw requestAnimationFrame into window object, but cancelAnimationFrame doesn’t, so the find browser methods doesn’t work fine.

So this is Erik Möller polyfill find browser methods fixed

var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length 
     && (window.requestAnimationFrame===undefined || 
       window.cancelAnimationFrame === undefined);
 ++x) {
     if(window.requestAnimationFrame === undefined)
         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
     if(window.cancelAnimationFrame === undefined)
         window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame)
    //do some thing

HTML5 Form Validation and Alternative Inputs

I have written a new tip on HTML5 form validation (original article is on codeproject.com)

Introduction

Often in a form, there’s the need to insert only an input or two, and make checks on them. Here, I’ll show how to do this with HTML5 form validation, without JQuery or others frameworks.

Background

To understand this trick, you should know how HTML5 form validation works and a bit of JavaScript. Continua a leggere