Collegare i dati inseriti in un body di un html ad un file .js

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
So dove ho sbagliato, il for si riferisce al numero di fantasmini che escono alla volta, il div in effetti è uno solo ghost, dovrei dirgli che c'è più di un div.... come faccio ???
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
il for in effetti diciamo che fosse un testo e non un dvd fa questo con il document.write :

"ghosts00" + "ghosts01" + "ghosts02" + "ghosts03" + "ghosts04" + "ghosts05" + "ghosts06" + "ghosts07" + "ghosts08" + "ghosts09"

quindi forse e ripeto forse dovrei mettere nel body questi :

HTML:
<div id="ghosts00" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
<div id="ghosts01" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
<div id="ghosts02" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
..................................

e poi non so più cosa fare.... con la logica forse mi arraggio ma non riesco a scrivere bene la procedura... mi aiuti per favore :(
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
il ciclo lo puoi togliere visto che li stai scrivendo a mano

invece hai sbagliato a dare gli id

se quardi il codice mette prima dell incremento un'altro valore che dovrebbe essere il numero di div che setti all'inizio, se non ricordo male
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Il ciclo iniziale era questo :

HTML:
for (i = 0; i < numberOfGhosts; i++ ){ 
document.write('<div id="ghosts'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="'+urlofimage+'"   class="ghost" width="70"/></div>'); 
}

e quindi dovrebbe essere :
HTML:
<div id="ghosts01">....
<div id="ghosts02">....

e poi a posto del for che scrivo direttamente cosi ? :

HTML:
document.write(ghost01)
document.write(ghost02)
, sinceramente non conosco la sintassi per fare il write di un dv :((
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Codice:
id="ghosts'+(idx+i)+'"'

idx dovrebbe essere come gia detto il numero di fantasmi ( prova a vedere )
i è l'incremento ( 0 1 2 3) fino alla fine dei fantasmi

quindi fa la somma e la concatena a ghosts
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Lo so che forse ti scocciando porta pazienza per cortesia,

allora ho fatto questa cosa per conoscere il valore di ivx :

HTML:
var numberOfGhosts = 10; /* Numero dei fantasmi */
var idx = document.getElementsByTagName('div').length;


for (i = 0; i < numberOfGhosts; i++ ){ 
document.write('"ghosts'+(idx)+'"') }
e mi esce : ghosts0""ghosts0""ghosts0""ghosts0""ghosts0""ghosts0""ghosts0""ghosts0""ghosts0""ghosts0"

e poi ho fatto anche :
HTML:
for (i = 0; i < numberOfGhosts; i++ ){ 
document.write('"ghosts'+(idx+i)+'"') }

e mi esce , quindi idx = 0 ??
ghosts1""ghosts2""ghosts3""ghosts4""ghosts5""ghosts6""ghosts7""ghosts8""ghosts9"

e poi ripeto non so come impostare il document.write , mi sto impegnando giuro :(
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
var idx = document.getElementsByTagName('div').length;
vuoldire:

prendi tutti gli elementi div
-- document.getElementsByTagName('div')
contali
-- .length

il valore di idx è uguale a quanti div ci sono nella pagina

e devono essere uguali a quello che scrivi qui
var numberOfGhosts = 10; /* Numero dei fantasmi */
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
quindi devo scrivere 10 div perchè il loro numero è dieci e di conseguenza anche idx = 10 se ho compreso il tuo scritto

e quindi :

HTML:
<div id="ghosts11" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
<div id="ghosts12" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
<div id="ghosts13" style="position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px;"><img src="'+urlofimage+'" class="ghost" width="70"/></div>
......................................

e a posto del for devo scrivere cosi :

HTML:
document.write (' id="ghost11" ' ) 
document.write (' id="ghost12" ' )
controllami anche la sintassi per favore :)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
lascia perdere il for, non devi scrivere niente li

i div mi sebrano corretti anche se puoi semplificare con un classe css
l'html poi non sa che valore ha la variabile urlofimage , non la puoi usare
10 + 0 non fa 11 ma 10
HTML:
<html>
    <head>
        <style type='text/css'>
            .fantasma {
                position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px; 
            }
        </style>
    </head>
    <body>
        <div id="ghosts10" class="fantasma"><img src="fantasma.gif" class="ghost" width="70"/></div>
        <div id="ghosts11" class="fantasma"><img src="fantasma.gif" class="ghost" width="70"/></div>
        <div id="ghosts12" class="fantasma"><img src="fantasma.gif" class="ghost" width="70"/></div>
          ......
    </body>
</html>
stai facendo i passi piu lunghi della gamba, dovresti cominciare con qualcosa di piu semplice per imparare
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Scusami adesso rientrato e a posto del for ????
lo so che sto entrando in territori minati ma a parte imparare sto cercando anche di gestire il blog... :)
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Scusa.... sostituito il tutto e va bene... solo una cosa strana, nell'angolo in alto a destra compare sempre il fantasmino da solo e non come getto di immagini e non cambia neanche con il refresh.... boh....
Cmq grazie davvero.... me lo rivedo un attimo... :)
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Ho visto il problema.... il fantasma fisso è dovuto ai div nel body.... lasciando il for come sta chiaramente le immagini vanno ben... in effetti non funziona :((

per chiarezza ti posto il file ma me sa che qualcosa mi è sfuggita...
HTML:
<HTML>
    <HEAD>
        <script language="JavaScript">
            var img = new Array()
            var ran;            
            
img[0] = 'fantasma.gif';
img[1] = 'angelo.gif';
img[2] = 'spade.gif'; 

            
            var urlofimage = img[0];
            function random() { 
                ran = Math.floor(3 * Math.random());  
                urlofimage = img[ran];
            }                    
            setInterval("random()",3000);
            
            if ((document.getElementById) &&
                window.addEventListener || window.attachEvent){
                (function(){
                    //Configurazione Effetto Fantasmi
                    var numberOfGhosts = 10; /* Numero dei fantasmi */
                    var ghostSpeed = 0.9; /* Velocità */
                    var inTheFace = 5;
                    var setTimeOutSpeed = 50; /* Tempo di permanenza */
                    //NON EDITARE SOTTO A QUESTA RIGA ESCLUSO URL IMMAGINE
                    var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
                    var d = document;
                    var domWw = (typeof window.innerWidth == "number");
                    var domSy = (typeof window.pageYOffset == "number");
                    var pi1 = 180/3.14;
                    var pi2 = 3.14/180;
                    var y = [];
                    var x = [];
                    var strs = [];
                    var gro = [];
                    var dim = [];
                    var dfc = [];
                    var vel = [];
                    var dir = [];
                    var acc = [];
                    var dtor = [];
                    var xy2 = [];
                    var idx = document.getElementsByTagName('div').length;
                    var zip = [];
                    var pix = "px";

   
                       
for (i = 0; i < numberOfGhosts; i++ ){ 
document.write('<div id="ghosts'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="'+urlofimage+'"  class="ghost" width="70"/></div>'); 
}  


                       
                    if (domWw) ref = window;
                    else{
                        if (d.documentElement &&
                            typeof d.documentElement.clientWidth == "number" &&
                            d.documentElement.clientWidth != 0)
                            ref = d.documentElement;
                        else{
                            if (d.body &&
                                typeof d.body.clientWidth == "number")
                                ref = d.body;
                        }
                    }
                    function win(){
                         
                        var mozBar = ((domWw) &&
                            ref.innerWidth != d.documentElement.offsetWidth)?20:0;
                        h = (domWw)?ref.innerHeight:ref.clientHeight;
                        w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
                        cy = Math.floor(h/2);
                        cx = Math.floor(w/2);
                        oy1 = (75 * h / 100);
                        oy2 = (oy1 / 2);
                        ox1 = (75 * w / 100);
                        ox2 = (ox1 / 2);
                        iy1 = (18 * h / 100);
                        iy2 = (iy1 / 2);
                        ix1 = (18 * w / 100);
                        ix2 = (ix1 / 2);
                        field = (h > w)?h:w;
                    }
                    function rst(s){
                        var cyx;
                        sy = (domSy)?ref.pageYOffset:ref.scrollTop;
                        sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
                        acc[s] = 0;
                        dim[s] = 1;
                        xy2[s] = 0;
                        cyx = Math.round(Math.random() * 2);
                        if (cyx == 0){
                            y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
                            x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
                        }
                        else{
                            y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
                            x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
                        }
                        dy = y[s] - cy;
                        dx = x[s] - cx;
                        dir[s] = Math.atan2(dy,dx) * pi1;
                        dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
                        zip[s] = 10 * (dfc[s] + inTheFace) / 100;
                        vel[s] = ghostSpeed * dfc[s] / 100;
                        dtor[s] = (field - dfc[s]);
                        if (dtor[s] < 1) dtor[s] = 1;
                        gro[s] = 0.003 * dtor[s] / 100;
                    }
                    function animate(){
                        for (i = 0; i < numberOfGhosts; i++){
                            y[i] += vel[i] * Math.sin(dir[i] * pi2);
                            x[i] += vel[i] * Math.cos(dir[i] * pi2);
                            acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
                            vel[i] += (acc[i]);
                            dim[i] += gro[i] + acc[i] / zip[i];
                            xy2[i] = dim[i] / 2;
                            if (y[i] < 0 + xy2[i] ||
                                x[i] < 0 + xy2[i] ||
                                y[i] > h - xy2[i] ||
                                x[i] > w - xy2[i]){
                                rst(i);
                            }
                            strs[i].top = (y[i] - xy2[i]) + sy + pix;
                            strs[i].left = (x[i] - xy2[i]) + sx + pix;
                            strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
                            document.getElementById("ghosts"+(idx+i)).innerHTML = "<img src='"+urlofimage+"' class='ghost' width='70'/>";
                        }
                        
                        setTimeout(animate,setTimeOutSpeed);
                    }
                    function init(){
                        win();
                        for (i = 0; i < numberOfGhosts; i++){
                            
                            
                            strs[i] = document.getElementById("ghosts"+(idx+i)).style;
                            rst(i);
                        }
                        animate();
                    }
                    if (window.addEventListener){
                       
                        window.addEventListener("resize",win,false);
                        window.addEventListener("load",init,false);
                    }
                    else if (window.attachEvent){
                        
                        window.attachEvent("onresize",win);
                        window.attachEvent("onload",init);
                    }
                })();
            }//End.
            
        </script>
        <style>
            .ghost {
                filter:alpha(opacity=30);
                -moz-opacity: 0.3;
                opacity: 0.3;
                -khtml-opacity: 0.3;
            }
            html {
                overflow-x:hidden;
            }
        </style>


        <style type='text/css'>

            .fosco {
                position:absolute;top:0px;left:0px; width:40px;height:40px;background-color:transparent; font-size:0px; 
            }
        </style>
    </head>

    <body>
        <div id="ghosts10" class="fosco"><img src="fantasma.gif" class="ghost" width="70"/></div>
        <div id="ghosts11" class="fosco"><img src="fantasma.gif" class="ghost" width="70"/></div>
        <div id="ghosts12" class="fosco"><img src="fantasma.gif" class="ghost" width="70"/></div>
          ......
    </body>
</html>
</HTML>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Tra un po di tempo quando avrai piu esperienza lo riguardi e penserai ... "ma come ca. l'hanno scritto? io avrei fatto cosi .. " e butti giu un codice che potrai ridistribuire in rete :fonzie:
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Collegare due segmenti di rete diversi Reti LAN e Wireless 0
G Collegare Modem 4G Zyxel LTE4506 a rete LAN Reti LAN e Wireless 1
L Collegare un form html ad un database access Javascript 2
xone [Offro] Realizzazione landing page da collegare a Facebook ads Offerte e Richieste di Lavoro e/o Collaborazione 2
P App per collegare android ad un sito web Sviluppo app per Android 3
M Collegare due NVR nella stessa rete IP Cam e Videosorveglianza 0
R Collegare Range Exender tramite cavo ethernet direttamente al modem Reti LAN e Wireless 6
romeocharly come collegare un id di mysql con un file specifico PHP 5
romeocharly Creare un script/codice in php per collegare un id mysql con un file PHP 0
M collegare tasti radio con e mail PHP 4
ecosito Collegare un modulo contatti PHP su un modulo contatti HTML HTML e CSS 1
C Come collegare una pagina ad un bottone su mit app inventor Presentati al Forum 1
A Come collegare i valori di due caselle di una maschera MS Access 0
M Collegare 3 tabelle PHP 8
K Collegare rete domestica a modem webpocket 42 Reti LAN e Wireless 1
filippino Collegare pagina Google+ al sito web. Social Media Marketing 1
M collegare immagini a report MS Access 1
C Info wifi collegare dispositivi apple Windows e Software 1
Z Collegare canale youtube a pagina Google+ Social Media Marketing 0
L Collegare un virus VBScript a un link?? Sicurezza e Virus 0
Gioweb [risolto] Modo migliore per collegare sito esterno al database PHP 4
braccobaldo Collegare Canale Youtube ad una pagina Fan di Facebook Social Media Marketing 1
N Collegare IP cam in rete con forwarding IP Cam e Videosorveglianza 1
P Posso collegare un $_POST a una veriabile? Aiuto PHP 6
D Ati HD 7750 collegare 2 monitor? Hardware 2
P Collegare un domio con uno spazio web Hosting 3
R Collegare tabella mysql di aruba ad una pagina php PHP 6
S Collegare 2 funzioni javascript Javascript 2
F Collegare la registrazione del sito a quella del forum phpBB 1
G collegare funziona javascript da html Javascript 3
S collegare ajax con php Ajax 12
L Collegare database a Jquery Ui Tabs PHP 0
F integrare/collegare twitter al proprio sito PHP 1
M Come collegare un pc con la lan ad un pc collegato con la wifi tramite usb Reti LAN e Wireless 5
Frank10 Collegare php con html PHP 7
I collegare dreamweaver a database sql HTML e CSS 1
B collegare telecamera a media player Javascript 0
V problema per collegare tabelle MySQL 2
P Collegare twitter a facebook Discussioni Varie 4
K Collegare Pc fisso a un router wi-fi Reti LAN e Wireless 1
A Collegare clipfilmato Flash 0
renoir09 Collegare post da profilo facebook su altro sito SEO e Posizionamento 1
O Problemi con MAMP OS X non riesco a collegare dreamweaver al database PHP 0
K ecommerce: collegare software gestione magazzino al sito Discussioni Varie 1
T come collegare un FORM MAIL HTML e CSS 3
C collegare un db access ad un file asp Classic ASP 2
W collegare Dreamweaver MX con database Database 1
A collegare le pagine di un sito Webdesign e Grafica 3
F collegare flash con php attraverso input text (as3) Flash 1
B collegare un utente ad un ordine PHP 0

Discussioni simili