javascript document.write in preciso id da funzione esterna

[Jerry Masslo]

Non so come sono riuscito a fare un array di colori, mi sto limitando a qualche centinaio, in rgb, ma che c'entra? infatti, per scrivere i colori uso un document.write ma mi servirebbe scriverli con una funzione esterna dentro un preciso elemento quindi come si usa document.write per scrivere dentro un preciso id?, non riesco a trovare niente in rete perchè i getElement compaiono sempre in codici che li usano per sniffare i browser.

Inoltre, quando cominciano a soffrire i browser se si abusa del document.write? Cioè quante linee del tipo:

<div class="box" style="background:rgb(111,111,111)"></div>

posso scrivere prima che il browser s'impalli?

[Mich_]

Stai tirando il collo all'usabilita`, e violando le regole dell'accessibilita`: i colori devono avere un buon contrasto, altrimenti perdi utenti.

Comunque non c'e` limite al document.write(), solo ad un livello (cioe` potresti avere problemi se in uno script scrivi un document.write() che a sua volta scrive uno script contenente document.write() )

A meno che tu non vogli usare un innerHTML per scriver dentro un oggetto:

document.getElementById('ID_DELL_OGGETTO').innerHT ML = "codice HTML da inserire nell'oggetto";

[Jerry Masslo]

oh Mich ci sei? cominciavo a disperare, non ho trovato niente per fare scrivere document.write dall'esterno dentro un elemento particolare. Insomma o si posiziona dove serve o altrimenti scrive all'inizio del body? Mi pare strano

Originariamente inviato da Mich_
Stai tirando il collo all'usabilita`, e violando le regole dell'accessibilita`: i colori devono avere un buon contrasto, altrimenti perdi utenti.

A cosa ti riferisci?

Comunque non c'e` limite al document.write(), solo ad un livello (cioe` potresti avere problemi se in uno script scrivi un document.write() che a sua volta scrive uno script contenente document.write() )

Be' io usavo tre cicli for annidati e sbagliando i conti mi facevo scrivere non so quante migliaia di colori con conseguenti migliaia di righe di codice e i browser non erano molto allegri

A meno che tu non vogli usare un innerHTML per scriver dentro un oggetto:

document.getElementById('ID_DELL_OGGETTO').innerHT ML = "codice HTML da inserire nell'oggetto";

è come immaginavo quindi document.write è limitato e si fa uso di innerHTML, ok provo.

[Jerry Masslo]

function Genera(){
for (i=0;i<9;i++) {for (k=0;k<9;k++) {for (j=0;j<9;j++)
{
document.getElementById('pannello').innerHTML = "<div class=\"box\" style=\"background: rgb("+Col[i]+","+Col[k]+","+Col[j]+")\">-</div>";
}
}}
}

che ha che non va? con document.write questo mi scrive tutto mentre qui non scorre l'array mi restituisce solo un div con la classe e quel trattino di prova? :master:

[Mich_]

innerHTML riscrive un codice dentro un oggetto.

Se tu usi sempre lo stesso oggetto, il tuo for continua a loopare (brutto neologismo) fino a che finisce, e quindi alla fine vedri solo il colore finale.

Nel tuo caso potresti preparati una tabella (tag <table> ) con tutti i posti e poi inserire i colori che vuoi,
oppure il document.write potrebbe andare bene.

Probabilmente una successione di 1000 document.write in successione manda in crisi il browser, ma prova cosi`:

var i=0;
var k=0;
var max=16; // fine loop
function Genera3(i,k) {
  for(var j=0; j<max; j++) {
    document.write("<div class='box' style='background-color: rgb("+Col[i]+","+Col[k]+","+Col[j]+")'>& nbsp;</div>"); 
  }
}

function Genera(i,k) {
  Genera3(i,k);
  k++;
  if(k>=max) {
    k=0; 
    i++;
    if(i>=max) return false;
  }
  var next = "Genera("+i+","+k+")";
  setTimeout(next, 500); // puoi abbassare un po' alla volta, se funziona
}

Attenzione ai colori che usi. I colori "web-safe" sono abbastanza pochi: ogni colore puo` avere circa 16 gradazioni.
Per l'accessibilita`, inoltre, i colori contigui devono essere sufficientemente separati in contrasto e luminosita`, con una formula che ora non ricordo a memoria, ma che posso cercare di recuperare, se serve.

Nota che la chiamta alla funzione Genera() deve essere fatta dal body, cosi`:

<body ...>
<div id="contenitore">
<script ...>Genera();</script>
</div>
...

[Jerry Masslo]

Il tuo script mi ritorna errori suppongo sia anche perché non si accoppi col mio Array, tu hai ipotizzato un Array di colori diverso da quello che sto usando, inoltre ho riscontrato che se richiamo lo script col document.write dall'esterno mi scrive solo con ie, e ancora peggio se inserisco l'intero script dentro l'elemento che voglio va solo sempre con ie (quindi suppongo sbagli lui e io);

<html>
<head>
<title>Untitled</title>

<style type="text/css">
body {background:silver}
.box {width:2%;
height:2%;
background: rgb(100, 100, 121);
font-weight:bold;
line-height:.6em;
font-size:.6em;
float:left;
}
#pannello {width:40%;
background: rgb(255,255,255);
cursorointer;
}

</style>
<script type="text/javascript">
Col=new Array()
for(i=0;i<9;i++){
if (i==0){Col[i]=0}
else {
Col[i]=i*32-1;}}


for (i=0;i<9;i++) {for (k=0;k<9;k++) {for (j=0;j<9;j++)
{
document.write("<div class=\"box\" style=\"background: rgb("+Col[i]+","+Col[k]+","+Col[j]+")\"></div>");
}}}
</script>
</head>
<body>

<div id="pannello">
Possibile che non riesca a metterlo qui?
</div>

</body>
</html>


Questo è quello che sono riuscito a fare per tutti i browser ma non non so come procedere oltre per dirgli dove andare a mettersi.



Sull'accessibilità e i colori credo ci sia un fraintendimento, suppongo ti sia lasciato ingannare dagli indici dei cicli for, ora dovrebbe essere più chiaro, poi quei colori sono per essere scelti quindi non sono imposti a dispetto del loro impatto.

che faccio ora?

Credevo la cosa più complicata fosse fare l'array e invece è tutto il contrario?

[Mich_]

Io avevo ipotizzato un array di 16, invece tu hai 9 elementi. Devi scrivere 9 al posto di 16 alla variabile max.

Ma pensavo che Col fosse una funzione, mentre invece e` una matrice. Questo spiega anche perche` pensavo che i colori fossero troppo simili. Ora e` piu` chiaro.

La funzione va chiamata dal body. Non puoi farla girare nella head.

I tuoi loop vanno bene, ma la successione delle scritture forse genera un buffer overfloaw, per cui ti suggerivo di mettere un ritrado ogni gruppo di colori scritti.

Tra l'altro forse ho fatto un po' di confusione con i puntatori (passati e variabili globali, per cui riscrivo tutto. Inserisco anche alcuni controlli, tanto per verificare

var i=0;
var k=0;
var max=9; // fine loop
function Genera3(i,k) {
  for(var j=0; j<max; j++) {
    document.write("<div class='box' style='background-color: rgb("+Col[i]+","+Col[k]+","+Col[j]+")'>& nbsp;</div>"); 
  }
}

function Genera() {
  Genera3(i,k);
  k++;
  if(k>=max) {
    alert("ho scritto il blocco con i="+i);
    k=0; 
    i++;
    if(i>=max) {
      alert("ho finito");
      return false;
    }
  }
  setTimeout("Genera()", 500); // puoi abbassare un po' alla volta, se funziona
}

Da richiamare:
<script type="text/javascript>Genera();</script>

che devi inserire al posto del tuo commento nel body.

Il contenuto di ogni box deve essere &amp;nbsp; (cioe` devi togliere lo spazio tra & e nbsp

[Jerry Masslo]

:metallica

Col tuo script ricevo errori, mozilla prende tempo e gli altri scrivono solo una parte e poi si bloccano ma non restituiscono nessun alert, poi ho visto che usi una variabile max che credo dal colore che gli dà l'editor sia una parola riservata ma anche cambiandola non vado avanti però implicitamente mi hai suggerito come adattare il mio e ora va con i tre browser che sto provando, ad esempio non mettevo il non breaking space solo che col document.write nudo e crudo tutti i browser scrivevano lo stesso mentre in funzione solo ie ciò mi ha disorientato mentre adesso manca solo un passo per essere a postissimo ma non so se si può fare.
<html>
<head>
<title>Pannello Colori</title>
<style type="text/css">
*{margin:0;padding:0}
body {background:silver;
width:100%;
padding:2%;
text-align:center;
font-weight:80%;
}
.box {width:1em;
height:1em;
background: rgb(100, 100, 121);
font-weight:bold;
float:left;
}
#pannello {width:80%;
background: rgb(255,255,255);
cursorointer;
margin:auto
}
</style>
<script type="text/javascript" src="GeneraColori2.js">
</script>
</head>
<body>
<h1>controllo che non scriva dove gli pare</h1>
<div id="pannello">
<script type="text/javascript">Genera();</script>
<div style="clear:both"></div>
Finalmente si è convinto.
</div>
</body>
</html>

