Gioco a programmare

domenica 30 settembre 2012

Aggiunta di elementi in un DIV figlio

Ecco un codice in cui ogni DIV figlio può essere gestito aggiungendovi degli elementi.
Per ora iniziamo solo con uno.
Ho tolto gli "id" in quanto quell'attributo deve essere univoco, e non è corretto attribuire lo stesso "id" a più elementi.

<html>
<head>
<style>
.bordato {
 border: 5px solid black;
 float:left;
}
.bordatorosso {
 border: 5px solid blue;
 
 width:200px;
 
 float:left;
 margin-left:5px;
 padding:5px;
 
}
</style>

<script>
function $(a){
 return (document.getElementById(a));
}

function aggiungiFiglio(elemento){
 var nuovo=document.createElement("div");
 nuovo.innerHTML="<input type='text'>";
 elemento.appendChild(nuovo);
}

</script>
</head>




<body>
<div id="padre" class=bordato>

 <div class=bordatorosso>
 Uno due tre

 </div>
 <div class=bordatorosso>
 <input type='button' value='Aggiungi' onClick=aggiungiFiglio(this.parentNode)>
 

 </div>
 <div class=bordatorosso>
 sette otto nove

 </div>


</div>
</body>
</html>

Ho trovato il modo di affiancare e includere in un contenitore con il solo uso dei fogli di stile.

Dopo un po' di confusione, ritorniamo a vedere come si affiancano gli elementi all'interno di un contenitore.
Ecco:

<html>
<head>
<style>
.bordato {
 border: 10px solid black;
 float:left;
}
.bordatorosso {
 border: 5px solid red;
 
 width:200px;
 
 float:left;
 margin:10px;
 
 
}
</style>

<script>
function $(a){
 return (document.getElementById(a));
}


</script>
</head>




<body>
<div id="padre" class=bordato>

 <div id="figlio1" class=bordatorosso>
 Uno due tre

 </div>
 <div id="figlio1" class=bordatorosso>
 quattro cinque sei

 </div>
</div>
</body>
</html>

GetComputedStyle

Ecco, era GetComputedStyle.
Ripassiamolo...

Ecco un autolink in proposito.

Ho trovato un codice...

<html>
<head>
<style>
.bordato {
 border: 2px solid black;
}
.bordatorosso {
 border: 50px solid red;
 width:"200px";
}
</style>

<script>
function $(a){
 return (document.getElementById(a));
}

function dimensiona(){
 alert(getComputedStyle(document.getElementById("figlio1"), null).getPropertyValue("border-width"));
 
 
}
window.onload=dimensiona;
</script>
</head>




<body>
<div id="padre" class=bordato style="height:200px;width:800px">

 <div id="figlio1" class=bordatorosso>
 </div>


</div>
</body>
</html>

sabato 29 settembre 2012

Creazione di DIV padri e figli in un documento

Architettare un sistema in cui si aggiungono figli a un elemento, i quali passano, all'occorrenza, a un altro elemento...
Come ho già fatto, è necessario predisporre delle funzioni che permettano di fare rapidamente riferimento al genitore e a degli specifici fratelli.

Costruire un div con due div figli posti in esso, affiancati.

<html>
<head>
<style>
.bordato {
 border: 2px solid black;
}
.bordatorosso {
 border: 2px solid red;
}
</style>

<script>

</script>
</head>




<body>
<div id="padre" class=bordato style="height:200px;width:800px">
 <div id="figlio1" class=bordatorosso style="height:200px;width:400px">
 </div>


</div>
</body>
</html>

Ecco un primo rudimentale tentativo di costruire un genitore con un figlio, fatto dando volta per volta le misure, cosa che dovrà essere eliminata concentrando le istruzioni relative alla formattazione in poche istruzioni buone per tutta la pagina.

C'è un primo limite: il bordo del figlio si estende oltre il bordo del padre.
Ricordo che c'erano delle definizioni di attributi di stile che tenevano conto del bordo degli elementi, ma non ricordo precisamente quali...

domenica 23 settembre 2012

Due funzioni utili per i blocchi che voglio creare nel mio programma

Ho elaborato due funzioni, una già presente in qualche libreria di JavaScript, che risparmia di scrivere il document.getElementById, e un'altra che permette di isolare gli elementi all'interno dell'innerHTML di un elemento.
Questo è il codice completo di prova che ho usato.
Le funzioni andranno poi messe in una libreria a parte.

<html>
<head>
<script>
function $(a){
 return (document.getElementById(a));
}
function Sottoelemento(elemento,nome){
 return ($(elemento).querySelector("div[id="+nome+"]"));
}


function funzione(){
  $("mioDiv").innerHTML="<div id='ciccio'>uno</div><div id='pippo'>due</div>";
  alert(Sottoelemento("mioDiv","ciccio").innerHTML);
  alert(Sottoelemento("mioDiv","pippo").innerHTML);
}
window.onload=funzione;
</script>
</head>
<body>
<div id="mioDiv"></div>
</body>
</html>

Aggiunta di elementi che possono essere selettivamente eliminati.

Ecco un codice che aggiunge elementi ognuno dei quali possiede un pulsante che lo elimina dalla serie.

<html>
<head>
<style>
.tipo {
 border:2px solid black;
 width: 300px;
}
</style>
<script>
var contatore=0;
function crea(){
 
 var nuovo=document.createElement("div");
 nuovo.setAttribute("class","tipo")
 nuovo.setAttribute("id",contatore)
 nuovo.innerHTML="<input type='text'><input type='button' id="+contatore+" onClick='elimina(this.id)'>"
 document.getElementById("primo").appendChild(nuovo);
 contatore++;
 
}
function elimina(n){
 var eliminato=document.getElementById(n);

 primo.removeChild(eliminato);
}

</script>
</head>
<body>
<div id ="primo">Elemento</div>

<input type="button" value="aggiungi" onClick="crea()">
</body>
</html>

Eliminazione di elementi precedentemente aggiunti.

Ecco un codice per eliminare un elemento di quelli precedentemente aggiunti:

<html>
<head>
<style>
.tipo {
 border:2px solid black;
 width: 300px;
}
</style>
<script>
var contatore=0;
function crea(){
 for (n=0; n<10;n++) {
  var nuovo=document.createElement("div");
  nuovo.setAttribute("class","tipo")
  nuovo.setAttribute("id",contatore)
  nuovo.innerHTML="ciccio"+contatore;
  document.getElementById("primo").appendChild(nuovo);
  contatore++;
 }
}
function elimina(){
 var eliminato=document.getElementById(3);
 primo.removeChild(eliminato);
}
window.onload=crea;
</script>
</head>
<body>
<div id ="primo">Elemento</div>
<input type="button" value="elimina" onClick="elimina()">

</body>
</html>