For a my project I was developing a JS code to find the JPEG image sizes (height and width) since I didn’t find anything on the web.
The code just uses FileReader and Uint8Array.
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:
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.
This is a demo code of Mini-Joystick idea
Basilico ScrollSpy
In the last days I published a new Basilico Script: ScrollSpy, wich can be used with any HTML front-end frameworks as Bootstrap (infact I had tested the script on a site made with the latter :P).
SetStyle: Set CSS Properties Without Surprises
Ultimo aggiornamento: 31-01-2014
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. Continue reading Javascript specific knowdlege
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
. Continue reading Use RequestAnimationFrame with setTimeout-like function
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
Ultimo aggiornamento: 16-03-2017
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. Continue reading HTML5 Form Validation and Alternative Inputs
RadioAzione
Ultimo aggiornamento: 21-11-2013
RadioAzione è il mio ultimo progettino: in una sola pagina web ci sono decide di radio italiane, divise per tipologia: musica rock, radio rai o radio locali del nolano/avellinese. Futuri sviluppi a breve!
Per i programmatori: lo sto sviluppando in HTML5 usando Knockout, una librearia MVVM davvero potente, e per le icone ho usato Pyconic di Alessio Atzeni.
Basilico Images Lazy
I made a “images lazy” javascript that loads images when user scroll on, this to optimize webpage loading time.
I also made an hack to make it works on sites that use CloudFlare, when I saw that any plugins work on.