Problema con OnClick Javascript

C

CjCreations360

Utente Attivo
7 Feb 2016
32
0
6
Buongiorno Ragazzi sono nuovo percio scusatemi per qualsiasi errore o sbaglio e correggetemi in caso di cose o atteggiamenti sbagliati in questo forum.
Finita la premessa vi rigrazio in anticipo per la pazienza e spero di essere nel posto giusto per risolvere il problema.
Sto creando un app che funziona con vari div contenitori che ne compongono le varie sezioni, all interni di ogni container vi sono altri div ch compongono gli elementi di ogni parte etc etc..
Tutto normale fino a questo punto, alcuni dei div interni dei contenitori contngono la funzione onclick che fa in modo che scompaia uno dei div container e venga sostituito con un altro.
Ora qui nasce il mio problema...(premetto che sto usando le misure vmax e vmin per rendere la mia app responsive in ogni tipo di device)i div con la funzione onclick associata funzionano pefrettamente ma solo da meta container in poi al di sopra invece non vanno.
Il codice e lo stesso che uso per tutte le funzioni ma meta in su non va.
Spero di essere stato chiaro nel spiegare il mio problema e che questa sia la sezione giusta e soprattutto che riusciate a risolvere il mio problema...grazie mille per tutto in anticipo!
P.S. Se vi serve qualche riga del codice fatemi sapere che lo posto.
P.P.S. Da notare che il div con la funzione al di fuori del div container funziona perfettamente a prescindere del suo posizionamento.
 
Ultima modifica:
ti posto il codice cmq per farti chiarezza sto usando intel xdk non so se questo fa qualche differenza o meno.
Grazie mille per la tua attenzione ed il tuo aiuto!
 
Ultima modifica:
questa e la pagina principale...
HTML: 
<style>         
html, 
body
{
height:100%;
width:100%;
margin:0;
padding:0;
    font-size:1vmax;
}

</style>
    <style>
    #dietro{position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:black;
    z-index: -50;}</style>
   

    

</head>


<body>

    <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
    <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
    <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
    <div id="dietro"></div>
    <audio src="Ambient.mp3" autoplay loop></audio>
    <div id="contenitorelogocopertina">
<div id="cellulare"></div>
        <div id="letC" class="fontbis">C</div>
        <div id="letJ" class="fontbis">J</div>
        <div id="let360" class="fontbis">360&ordm;</div>
        <div id="scritta" class="fontbis">creations</div>
        <div id="cornice"></div>
        <div id="titolo" class="font">La Luna...<br>&nbsp;&nbsp;&nbsp;il sangue</div> 
        <div id="sottotitolo" class="font">Morte e Rinascita</div>
        <div id="capitolo" class="font" class>Capitolo Uno</div>
        <div id="titolocapitolo" class="font">&quot;Risveglio&quot;</div>
        <div id="sfondo"><img src="lunasanguecomic.png"></div>
        <div id="avanti" class="font" onclick="prosegui()">Tocca per continuare...</div>
    </div> 
    
    <div id="contenitoremenuprincipale">

        <div id="titoloprincipale" class="font">Capitolo Uno<br>&quot;Risveglio&quot;</div><div id="backuno"><img src="luna.jpg"></div>
        <div id="backdue"><img src="lupo.jpg"></div>
         <div id="voceleggi" class="font" onclick="proseguidue()">Leggi Capitolo</div>
        <div id="vocecs" class="font" onclick="proseguicinque()">Contenuti Speciali</div>
        <div id="vocena" class="font" onclick="proseguisette()">News &amp; Anteprime</div>
        <div id="vocenc" class="font" onclick="proseguinove()">Note e Crediti</div>
        
    </div>
    
     
    <div id="contenitoreleggicap">
        <div id="inizio" class="font" onclick="proseguidodici()">Leggi dall'inizio</div>
        <div id="segnalibro" class="font">Segnalibro</div>
        <div id="scegli" class="font" onclick="proseguitre()">Scegli Parte</div>
   <div id="torna6" class="font" onclick="proseguiundici()">Torna al Menu Principale</div>
    </div>
    
     
    <div id="contenitorescegliparte">
        <div id="riquadro"><img src="parti.jpg"></div>
        <div id="prefazione" class="font"><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Prefazione</div>
        <div id="prima" class="font">&nbsp;Prima parte<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ritorno</div>
        <div id="seconda" class="font">&nbsp;Seconda Parte<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Trasformazione</div>
        <div id="terza" class="font">&nbsp;Terza Parte<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Caccia</div>
        <div id="anticipazione" class="font">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Verso la<br>&nbsp;&nbsp;&nbsp;prossima Luna</div>
        <div id="torna2" class="font" onclick="proseguiquattro()">Torna Indietro</div>

    </div>
    
     
    <div id="contenitorecontenutispeciali">
 <div id="torna3" class="font" onclick="proseguisei()">Torna al Menu Principale</div>
        
        
        
    </div>
    
     
    <div id="contenitorenewsanteprime">
        <div id="news" class="font">News</div>
        <div id="anteprime" class="font">Anteprime</div>
         <div id="torna4" class="font" onclick="proseguiotto()">Torna al Menu Principale</div>

    </div>
    
     
    <div id="contenitorenotecrediti">
        <div id="note" class="font">Note</div>
        <div id="crediti" class="font">Crediti</div>
         <div id="torna5" class="font" onclick="proseguidieci()">Torna al Menu Principale</div>

    </div>
    
    <div id="pagina1">
    
    
    
    
    </div>
 
