Problema con OnClick Javascript

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:

CjCreations360

Utente Attivo
7 Feb 2016
32
0
6
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:

CjCreations360

Utente Attivo
7 Feb 2016
32
0
6
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:

CjCreations360

Utente Attivo
7 Feb 2016
32
0
6
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:

CjCreations360

Utente Attivo
7 Feb 2016
32
0
6
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:

CjCreations360

Utente Attivo
7 Feb 2016
32
0
6
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:

CjCreations360

Utente Attivo
7 Feb 2016
32
0
6
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!!!
 

CjCreations360

Utente Attivo
7 Feb 2016
32
0
6
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!!
 

Altutto

Utente Attivo
30 Set 2013
262
0
16
stubborn.altervista.org
è 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 :)
 

CjCreations360

Utente Attivo
7 Feb 2016
32
0
6
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!!!!
 

CjCreations360

Utente Attivo
7 Feb 2016
32
0
6
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!!!!!
 

CjCreations360

Utente Attivo
7 Feb 2016
32
0
6
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!
 
Discussioni simili
Autore Titolo Forum Risposte Data
L Problema onClick con un menu a tendina Javascript 3
F Javascript: problema con onclick event Javascript 3
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
N Problema con position absolute e overflow HTML e CSS 4
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
K [PHP] Problema con variabili concatenate. PHP 1
O problema con query PHP 4
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
M Problema con Try Catch PHP 0
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
G Problema con Get page PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
G Problema con eccessiva nitidezza apertura Camera Raw Photoshop 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
T problema con select dinamica con jquery Javascript 0
S Problema con spazi bianchi HTML e CSS 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
Tommy03 Problema con z-index HTML e CSS 3
M Problema inserimento parole con apostrofo nel db PHP 5
C Problema con dati meteo xml XML 1
S Problema con infrarossi videocamera IP Cam e Videosorveglianza 1
V Problema con librerie allegro5 c++ C/C++ 1
M Problema con php per calcolo costo percentuale PHP 7

Discussioni simili