Gioco a programmare: HTML

Visualizzazione post con etichetta HTML. Mostra tutti i post

domenica 6 novembre 2016

HTML: Ripasso del layout a due colonne.

Partiamo subito sul sodo: mi serve un layout a due colonne.

Assodato che stabilire la larghezza della colonna laterale in termini percentuali sia sconveniente per la possibile comparsa di scrollbars orizzontali, questa va impostata in termini fissi.
Tutorial che sto seguendo

Ecco, sono riuscito a ottenere qualche risultatino decente, ossia una colonna di navigazione a sinistra: la regola fondamentale è usare il float per la barra navigation, e impostarne la larghezza (fissa), per poi impostare la proprietà margin-left del DIV "contenuto" allo stesso valore della larghezza della navigation.

<html>
<head>
<style>
#container:{
 width:300px;
 
}

#content{
 margin-left:200px;
 background-color:#AAFFAA; 
}

#navigation{
 float:left;
 width:200px;
 background-color:#FFCCAA;
}
 
</style>
</head>
<body>
<body>
    <div id="container">
        <div id="header"></div>
        <div id="navigation">
         Lunedi<br>
         Martedi<br>
         Mercoledi<br>
         Giovedi<br>
         Venerdi<br>
         Sabato<br>
        </div>
        <div id="content">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
        </div>
        <div id="footer"></div>
    </div>
</body>
</body>
</html>

domenica 6 marzo 2016

Una griglia di numeri in JavaScript

Vorrei creare una tastiera mediante la quale sia possibile prelevare cifre per poi deporle in uno spazio a creare numeri.

(nota: provato solo per Firefox)

Proverei con il JavaScript...

Comincio con il creare due DIV ognuno dei quali porta un numero da 1 a 3.
Cliccando sul DIV dovrebbe apparire al puntatore del mouse un "cartellino" contenente il numero rappresentato dal DIV.

Come si può creare un DIV a runtime? Rinfreschiamoci le idee...

<style>
.numero{
 font-size:60px;
 background-color:#AACCFF;
 width:100px;
 height:100px;
}

</style>


<script>
function creaDiv(){
 var mioDiv=document.createElement('div');
 mioDiv.className="numero";
 mioDiv.innerHTML=1;
 document.getElementsByTagName("body")[0].appendChild(mioDiv); 
}
</script>

<body onLoad="creaDiv()">


</body>

Adesso vediamo di creare dei DIV affiancati, in file di tre.
Ricordo un classico schema per creare delle griglie di elementi...

Ecco, l'ho messo in pratica, ho rinunciato ad andare per passettini creando solo 1, 2 e 3, e ho fatto di getto tutto, ed ecco la funzione grid(left, top) che mi crea una griglia di elementi che ha la posizione specificata dai parametri:

<style>
.numero{
 font-size:100px;
 background-color:#AAEEDD;
 width:100px;
 height:100px;
 border: 2px solid green;
 line-height:100%;
 text-align:center;
 vertical-align:text-middle;
}

</style>


<script>
function main(){
 grid(300,50);
}
function grid(left,top){
 var x,y;
 for(n=0;n<9;n++){
  x=n%3;
  y=Math.floor(n/3);
  creaDiv(x,y,left,top,n);
 }
  
}
function creaDiv(x,y,left,top,n){
 var mioDiv=document.createElement('div');
 mioDiv.className="numero";
 mioDiv.innerHTML=n+1;
 mioDiv.style.position="absolute";
 mioDiv.style.left=left+x*parseInt(getComputedStyle(mioDiv).getPropertyValue("width"));
 mioDiv.style.top=top+y*parseInt(getComputedStyle(mioDiv).getPropertyValue("height"));
 document.getElementsByTagName("body")[0].appendChild(mioDiv); 
}
</script>

<body onLoad="main()">


</body>

Ecco la griglia:

Mi piace, ogni tanto, ripassare e approfondire il JavaScript!

martedì 11 dicembre 2012

Canvas: per prima cosa rendiamo un canvas trascinabile, potrebbe servire.

Bene... Sono riuscito a creare una libreria dragdrop.js che contiene l'essenziale per trascinare elementi sulla pagina web.
Essa viene chiamata semplicemente dando all'evento window.onload istruzione di eguagliare l'evento document.onmousedown alla funzione OnMouseDown e l'evento document.onmouseup alla funzione OnMouseUp, e di impostare la proprietà di stile position a "absolute" per gli elementi che si vuole trascinabili.

Ora occupiamoci del canvas.
Dato che sto lavorando con Internet Explorer a causa del fatto che è l'unico browser che mi consente di salvare files su disco fisso, e quindi di mantenere e modificare archivi xml, devo imparare la sintassi del canvas per IE.

Anche il canvas può essere soggetto a DragDrop, impostando le giuste proprietà:

<!DOCTYPE HTML>
<html>
<head>
<style>
#mycanvas{
   border:1px solid red;
   position:absolute;
}
</style>
<script src="funzioni.js"></script>
<script src="dragdrop.js"></script>
<script>
function main(){
 document.onmousedown=OnMouseDown;
 document.onmouseup=OnMouseUp;
}
window.onload=main;
</script>
</head>
<body>
   <canvas id="mycanvas" width="100" height="100">
</body>
</html>

Ecco: con il richiamo delle librerie "dragdrop.js" e "funzioni.js", e impostando quei semplici comandi, il canvas si muove se trascinato.

venerdì 24 febbraio 2012

Menu sulle immagini...