Ultima modifica di un moderatore:
questo e il foglio esterno di javascript con le varie funzioni......

Codice: 
function prosegui(){document.getElementById("contenitorelogocopertina").style.display="none";
                       document.getElementById("contenitoremenuprincipale").style.display="block";}

function proseguidue(){document.getElementById("contenitoremenuprincipale").style.display="none";
                       document.getElementById("contenitoreleggicap").style.display="block";}


function proseguiundici(){document.getElementById("contenitoremenuprincipale").style.display="block";
                       document.getElementById("contenitoreleggicap").style.display="none";}


 function proseguitre(){document.getElementById("contenitoreleggicap").style.display="none";
                       document.getElementById("contenitorescegliparte").style.display="block";}


 function proseguiquattro(){document.getElementById("contenitorescegliparte").style.display="none";
                       document.getElementById("contenitoreleggicap").style.display="block";}

 function proseguicinque(){document.getElementById("contenitoremenuprincipale").style.display="none";
                       document.getElementById("contenitorecontenutispeciali").style.display="block";}

 function proseguisei(){document.getElementById("contenitoremenuprincipale").style.display="block";
                       document.getElementById("contenitorecontenutispeciali").style.display="none";}

 function proseguisette(){document.getElementById("contenitoremenuprincipale").style.display="none";
                       document.getElementById("contenitorenewsanteprime").style.display="block";}

 function proseguiotto(){document.getElementById("contenitoremenuprincipale").style.display="block";
                       document.getElementById("contenitorenewsanteprime").style.display="none";}

 function proseguinove(){document.getElementById("contenitoremenuprincipale").style.display="none";
                       document.getElementById("contenitorenotecrediti").style.display="block";}

 function proseguidieci(){document.getElementById("contenitoremenuprincipale").style.display="block";
                       document.getElementById("contenitorenotecrediti").style.display="none";}

function proseguidodici(){document.getElementById("contenitoreleggicap").style.display="none";
                       document.getElementById("pagina1").style.display="block";}
 
Ultima modifica di un moderatore:
questo e il foglio css relativo ai contenitori.....


Codice: 
#contenitorelogocopertina{
       display:block;
      position:relative;
    top:50%;
    left:50%;
    height:100vmax;
    width:50vmax;
    margin-top:-50vmax;
    margin-left:-25vmax;
        background-color:black;
        z-index:-10;
    }

    @media only screen and (orientation:landscape){
    #contenitorelogocopertina{transform:rotate(90deg);
   }}

  #contenitoremenuprincipale{
        display:none;
      position:relative;
    top:50%;
    left:50%;
height:99vmax;
    width:49vmax;
    margin-top:-50vmax;
    margin-left:-25vmax;
        background-color:black;
        z-index:-10;
    }

    @media only screen and (orientation:landscape){
    #contenitoremenuprincipale{transform:rotate(90deg);
   }}

  #contenitoreleggicap{
        display:none;
      position:relative;
    top:50%;
    left:50%;
      height:100vmax;
    width:50vmax;
    margin-top:-50vmax;
    margin-left:-25vmax;
        background-color:black;
        z-index:-10;
    }

    @media only screen and (orientation:landscape){
    #contenitoreleggicap{transform:rotate(90deg);
   }}
   
  #contenitorescegliparte{
        display:none;
      position:relative;
    top:50%;
    left:50%;
    height:100vmax;
    width:50vmax;
    margin-top:-50vmax;
    margin-left:-25vmax;
        background-color:black;
        z-index:-10;
    }

    @media only screen and (orientation:landscape){
    #contenitorescegliparte{transform:rotate(90deg);
   }}

  #contenitorecontenutispeciali{
        display:none;
      position:relative;
    top:50%;
    left:50%;
    height:100vmax;
    width:50vmax;
    margin-top:-50vmax;
    margin-left:-25vmax;
        background-color:black;
        z-index:-10;
    }

    @media only screen and (orientation:landscape){
    #contenitorecontenutispeciali{transform:rotate(90deg);
   }}

  #contenitorenewsanteprime{
        display:none;
      position:relative;
    top:50%;
    left:50%;
    height:100vmax;
    width:50vmax;
    margin-top:-50vmax;
    margin-left:-25vmax;
        background-color:black;
        z-index:-10;
    }

    @media only screen and (orientation:landscape){
    #contenitorenewsanteprime{transform:rotate(90deg);
   }}

  #contenitorenotecrediti{
        display:none;
      position:relative;
    top:50%;
    left:50%;
    height:100vmax;
    width:50vmax;
    margin-top:-50vmax;
    margin-left:-25vmax;
        background-color:black;
        z-index:-10;
    }

    @media only screen and (orientation:landscape){
    #contenitorenotecrediti{transform:rotate(90deg);
   }}
 
