[RISOLTO] [gdrCD 5.3] Comparsa testo DIV al click

[RISOLTO] [gdrCD 5.3] Comparsa testo DIV al click postato il 25/08/2015 17:29:00 nel forum programmazione, open source e hosting e modificato da irenes il 02/09/2015 19:10:16

Salve!

allora io ho questo script e relativo codice

<script>
$(document).ready(function(){
$(‘#boxContainer>div’).css(‘position’,‘absolute’).not(‘:first’).hide();
$(‘#boxContainer>ul>li>a’).click(function(){
$(‘#boxContainer>div’).fadeOut(1500).filter(this.hash).fadeIn(1500);
return false;
});
}
</script>

<div id="boxContainer">
<ul>
<li><div class="link"><a href="#div1">LinkProva1</a></div></li>
<li><div class="link"><a href="#div2">LinkProva2</a></div></li>

</ul>
<div class = "contenuto" id="div1">PROVA1/div>
<div class = "contenuto" id="div2">PROVA2</div>

</div>

In sostanza quello che voglio è che, data una lista di link, il contenuto visualizzabile in "contenuto" vari in base al link cliccato, con il contenuto di div 1 come quello di default. A cliccare sul link2 quello dovrebbe sparire e comparire il contenuto di div2 e via dicendo.

Quello che succede però è che nel div "contenuto" le scritte "prova1" e "prova2" risultano sovrapposte, sempre. A cliccare non cambia nulla. I vari Div non "spariscono", insomma, ma restano tutti, uno sull'altro.

Premesso che i file di jquery sono già richiamati nell'header.... come mai 'sta roba non funziona? xD

grazie per ogni eventuale aiuto :)

25/08/2015 18:52:39

qualcosa così intendi:

https://jsfiddle.net/x2Lob8zp/7/ https://jsfiddle.net/x2Lob8zp/7/ ↗

25/08/2015 20:36:27

Esatto Dyrr!
Grazie per la risposta, innanzitutto!

Ho provato ad applicare la soluzione che mi hai proposto ma... non funge : nel div "contenuto" vengono scritte, sovrapposte, sia "prova1" che "prova2"...segno che i div non si "nascondono" :

io non capisco: la pagina su cui lavoro è già inclusa [è della cartella pages], quindi dovrebbe di già richiamare l'header, dove è richiamato, a sua volta, jquery; ho messo lo script a inizio pagina... eppure non va : idee sul perchè e/o possibili soluzioni?

26/08/2015 14:08:33

Se il codice è quello che hai postato c'è scritto:

<div class = "contenuto" id="div1">PROVA1/div>
<div class = "contenuto" id="div2">PROVA2</div>

alla chiusura del div della prima riga manca '<'.

Ho provato a usare il tuo codice (con l'errore) e in effetti sovrappone i due div, correggendo il problema scompare :)

26/08/2015 15:09:29 e modificato da irenes il 26/08/2015 15:09:47

Grazie per la risposta! :)

comunque no, qui era un mio banale errore di "trascrizione". Nel codice la "<" c'è eppure non va :

<script type="text/javascript">
$('#boxContainer .content_guida').css('position','absolute').not(':first').hide();
$('#boxContainer ul li a').click(function(){
var target = $(this).attr('href');
return false;
});
</script>

<div class="pagina" id="boxContainer">

...

<ul>
<li><div class="link_back"><a href="#div1">LINK1</a></div></li>
<li><div class="link_back"><a href="#div2">LINK2</a></div></li>
</ul>

...

<div class = "content_guida" id="div1">PROVA1</div>
<div class = "content_guida" id="div2">PROVA2</div>

</div>

Ripeto che questo codice è dentro una pagina inclusa [dentro pages, insomma]: cosa mi sfugge? perchè non fa? :

26/08/2015 20:56:10

novità: confermo che quel codice, dentro la pagina inclusa non fa.

Se lo metto però nel file corfunction.js [contenente la libreria di base di JS di GDRCD].... tutto funge.

Sapete dirmi perchè? E, soprattutto: può creare problemi/danni se lo lascio lì?

26/08/2015 22:27:23

La pagina è una pagina a cui si può avere accesso esternamenta alla land?, oppure c'è un account con cui entrare e testare?

Te lo chiedo perchè sono curioso di capire quale può esser eil problema.

Eventualmente se non vuoi rendere pubblico il link, mandamelo pure via mp se ti va

26/08/2015 22:56:22

nessun problema Dyrr, anzi... grazie per la disponibilità! :)

appena torno a casa sistemo la situazione come in origine e ti faccio vedere il tutto :)

01/09/2015 00:22:59

Problemino con questo script.

Riprendo quello stesso postato da Dyrr

https://jsfiddle.net/x2Lob8zp/11/

come si può vedere nessun problema a cliccare sul primo e sul secondo link.

A cliccare sul terzo, però, il testo "torna" una seconda volta.
Come mai succede questo?

Chiedo perchè io avrei un alto numero di "link" e la cosa, in sè, è fastidiosa.

02/09/2015 16:35:01

il problema era dovuto alla callback del fadeIN() dopo che il fadeOut dei vari elementi era completato.
https://jsfiddle.net/x2Lob8zp/21/ ↗ https://jsfiddle.net/x2Lob8zp/21/

Ho risolto il problema togliendo il fadeIn() dalla callback e inserendolo fuori dal dadeout che probablmente faceva partire il fadeIn() più volte sincronizzandolo ocn la fine del fadeout con un delay() della durata del fadeOut():

Adesso la transazione dovrebbe essere anche più fluida.

02/09/2015 19:10:03

e in effetti funziona benissimo! Grazie mille :)