e il javascript è sempre lo stesso credo:

Col=new Array()
for(i=0;i<9;i++){
if (i==0){Col[i]=0}
else {
Col[i]=i*32-1}}

function Genera() {
for (k=0; k<9; k++) {for (j=0;j<9;j++){for (i=0;i<9;i++)
{
document.write("<div class='box' style='background-color: rgb("+Col[k]+","+Col[j]+","+Col[i]+")'></div>");
}}
}}



Quello che manca e far scrivere a partire da un evento in modo che quel codice non influisca sul tempo di caricamento della pagina però non ho ben chiaro come fare, non credo serva un altro document.write altrimenti già si sarebbe risolto ma qualcosa che scriva la linea che richiama la funzione, quindi forse un innerHTML che forse si può legare a un evento?

Una questione non da poco è che quei colori così sono una bella accozzaglia, impostando le dimensioni in em ridimensionando cambiano disposizione con un effetto gradevole ma sempre senza molta logica rimangono, anche cambiando gli indici l'accozzaglia cambia ma sempre accozzaglia rimane.

Come lo lego a un evento?

grazie comunque non sapevo proprio cosa dovevo fare.


p.s. ah ora noto che mi hai cambiato background in background-color, oltre nn4 ti risultano altri browser che non leggano la proprieà abbreviata?


