fading in

Le
jpll
Bonjour,
je monte un petit site (mainly php) pour ma commune où les habitants
peuvent intervenir.

Je mets à leur disposition une page où ils peuvent insérer du texte et
des photos à laquelle ils accédent par une interface qui se décompose
comme suit:
form
<div1> texte. 2 submit, 1- photo + 2- visualser </div>
<div2> file pour image/photo submit: vers script upload et retour à div1
avec insertion du lien </div>
<div3> visualisation. 2 submit. 1- enregistrement mysql 2- modifier
retour à div1 </div>
je fais apparaitre chacune des div selon les besoins par un aller retour
serveur/client en modifiant visibility dans mes css avec un switch php.

Ce que j'aimerais c'est obtenir un effet de fading up au chargement de
chacune des div.

Je suis nul en Java :( j'ai essayé du coté de Jquery mais sans grand
résultat.

Une idée? Merci
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #19161741
Le 4/21/09 2:12 PM, jpll a écrit :
Bonjour,
je monte un petit site (mainly php) pour ma commune où les habitants
peuvent intervenir.

Je mets à leur disposition une page où ils peuvent insérer du texte et
des photos à laquelle ils accédent par une interface qui se décompose
comme suit:
form
<div2> file pour image/photo submit: vers script upload et retour à div1
avec insertion du lien </div>
<div3> visualisation. 2 submit. 1- enregistrement mysql 2- modifier
retour à div1 </div>
je fais apparaitre chacune des div selon les besoins par un aller retour
serveur/client en modifiant visibility dans mes css avec un switch php.



bon ... si on veut ...
(on se demande pourquoi ce n'est pas le php qui envoie que le bon div)

Ce que j'aimerais c'est obtenir un effet de fading up au chargement de
chacune des div.

Je suis nul en Java :(



en JavaScript ! non ?

j'ai essayé du coté de Jquery mais sans grand résultat.



et du côté de Google ?

Une idée? Merci



Tenter l'Ajax pour la modif du div en 1 -> 2 -> 3 -> 1

css :
==== .fadder {
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
}

html :
===== <div class="fadder" id="leDiv1">
blabla
</div>
<div class="fadder" id="leDiv2">
blabla
</div>
<div class="fadder" id="leDiv3">
blabla
</div>

JS :
=== var n = 0;
function fadding(divId) {
n++;
if(n>0) n = 99;
var d = document.getElementById('leDiv').style;
d.filter = 'alpha(opacity= '+n+')';
d.MozOpacity = d.KHTMLOpacity = d.opacity = Math.floor(n/10)/10;
setTimeout('faddding('+divId+')', 50);
}
window.onload = function(){ fadding('<?php echo $div ?>'); };


--
sm
Pat.O'Beur
Le #19162501
SAM wrote:
je fais apparaitre chacune des div selon les besoins par un aller retour
serveur/client en modifiant visibility dans mes css avec un switch php.



bon ... si on veut ...
(on se demande pourquoi ce n'est pas le php qui envoie que le bon div)



c'était la méthode d'origine que j'ai modifié pour essayer d'y introduire du
javascript/Jquery sans grand résultat... Tout ce à quoi j'arrivais c'est
de faire descendre les div vers le bas de la page sans les cacher,
(toggle).


Ce que j'aimerais c'est obtenir un effet de fading up au chargement de
chacune des div.

Je suis nul en Java :(



en JavaScript ! non ?



euh oui. Les humbles excuses d'un amateur.


j'ai essayé du coté de Jquery mais sans grand résultat.



et du côté de Google ?



rien sinon des liens sur Jquery


Une idée? Merci



Tenter l'Ajax pour la modif du div en 1 -> 2 -> 3 -> 1

css :
==== > .fadder {
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
}

html :
===== > <div class="fadder" id="leDiv1">
blabla
</div>
<div class="fadder" id="leDiv2">
blabla
</div>
<div class="fadder" id="leDiv3">
blabla
</div>

JS :
=== > var n = 0;
function fadding(divId) {
n++;
if(n>0) n = 99;
var d = document.getElementById('leDiv').style;
d.filter = 'alpha(opacity= '+n+')';
d.MozOpacity = d.KHTMLOpacity = d.opacity = Math.floor(n/10)/10;
setTimeout('faddding('+divId+')', 50);
}
window.onload = function(){ fadding('<?php echo $div ?>'); };





ok merci. J'arrive même à le lire et plus ou moins à comprendre :)
Je teste ça demain.

--
SAM
Le #19164091
Le 4/21/09 9:24 PM, Pat.O'Beur a écrit :
SAM wrote:

j'ai essayé du coté de Jquery mais sans grand résultat.


et du côté de Google ?



rien sinon des liens sur Jquery



Bah! moi Google me propose Motools ... (encore pire quoi !)

c a d que ... charger tte une bibli juste pour un fadding
(qu'il faudra en outre jQuerrer)
c'est comme de prendre une masse pour enfoncer une punaise.

Par contre Google est + sympa si on lui demande : javascript fondu


Pour le JS donné, ça ira sans doute mieux comme ça :

var n = 0;
function fadding(divId) {
n += 1; // modifier ce '1' pour accélérer le fondu
if(n>0) n = 99;
var d = document.getElementById(divId).style;
d.filter = 'alpha(opacity= '+n+')';
d.MozOpacity = d.KHTMLOpacity = d.opacity = n/100;
if(n<95)
setTimeout('fadding("'+divId+'")', 50);
}

--
sm
jpll
Le #19168211
Le Wed, 22 Apr 2009 00:52:29 +0200, SAM a écrit:

Le 4/21/09 9:24 PM, Pat.O'Beur a écrit :
SAM wrote:

j'ai essayé du coté de Jquery mais sans grand résultat.


et du côté de Google ?



rien sinon des liens sur Jquery



Bah! moi Google me propose Motools ... (encore pire quoi !)

c a d que ... charger tte une bibli juste pour un fadding (qu'il faudra
en outre jQuerrer)
c'est comme de prendre une masse pour enfoncer une punaise.

Par contre Google est + sympa si on lui demande : javascript fondu


Pour le JS donné, ça ira sans doute mieux comme ça :

var n = 0;
function fadding(divId) {
n += 1; // modifier ce '1' pour accélérer le fondu if(n>0) n > 99;
var d = document.getElementById(divId).style; d.filter = 'alpha(opacity > '+n+')';
d.MozOpacity = d.KHTMLOpacity = d.opacity = n/100; if(n<95)
setTimeout('fadding("'+divId+'")', 50); }



Done! Merci :)
Etienne SOBOLE
Le #19243371
Tiens je ne connaissais pas

-khtml-opacity: 0;

ca sert pour quel navigateur ?
bon tu va me dire konkeror sans doute !
ca sert a d'autre ?

Etienne

css :
==== > .fadder {
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
}


SAM
Le #19243651
Le 5/2/09 10:13 AM, Etienne SOBOLE a écrit :
Tiens je ne connaissais pas

-khtml-opacity: 0;



Faut sortir un peu ;-)

ca sert pour quel navigateur ?
bon tu va me dire konkeror sans doute !



Il paraitrait.

ca sert a d'autre ?



Il parait que ça servait à Safari (2 et peut-être >1.6)

C'est comme -moz-opacity
... à quoi ça sert-il encore ?
... ça a du fonctionner dans 1 ou 2 versions, pas plus, non?

M'enfin ...
si ça n'fait pas d'bien ça n'fait pas d'mal non plus ;-)

--
sm
Publicité
Poster une réponse
Anonyme