Ciao a tutti,sto cercando di far apparire un div nascosto con mootools con effetto fade in, inoltre se io clicco su questo pulsante quando il div è aperto, il div si dovrebbe chiudere con effetto fade out. C'è qualcuno che sa aiutarmi???Grazie mille
Ciao a tutti,sto cercando di far apparire un div nascosto con mootools con effetto fade in, inoltre se io clicco su questo pulsante quando il div è aperto, il div si dovrebbe chiudere con effetto fade out. C'è qualcuno che sa aiutarmi???Grazie mille
lara
non l'ho provato ma dovrebbe funzionarecodice:window.addEvent('domready',function(){ $('id_pulsante').addEvent('click',function(){ $('id_tuodiv').morph({opacity: 1}); }) $('id_tuodiv').addEvent('click',function(){ $('id_tuodiv').morph({opacity: 0}); }) })
Non sempre essere l'ultimo è un male... almeno non devi guardarti le spalle
il mio profilo su PHPClasses e il mio blog laboweb
non so perchè ma non mi funziona...provo a postare il codice...
<script type="text/javascript">
window.addEvent('domready',function(){
$('click1').addEvent('click',function(){
$('content1').morph({opacity: 1});
})
$('content1').addEvent('click',function(){
$('content1').morph({opacity: 0});
})
})
</script>
<body>
<h1 id="click1">Click </h1>
<div id="content1" style="display:none">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris porttitor felis sit amet elit. Nunc mi odio, pulvinar sed, facilisis non, fringilla nec, nisl. Nunc tristique neque eu urna. Sed sagittis nulla eu est. Pellentesque accumsan. Pellentesque posuere feugiat neque. In hac habitasse platea dictumst. Donec sit amet augue. Morbi quis nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus non quam nec nisl vulputate tempus. Aliquam quis ipsum. Pellentesque quis nisi ut felis suscipit feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tempus neque non nisl.
</p>
</div>
</body>
scusa...ma sono nuova di mootools, di solito utilizzo jquery ma in questo caso non ho potuto
lara
se al div dai display: none è normale che non funzioni...
così funziona per esempio
codice:<script type="text/javascript"> window.addEvent('domready',function(){ $('click1').addEvent('click',function(){ $('content1').morph({opacity: 1}); }) $('content1').addEvent('click',function(){ $('content1').morph({opacity: 0}); }) $('content1').setStyle('opacity',0); }) </script> <body> <h1 id="click1">Click </h1> <div id="content1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris porttitor felis sit amet elit. Nunc mi odio, pulvinar sed, facilisis non, fringilla nec, nisl. Nunc tristique neque eu urna. Sed sagittis nulla eu est. Pellentesque accumsan. Pellentesque posuere feugiat neque. In hac habitasse platea dictumst. Donec sit amet augue. Morbi quis nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus non quam nec nisl vulputate tempus. Aliquam quis ipsum. Pellentesque quis nisi ut felis suscipit feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tempus neque non nisl. </p> </div>
Non sempre essere l'ultimo è un male... almeno non devi guardarti le spalle
il mio profilo su PHPClasses e il mio blog laboweb
Probabilmente interviene (dovrebbe intervenire) un altro script su quel div id="content1" che come prima cosa commuta display: none; in display: block; o inline
dimodoché vecchi Navigatori che non supportano opacity vedranno ancora il DIV passare da invisibile/visibile pur senza dissolvenza.
Come pure, su Navigatori che pur moderni usassero linguaggi non previsti nello SCRIPT per gestire questa proprietà di STYLE.
Ad esempio,
IExplorer vuole filter: alpha(opacity=50);
Netscape/Mozilla -moz-opacity:0.5;
-khtml-opacity: 0.5; per Konqueror prima che si fondesse con Safari.
Safari, come per Netscape.
Il semplice opacity: 0.5; sarebbe il metodo ufficiale CSS-3 ma inizialmente ogni casa ha sfornato le proprie versioni di Browsers con direttive diverse.
Ne derivano analoghe differenziazioni nel linguaggio JavaScript per le stringhe indirizzate a gestire questa proprietà. Avremmo:
document.getElementById("content1").style.filter = "alpha(opacity=50)";
oppure
document.getElementById("content1").style.MozOpacity = 0.5;
È questo che ci fa trovare degli SCRIPT alquanto complicati quando si tratta di OPACITY, il fatto che si aprono con una sezione deputata a rilevare il tipo di Browser incontrato e a configurare talune variabili; poi procedono su queste.
C'è poi un bug con IExplorer 7, va assegnata una dimensine WIDTH o/e HEIGHT al DIV perché OPACITY funzioni.
Non sono per nulla pratico di Mootools e delle sue librerie, ma lo sono abbastanza di JS: se non risolvi, potremmo elaborare uno SCRIPT indipendente.
Puoi fare una prima esperienza se copi-incolli questo nel Blocco Note e lo salvi come filename.html poi lo apri con IExplorer; ad ogni click il valore dell' opacità si incrementa di +10 e ti compare un alert col valore raggiunto.Per averlo funzionante su Netscape/Mozilla-Firefox devi far entrare in gioco la stringa sottostante:codice:<html> <head> <script type="text/javascript"> var lull = 0 function show(){ var level = lull + 10; document.getElementById("content1").style.filter = "alpha(opacity="+level+")"; //document.getElementById("content1").style.MozOpacity = level; lull = level; alert(lull); } </script> </head> <body> <h1 id="click1" onclick='show();'>Click </h1> <div id="content1" style="height: 50px; background-color: #6060F0; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris portitor felis sit amet elit. </p> </div> </body> </html>
//document.getElementById("content1").style.MozOpaci ty = level;
liberandola dalle "//" slash che passerai in quella di sopra; gli incrementi anche saranno del tipo
0.1 invece che 10
Dovrebbe gradire anche:
//document.getElementById("content1").style.opacity = level;
La funzione poi si automatizza con un
setTimeout('show()', 1000);
(richiama la   show()   dopo 1 sec. come facevi manualmente dal link "Click"; e così via.)
che puoi mettere al posto dell' alert(lull); ma fai attenzione a non lasciare entrambi perché ora ti partirebbe una serie infinita di alert; finché il timeout resta ad un ritmo "lento", fai ancora a tempo a cliccare l' alert e semmai ricaricare/chiudere la pagina, ma se vai ad esempio, a 50 non ci riesci più e finisci per dover spengere il computer dal bottone.
nel Timer, 1000 = 1 secondo; 2000 = 2 sec.; l' unità di misure del tempo in JS è il millisecondo.
L' auto-esecuzione della funzione andrebbe poi interrotta con un IF Statement od un secondo Timer.
ottima documentazione
fortunatamente in mootools era già previsto il comportamento differente per i diversi browsers, e quindi con il semplice opacity ciò viene aggirato
si il problema era solo ed unicamente il display: none che ovviamente ha precedenza rispetto all' opacità.
i casi sono 2: se lei ha bisogno di avere il display: none sul div per poterlo omettere anche a livello di ingombri dalla pagina allora la mia soluzione non è quella finale ma ci si avvicina, viceversa funziona correttamente così in quanto appunto lavoriamo solo sull' opacity.
ottimo intervento comunque.. complimenti per la chiarezza
Non sempre essere l'ultimo è un male... almeno non devi guardarti le spalle
il mio profilo su PHPClasses e il mio blog laboweb
Permessi di invio
Rispondi quotando