Archive for 'javascript'
[Javascript] Creare un tasto di scelta rapida!
Posted on 24. Aug, 2010 by daniele.
Questo script farà partire un'evento quando verrà premuto un tasto specifico definito nella variabile "key1".
In questo esempio, premendo la barra spaziatrice verrà visualizzato un'alert.
var key1="32"; //Codice ASCII del tasto "Spazio" var x=''; function handler(e) { if (document.all) { var evnt = window.event; x=evnt.keyCode; } else x=e.charCode; if (x==key1) alert("Hai premuto la barra spaziatrice"); } if (!document.all) { window.captureEvents(Event.KEYPRESS); window.onkeypress=handler; } else { document.onkeypress = handler; }
Continue Reading
[Javascript] Dimensioni di un file Human-readable!
Posted on 23. Aug, 2010 by daniele.
In Javascript le dimensioni di un file vengono espresse in bytes, nel tutorial di oggi creeremo una funzione che trasforma il valore espresso in bytes in un valore Human-readable, cioè, una rappresentazione numerica naturalmente comprensibile agli esseri umani.
function readableFileSize(size) { var units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; var i = 0; while(size >= 1024) { size /= 1024; ++i; } return size.toFixed(1) + ' ' + units[i]; }
Continue Reading
tradurre automaticamente testi sfruttando le api di google
Posted on 13. Jul, 2010 by Administrator.
in questo articolo vedremo come tradurre un testo contenuto in un div da una lingua ad un altra grazie alle api di google.
Questo è chiaramente un esempio molto semplice di quello che è possibile fare, ma ci da l'idea della potenzialità delle api di traduzione.
Nel nostro esempio tradurremo il testo del div "article" dentro un div "translation".
All'interno dei tag HEAD metteremo:
<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Inizializza versione 1.0 di Google AJAX API google.load("language", "1"); function translate(lang) { var source = document.getElementById("article").innerHTML; var len = content.length; // Google Language API accetta 500 caratteri a richiesta var words = 500; // da qui settare lingua di origine iniziale var sourcelang = "en"; document.getElementById("translation").innerHTML = ""; for(i=0;…
Continue Reading
[Javascript] Drag and Drop su iPhone!
Posted on 07. Jul, 2010 by daniele.
Nel tutorial di oggi dedicato allo sviluppo di applicazioni web per iPhone, imparerete come effettuare un Drag and Drop sugli elementi presenti del vostro sito.
node.ontouchmove = function(e){ if(e.touches.length == 1){ // Only deal with one finger var touch = e.touches[0]; // Get the information for finger #1 var node = touch.target; // Find the node the drag started from node.style.position = "absolute"; node.style.left = touch.pageX + "px"; node.style.top = touch.pageY + "px"; } }
Continue Reading
Simulare l’effetto hover su iPhone!
Posted on 29. Jun, 2010 by daniele.
Poichè su iPhone non esiste un mouse la pseudo classe hover non esiste. In questo tutorial utilizzeremo javascript proprio per simulare questo effetto quando l'utente posizionerà il dito sul link.
var myLinks = document.getElementsByTagName('a'); for(var i = 0; i < myLinks.length; i++){ myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false); myLinks[i].addEventListener('touchend', function(){this.className = "";}, false); }
Dopo aver aggiunto il codice sopra, è possibile utilizzare i CSS.
a:hover, a.hover { /* effetto hover */ }
Continue Reading
Rilevare l’orientamento di un iPhone!
Posted on 24. Jun, 2010 by daniele.
A causa del fatto che l'iPhone permette agli utenti di visualizzare una pagina nella modalità verticale e orizzontale, potrebbe essere necessario essere in grado di individuare in quale orientamento il documento viene letto.
Questa funzione javascript è in grado di rilevare l'orientamento attuale dell'iPhone e di applicare una classe CSS specifica in modo da poter dare uno stile ad ogni singolo orientamento.
window.onload = function initialLoad() { updateOrientation(); } function updateOrientation(){ var contentType = "show_"; switch(window.orientation){ case 0: contentType += "normal"; break; case -90: contentType += "right"; break; case 90: contentType += "left"; break; case 180: contentType += "flipped"; break; } document.getElementById("page_wrapper").setAttribute("class", contentType); }…
Continue Reading
Rilevare iPhone e iPod con Javascript
Posted on 19. Jun, 2010 by daniele.
Quando si sviluppa una Web app per iPhone e iPod Touch, la prima cosa che dobbiamo fare è, ovviamente, riconoscerli, in modo da poter applicare del codice specifico o stili CSS ad essi. I frammenti di codice che trovate qui sotto rileveranno se il dispositivo con cui l'utente sta visualizzando il vostro sito è un iPhone o iPod e in caso positivo reindirizzerà l'utente a una pagina specifica ottimizzata per questi device.
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { if (document.cookie.indexOf("iphone_redirect=false") == -1) { window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR"; } }
Continue Reading
Integrare google street map api su una pagina web
Posted on 29. May, 2010 by Administrator.
In questo tutorial vedremo come si possibile e facile integrare nella nostra pagina web google street map api, mostrando dentro un iframe il percorso stradale di opportune coordinate geografiche.
Intanto occorre recuperare la chiave per l'utilizzo delle api da qui.
Per far funzionare il tutto dobbiamo mettere tra gli HEAD della pagina
<script type="text/javascript" src="http://maps.google.com/maps?file=api&&v=2&key=CHIAVE-DI-GOOGLE-MAP"></script>
e il codice javascript che mostra, dati longitudine e latitudine, le info desiderate:
<script type="text/javascript"> function initialize() { var myPano = new GStreetviewPanorama(document.getElementById("pano")); fenwayPark = new GLatLng(37.828904,15.267858); myPOV = {yaw:0,pitch:5}; myPano.setLocationAndPOV(fenwayPark, myPOV); } </script>
alla fine all'interno della pagina web mostriamo l'iframe con le info stradali:
<body onload="initialize()" onunload="GUnload()"> <div id="container" style="position: relative; width: 500px; height: 300px;"> <div name="pano" id="pano" style="width: 100%; height: 100%;z:index: 0"></div> <iframe src="javascript:false;" frameborder="0" style="position:…
Continue Reading
Limitare il numero di caratteri in una textarea in javascript!
Posted on 27. Jan, 2010 by daniele.
Questo è uno script semplice ma efficace per estendere la tua textarea con l'attributo maxlength, così l'input dell'utente non può superare un certo numero di caratteri.
E'possibile applicare la funzione a più textarea presenti nella stessa pagina!
Codice Javascript
<script type="text/javascript"> /*********************************************** * Textarea Maxlength- © Jooria Refresh Your Site (www.jooria.com) * This notice must stay intact for legal use. * Visit http://www.jooria.com ***********************************************/ function ismaxlength(obj){ var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : "" if (obj.getAttribute && obj.value.length>mlength) obj.value=obj.value.substring(0,mlength) } </script>
Codice HTML
<textarea maxlength="40" onkeyup="return ismaxlength(this)"></textarea>
Continue Reading
Controllare il blocco popup in Javascript
Posted on 13. Jan, 2010 by daniele.
Diversi siti web utilizzano fastidiose finestre popup. Il problema è che alcune persone hanno il blocco popup, ma non lo sanno, in tal modo la nuova finestra non si apre. Ovviamente il browser avvisa l'utente, ma non è sempre così evidente come dovrebbe essere. Ecco un metodo rapido per verificare se la finestra popup è stata bloccato.
var windowName = 'userConsole'; var popUp = window.open('/popup-page.php', windowName, 'width=1000, height=700, left=24, top=24, scrollbars, resizable'); if (popUp == null || typeof(popUp)=='undefined') { alert('Please disable your pop-up blocker and click the "Open" link again.'); } else { popUp.focus(); }
Fonte: http://davidwalsh.name/popup-block-javascript



