Archive for 'javascript'


[Javascript] Creare un tasto di scelta rapida!

Posted on 24. Aug, 2010 by daniele.

0

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.

0

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.

0

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.

0

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.

0

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.

0

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.

0

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&amp;i=COMR";
    }
}
 

Continue Reading

Integrare google street map api su una pagina web

Posted on 29. May, 2010 by Administrator.

0

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&amp;&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.

0

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.

0

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

Continue Reading

1 2 3 4 »Last »