Ultima modifica di un moderatore:
Questo ultimo codice e relativo al contenitore leggi cap, la prima voce leggi dall inizio e la terza scegli parte sono legati ad una funzione onclick che apre dei relativi div container chiudendo quello in cui si trovano...scegli parte funziona essendo da meta in poi della pagina..leggi dall inizio no trovandosi nella parte superiore....

Codice: 
#inizio{position:absolute;
top:19.5vmax;
left:7.5vmax;
height:19vmax;
width:34vmax;
border:groove 0.5vmax red;
box-shadow:0vmax 0vmax 0.5vmax 0.5vmax red inset;
    color:red;
    font-size:7vmax;
    text-align:center;
}

#segnalibro{position:absolute;
top:39.5vmax;
left:7.5vmax;
height:19vmax;
width:34vmax;
border:groove 0.5vmax red;
    line-height: 19vmax; 
box-shadow:0vmax 0vmax 0.5vmax 0.5vmax red inset;
color:red;
    font-size:7vmax;
    text-align:center;
}

#scegli{position:absolute;
    top:59.5vmax;
    left:7.5vmax;
    height:19vmax;
    width:34vmax;
    line-height:19vmax;
    border:groove 0.5vmax red;
    box-shadow:0vmax 0vmax 0.5vmax 0.5vmax red inset;
    color:red;
    font-size:7vmax;
    text-align:center;
}

#torna6{position:absolute;
    top:92vmax;
    left:0vmax;
    height:7vmax;
    width:49vmax;
    font-size:4.5vmax;
    color:red;
    text-align:center;
}
 
Ultima modifica di un moderatore:
Scusa per tutto sto codice e spero soprattutto che ti aiuti a capirci qualcosa!
P.S. Sono autodidatta e sto imparando un po alla volta percio non scandalizzarti troppo per la ciofeka del mio codice.
Grazie ancora e scusa se approfitto tanto. Buonanotte!!!
 
Innanzitutto grazie per le tue risposte, programmando direttamente con intelxdk(non so se lo conosci o lo hai mai usato) lui ha unafunzione emulazione per poter vedere il funzionamento della propria creazione su vari tipi di smartphone, tablet o notebook dove il mouse sostituisce il tocco ed in piu si puo scaricare la relativa app sul proprio dispositivo per testare il proprio lavoro dal vivo.
Errori non ne da di nessun tipo e semplicemente che toccando il div con la relativa funzione non va, non reaggisce invece gli altri si...
Dato che non sono esperto e sto imparando le cose un po alla volta ho studiato un modo tutto mio(per modo di dire) per far visualizzare la mia app sempr in portrait facendo girare il container di 90 gradi tramite una mediaqueries quando il dispositivo e in landscape, e funziona perfettamente in queto modo gli elementi al suo interno posizionati in maniera assoluta ruotano relativi al contenitore mantenendo sempre la loro posizione in verticale.
per questo i miei div devono rimanere al suo interno ma cosi non funziona quelli in alto.
Per farti capire...i vari contenitori hanno una misura di 100vmax height e 50vmax widh, una volta centrato questo contenitore e identico su qualsiasi tipo di dispositivo lo utilizzi e mantendendo le misure i tutto il resto in vmax rimane ogni cosa sempre proporzionale al device che lo visualizza.
i div con la funzione onclick che sono posizionato dai 50vmax circa ai 100vmax vanno tranquillamente, da 0vmax a 50vmax non ne vogliono sapere,
Fuori dal conbtenitore funziona normalmente ma cosi facendo una volta ruotato il dispositivo il mio div si trova in alto rispetto all orientamento orizzontale e non a quello verticale.
Lo so tante parole e poca chiarezza ma e da un sacco di tempo che sbatto la testa e so che probabilmente la soluzione e un niente ma non riesco proprio a trovarlo quel niente.
Grazie per la pazienza!!
 