un altra cosa: buffer overflow, da cosa dipende? facendo il conto sono 729 righe di codice mi pare, dovrei starci no? Dipende dalla ram assegnata al processo? da impostazioni del browser? da un po' molte cose? Ho visto che quando provavo un Array spropositato ie mi notificava se volevo interrompere per non andare per le lunghe anche se poi lo eseguiva abbastanza velocemente, gli altri browser però non ne volevano sapere, ma erano molto di più di 729!

[Mich_]

Occhio che qui c'e` un errore di nesting errato (se interpreto giusto):
<script type="text/javascript">Genera();</script>
<div style="clear:both"> </div>
Finalmente si è convinto.
</div>

dovrebbe essere:
<script type="text/javascript">Genera();</script>
Finalmente si è convinto.
</div>
<div style="clear:both"> </div>

Per scrivere in seguito ad un evento, devi modificare qualcosa (e tornare alla proprieta` innerHTML):
Sistemo anchele indentazioni e metto le keywords e i puntievirgola dove conveniente:

var Col = new Array();
for(i=0;i<9;i++){
  if (i==0){Col[i]=0;}
  else {Col[i]=i*32-1;}
}

function Genera(dove) {
  var str = "";
  for (k=0; k<9; k++) {
    for (j=0; j<9; j++) {
      for (i=0; i<9; i++) {
        str += "<div class='box' style='background-color: rgb("+Col[k]+","+Col[j]+","+Col[i]+")'>&amp;amp;nbsp;</div>\n";
      }
    }
  }
  str += "<div style='clear:both'>&amp;amp;nbsp;</div>";
  document.getElementById(dove).innerHTML = str;
}

Da richiamare con:
Genera('panello');

Ad esempio:
<body onload="Genera('pannello');">

dove il div "pannello" deve esseere definito prima di chiamare la funzione.

Nota che come spazio ci devi mettere:
& amp; nbsp; (senza gli spazi, naturalmente).


Per l'ordine dei colori, potresti fare nove pannelli quadrati; in ogni pannello in orizzontale cambia il blu, in verticale il verde e tra un pannello e l'altro il rosso.

In tal caso potresti anche usare delle <table>, se non sei troppo ferrato con i CSS.

[Mich_]

Rispondo alla tua aggiunta:

la proprieta` background dei CSS e` l'unione di varie sotto-proprieta`, una delle quali e` il background-color.

Se viene specificata solo una sottoproprieta`, io preferisco usare la proprieta` specifica, ma non e` una regola.

Il browser NN4 non ha supporto ai CSS (solo in minima parte). Se pensi di avere utenti che ancora usano NN4, devi cambiare sistema (ad esempio usare la proprieta` background del tag <td> ), altrimenti si puo` anche pensare di non aver utenti con broser cosi` vecchi.

Buffero overflow e` quando una memoria di tipo FIFO (first-in first-out) viene riempita piu` velocemente di quanto e` svuotata.
Il document.write() scrive in un buffer, che poi il browser deve visualizzare, per cui posso immaginare che la visualizzazione sia piu` lenta del JS che scrive (ma e` una mia impressione - non ho prove o evidenze di questo). Per cui la cosa puo` dipendere dal browser, dal SO, e da come viene gestita la memoria.