Ecco una pagina con un menu che appare cliccando le regioni Abruzzo e Marche, sul quale si possono mettere dei collegamenti ipertestuali (ad es. alle pagine di Wikipedia)

<html>
<head>

</head>
<body>
<img src="italia.jpg" usemap="#mappa">
<map name="mappa">
<area shape="poly" coords="192, 202, 196, 194, 201, 193, 206, 194, 213, 190, 202, 178, 196, 171, 191, 161, 181, 161, 178, 163, 175, 167, 173, 170, 171, 174, 172, 177, 172, 177, 174, 182, 173, 185, 170, 187, 170, 191, 176, 196, 176, 196, 183, 200, 192, 201, 197, 195" onclick="mostra(event,abruzzo)">
<area shape="poly" coords="175, 163, 182, 161, 189, 160, 186, 142, 182, 134, 180, 131, 174, 129, 159, 118, 156, 121, 153, 117, 145, 121, 140, 127, 140, 127, 149, 128, 147, 133, 154, 140, 158, 137, 160, 145, 159, 152, 163, 156, 168, 158, 168, 162, 174, 166, 179, 162, 189, 159" onclick="mostra(event,marche)">
</map>

<div id="menu" style="padding:10px;position:absolute;background:yellow;visibility:hidden" onclick="this.style.visibility='hidden'"></div>
</body>
<script>
var marche="Ancona<br>Pesaro<br>Ascoli Piceno<br>Macerata";
var abruzzo="<a href='http://it.wikipedia.org/wiki/L%27Aquila'>L'Aquila</a><br><a href='http://it.wikipedia.org/wiki/Pescara'>Pescara</a><br><a href='http://it.wikipedia.org/wiki/Chieti'>Chieti</a><br><a href='http://it.wikipedia.org/wiki/Teramo'>Teramo</a>";
function mostra(event,contenuto){
 if (event.button==0){
  document.getElementById("menu").style.left=event.clientX+10;
  document.getElementById("menu").style.top=event.clientY+10;
  document.getElementById("menu").style.visibility="visible";
  document.getElementById("menu").innerHTML=contenuto;
 }
 else{
  document.getElementById("menu").style.visibility="hidden";
 }
} 


 

</script>
</html>

Simpatico!
Ecco la pagina

giovedì 23 febbraio 2012

Un mappatore di immagini costruito da me

Ho riesumato alcune vecchie conoscenze per realizzare un mappatore di immagini, in modo da costruire delle mappe basate su immagini, molto utili a scopi didattici e autodidattici...

Ecco il codice del "mappatore":

<html><head>

</head>
<body>

<img id="immagine" src="italia.jpg" style="position: absolute; left: 100px; top: 10px; border: 2px solid black;">


<div id="legenda" style="position:absolute;left:100px;top:550px;width:1000px;height:150px;border:5px solid blue"></div>


<script>
function clicca(event){
 
 var StyleLeft=this.style.left;
 var StyleTop=this.style.top;
 document.getElementById("legenda").innerHTML+=(event.clientX-Number(StyleLeft.replace("px","")))+", "+(event.clientY-Number(StyleTop.replace("px","")))+", ";
}
document.getElementById("immagine").onclick=clicca;

</script>

</body></html>

In esso ho inserito un'immagine chiamata italia.jpg.

Ecco la pagina.
(l'immagine è presa da questo sito. Nel caso ci siano problemi di copyright la rimuoverò immediatamente, ovvio!) Dovrei superare la limitazione del dover manipolare il codice HTML della pagina per inserire l'immagine...

domenica 8 gennaio 2012

Una piccola prova di form direttamente sul blog

Forms e Inputs di vari tipi

Un documento ha anche degli insiemi. Uno di questi è forms[].
Che cosa è precisamente un form?

Vediamo...

Raccoglie elementi per l'input dell'utente.
Cerchiamo di farne uno.

<html>
<head>
<script>
function apri(){
 
 
}
</script>
</head>
<body onClick=apri()>
<form>
Nome: <input type="text" name="nome" /><br />
Cognome: <input type="text" name="cognome" />
</form>

</body>
</html>

(ho deciso di imparare a usare la notazione più corretta...)
Ecco:

E ora l'input password:

<html>
<head>
<script>
function apri(){
 
 
}
</script>
</head>
<body onClick=apri()>
<form>
Nome: <input type="text" name="nome" /><br />
Cognome: <input type="text" name="cognome" /><br />
Password: <input type="password" name="password">
</form>

</body>
</html>

Ecco il risultato:

La differenza è che ciò che viene digitato in un input di tipo password non viene visualizzato in lettere ma in pallini...

Ora vediamo gli input in forma di caselle da barrare.

Per prima cosa i radio buttons

<html>
<head>
<script>
function apri(){
 
 
}
</script>
</head>
<body onClick=apri()>
<form>
<input type="radio" name="sesso" value="m">Maschio<br />
<input type="radio" name="sesso" value="f">Femmina
</form>

</body>
</html>

Risultato:

Ora provo a mettere due "sistemi" di radio buttons. L'attributo name dev'essere quello che identifica il "sistema".

<html>
<head>
<script>
function apri(){
 
 
}
</script>
</head>
<body onClick=apri()>
<form>
<input type="radio" name="sesso" value="m">Maschio<br />
<input type="radio" name="sesso" value="f">Femmina
<br /><br />
<input type="radio" name="nazionalita" value="italiano">Italiano<br />
<input type="radio" name="nazionalita" value="francese">Francese<br />
<input type="radio" name="nazionalita" value="inglese">Inglese
</form>

</body>
</html>