è solo un'ipotesi, ma hai verificato che le funzioni associate ai div che scompaiono abbiano al loro interno le direttive giuste per nascondere il div in questione e non un altro?
Se, per esempio, hai
Codice: 
<script>
function divTest(){
  document.getElementById("altroDiv").style.display = "none";
}
</script>
<div id="test" onclick="divTest();"></div>
Il div "test" non scomparirà se cliccato.
So che può sembrare banale, ma a volte i bug di cui non si capisce l'origine sono dovuti a sciocchezze del genere :)
 
pultroppo si infatti se il div in questione viene messo al di fuori del contenitore nella stessa identica posizione funziona alla perfezione una volta reinserito nel container continua a non funzionare....sigh:(
ma questo problema e con ogni contenitore non solo in quel caso...io stavo pensando che per centrare i contenitori ho usato la tecnica del top 50% left 50% e poi margin-top -50vmax(che nel mio caso e la meta dei 100vmax del height) e margin-left -25vmax(la meta dei 50vmax del width) non e che cosi ho centrato ma sbagliato in qualcosa con i margini? Forse dovevo mettere margin-down e margin-right oppure boh...le sto pensando tutte!!!!
 
Ho appena fatto una prova modificando margin top con down e left con right...naturalmente sbagliavo perke il div si e completamente decentrato spostandosi in basso a destra ma vuoi sapere la cosa paradossale...il mio onclick cosi funziona!
Non ci sto capendo un acca!!!!!
 
Risolto!!! Il problema era nel z-index...a quanto pare l'html ed il body lo hanno a zero e tutti gli altri contenuti lo hanno con valore negativo...essendo i contenitori impostati a top e left 50% anche se a livello estetico sono al centro della pagina ma per il codice sono a metà percio tutto cio che e sulla pagina al di sopra non era funzionale perche davanti si trovava il body...ho risolto il problema dando ai contenitori ed al loro contenuto un valore zindex positivo e di conseguenza superiore al livello di html e body! Grazie cmq di tutto!
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

L
Problema onClick con un menu a tendina
Risposte
3
Visite
3K
Javascript
criric
criric
F
Javascript: problema con onclick event
Risposte
3
Visite
5K
Javascript
f107
f107
voldemort
Problema in Shopify con Pixel Facebook
Risposte
1
Visite
2K
E-Commerce
m.pittini
M
O
problema con dvr dahua xvr5116
Risposte
0
Visite
1K
IP Cam e Videosorveglianza
oky74
O
G
Problema con Xampp
Risposte
1
Visite
1K
Web Server
GreatOtaku
G
andrea barletta
Problema con miniature comandi
Risposte
0
Visite
1K
Photoshop
andrea barletta
andrea barletta
I
problema con alice
Risposte
0
Visite
1K
Posta Elettronica
ilprincipiante
I
N
Problema con position absolute e overflow
Risposte
4
Visite
1K
HTML e CSS
Nocciolina
N
L
Problema con inner join
Risposte
11
Visite
2K
PHP
marino51
marino51
K
[php] Problema con inner join
Risposte
4
Visite
1K
PHP
Kiko74b
K
K
[PHP] Problema con variabili concatenate.
Risposte
1
Visite
1K
PHP
thanatos
T
O
  • Bloccata
problema con query
Risposte
4
Visite
2K
PHP
Odino7009
O
I
problema con 2 account
Risposte
1
Visite
2K
Posta Elettronica
WmbertSea
WmbertSea
L
problema collegamento file css con html
Risposte
1
Visite
1K
HTML e CSS
WEBLEADERS
W
E
Problema accesso a file con app sviluppata con MIT APP INVENTOR 2
Risposte
0
Visite
3K
Sviluppo app per Android
emanuelespinelli
E
M
Problema con Try Catch
Risposte
0
Visite
2K
PHP
migo80
M
Sergio Unia
Problema con gli eventi del mouse su una data table:
Risposte
2
Visite
2K
Javascript
Sergio Unia
Sergio Unia
T
PROBLEMA CON SESSIONI
Risposte
3
Visite
2K
PHP
thanatos
T
T
  • Bloccata
ALTRO PROBLEMA CON ARRAY PHP
Risposte
1
Visite
1K
PHP
Max 1
Max 1
R
problema con else
Risposte
0
Visite
686
PHP
REddiy6
R
Alto Basso