Printable View
Salve,
volevo sapere dove posso trovare uno script per far si che quando clicco su un link compare un div con effetto tendina verso il basso e quando si chiude il contrario verso l'alto... pero ho più div che dovrebbero fare questa cosa e ognuno ha un id, che pero è dinamico! Sapete come posso fare? Grazieee
Se magari ci dai qualche info in più.
Che vuoi dire con "hanno id dinamico"? Ok che cambia, ma avrai qualcosa per individuarli?
prova a descrivere, o meglio posta un po' di codice, su quello che vuoi fare e come ti stai muovendo.
Si allora, praticamente ho dei messaggi in un database e ho un "for" che li stampa tutti. Ogni messaggio ha un id! Questo è il codice per ogni post.
E NELLA HEAD HO QUESTO JS http://colore123.altervista.org/animatedcollapse.jsCodice HTML:<div class="message-box">
<p class="info">
<a href="folder/profile.php">user</a>
</p>
<p class="message">
Prova
</p>
</div>
<a href="javascript:collapse1.slidedown()">Apri</a>
<a href="javascript:collapse1.slideup()">Chiudi</a>
<div id="ID MESSAGGIO" class="hidden-info">
INFO NASCOSTE
</div>
<script type="text/javascript">
var collapse1=new animatedcollapse("ID MESSAGGIO", 1000, false)
</script>
l'HO preso da internet perche di js non so assolutamente niente! gRAZIE IN ANTICIPO
Cos'è che non riesci a fare esattamente?
Hai inserito pure jQuery?
No jQuery non l'ho inserito! Il fatto è che mi serve che questo codice funzioni per più div e non solo per uno dato che i messaggi sono molti! Ma va solo con uno :(
Sulla pagina di Dynamic Drive nelle istruzioni è specificato di inserire due file (jQUery e animatedcollapse.Citazione:
Originalmente inviato da colore123
Magari indica la pagina dove vedere che hai fatto.
Lo preso ha html.it ma non c'era scritto di inserire jquery
http://javascript.html.it/script/ved...iv-a-comparsa/
Non conosco il codice dello script ma dalla pagina di Dynamic Drive (autore dello script, citato pure da html.it) puoi vedere dopo step1 che ti vien detto di includere
A prescindere da questo, linka una pagina dove poter vedere all'opera quello che hai fatto.Codice PHP:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">
L'ho inserito e questo è il link http://colore123.altervista.org/Copia_di_newindex2.html ma anche se metto due box che devo aprirsi comunque non va! Funziona sempre e solo con un solo bx
Nella pagina linkata è presente un solo box.Citazione:
Originalmente inviato da colore123
Metti magari la pagina che non riesci a far funzionare
Ok ho inserito un altro box sempre nella stessa pagina! :)
devi inizializzare ogni box (che deve avere un ID unico - non tutti dog nel tuo caso)
Si ora cambio, scusa! Ma ti anticipo che comunque ho provato di tutto compreso id diversi ma comunque non va
non
maCodice PHP:var collapse1=new animatedcollapse("dog2", 1000, false)
uno per ogni DIVCodice PHP:var collapse1=new animatedcollapse("dog", 1000, false);
var collapse2=new animatedcollapse("dog2", 1000, false);
Si ma comunque non va! Non vorrei inserire uno script per ogni post... si apesantirebbe molto la pagina
infatti quello script non credo sia pensato per qual genere di pagine.
Gia penso non si possa fare... in ogni caso se volessi fare una cosa del genere ma senza scomparsa a tendina... una cosa cosi andrebbe bene?
#dog {
display: none;
}
<script>
function show () {
getElementByID(dog).style.display = 'inline';
}
function hide () {
getElementByID(dog).style.display = 'none';
}
</script>
<a href="#" onclick="javascript: show()">Apri</a>
<a href="#" onclick="javascript: hide()">Chiudi</a>
E funzionerebbe con molti div? Ho visto che la funzione puo essere realizzata anche cosi function show(number) (a cosa serve?)
Grazeee...
stavo guardando meglio il codice precedente e dovresti, per farlo funzionare richiamare la funzione js corretta, quindi collapse1, collapse2, ...
show(milliseconds), il numero di millisecondi relativo alla durata dell'animazione.
cmq, anche il farlo funzionare a scomparesa non è così difficile ...
Si gia ho provato ma non va comunque!
Il codice che ho scritto non fiunziona... sai il perche?
Cosa intendi che non è difficile farlo funzionare a scomparsa?? Intendi a realizzare leffeto?
Ho modificato leggermente la tua pagina (tolto completamente lo script e usato due funzioni con l'ausilio di jQuery).
Quello che ne è venuto fuori non è bellissimo, scalabilissimo, ... ma funziona
Codice PHP:<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function openDiv(el) {
$('#' + el).slideDown();
}
function closeDiv(el) {
$('#' + el).slideUp();
}
</script>
<style>
html, body {
margin: 0px;
padding: 0px;
background-color: #ACDED6;
background-repeat: no-repeat;
background-attachment: fixed;
width: auto;
height: auto;
clear: both;
font-family: tahoma,verdana,arial,sans-serif;
color: black;
}
.post-box {
background: white;
width: 96%;
margin-top: 0px;
margin-bottom: 0px;
padding: 2%;
float: left;
text-align: left;
top: 0;
bottom: 0;
position: relative;
height: auto !important;
height: 68px;
min-height: 48px;
margin-left: 0px;
border-bottom: 1px solid black;
line-height: 18px;
position: relative;
}
.img-post-box {
width: 58px;
float: left;
}
.post-img {
width: 48px;
height: 48px;
position: absolute;
}
.message-post-box {
vertical-align: top;
overflow: hidden;
float: top;
margin-left: 58px;
padding: 0px;
margin-top: 0px;
}
.message {
font-size: 14px;
margin-top: 2px;
margin-bottom: 0px;
padding: 0px;
float: top;
}
.info-name {
font-size: 14px;
float: left;
text-align: left;
padding: 0px;
margin: 0px;
}
.hidden-post-info {
margin-left: 10%;
margin-right: 10%;
width: 80%;
float: top;
margin-top: 0px;
display: none;
}
</style>
</head>
<body>
<div class="post-box">
<div class="img-post-box">
<img class="post-img" src="http://colore123.altervista.org/img/default_profile.jpg" />
</div>
<div class="message-post-box">
<p class="info-name"><a class="user" href="folder/profile.php">User</a></p> <br>
<p class="message">Prova1Prova1Prova1Prova1Prova1Prova1Prova1Prova1Prova1Prova1<br><br><br>
<a href="javascript:openDiv('dog1')">Apri</a>
</p>
</div>
<div id="dog1" class="hidden-post-info">
ELEMENTI NASCOSTI
<a href="javascript:closeDiv('dog1')">Chiudi</a>
</div>
</div>
<div class="post-box">
<div class="img-post-box">
<img class="post-img" src="http://colore123.altervista.org/img/default_profile.jpg" />
</div>
<div class="message-post-box">
<p class="info-name"><a class="user" href="folder/profile.php">User</a></p> <br>
<p class="message">Prova2Prova2Prova2Prova2Prova2Prova2Prova2Prova2Prova2Prova2<br><br><br>
<a href="javascript:openDiv('dog2')">Apri</a>
</p>
</div>
<div id="dog2" class="hidden-post-info">
ELEMENTI NASCOSTI
<a href="javascript:closeDiv('dog2')">Chiudi</a>
</div>
</div>
</body>
</html>
No invece è perfetto ahaha!!! Grazie mille non so come avrei fatto senza te :)
Grazieeee ancoraaaaa
E' un diavolo, è stupendo, e serviva anche a me. Di una bravura eccezionale. Molto obbligato.Citazione:
Originalmente inviato da colore123
Posso aiutarti con un comando html: ecco te lo lascio
Io ho fatto così sul mio sito, poi regolati tu con l'url delle immagini e le altre cose.Codice HTML:<a href="javascript://" onclick="$('#4-menu').slideToggle('slow');" class="zagruzka-plus_menu-main" title="Categoria"><img src="Url Immagine" alt="">Categoria<img src="Url Immagine per freccia in basso" alt="" style="margin:0"></a>
<div id="4-menu" class="zagruzka-plus_menu-box" style="padding-bottom: 5px; display: none;">
<a href="http://downloadeguide.altervista.org/blog/category/giochi-pc/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi PC</a><br>
<a href="http://downloadeguide.altervista.org/blog/category/giochi-ps3" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi PS3</a><br>
<a href="http://downloadeguide.altervista.org/blog/category/giochi-xbox360" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi XBOX-X360</a><br>
<a href="http://downloadeguide.altervista.org/blog/category/wii-u/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi WII U</a><br>
<a href="http://downloadeguide.altervista.org/blog/category/giochi-wii/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi WII</a><br>
<a href="http://downloadeguide.altervista.org/blog/category/giochi-ps2/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi PS2</a><br>
<a href="http://downloadeguide.altervista.org/blog/category/giochi-ps1/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi PS1</a><br>
<a href="http://downloadeguide.altervista.org/blog/category/giochi-psp/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi PSP</a><br>
<a href="http://downloadeguide.altervista.org/blog/category/giochi-nds/" class="ss-menu"><img src="http://ddlvillage.org/templates/tbstudio/dleimages/game_pad.png" alt="">Giochi NDS</a><br>
</div>
È una discussione di quattro anni fa, come da regolamento non riesumate vetuste discussioni.
Chiudo.