Partage
  • Partager sur Facebook
  • Partager sur Twitter

Texte apparaissant en fondu et bloc s'ouvrant

    4 octobre 2009 à 20:51:33

    Bonjour.

    Je ne suis pas un as du javascript je le concède, mais j'ai quelques bases qui me permettent de m'en sortir en général.

    Sauf que là j'ai besoin de vous car je n'ai aucune idée de comment faire ce que je veux faire :)

    Un exemple :

    Un bloc avec un texte.

    L'utilisateur clique sur un lien quelconque, et là le texte disparait en fondu (je ne sais pas faire ;) ) puis le bloc s'aggrandi progressivement ou se diminue en fonction de la taille du nouveau texte qu'il va recevoir (je ne sais pas faire non plus) et une fois que la taille du bloc est bonne, le nouveau texte apparait en fondu. :)

    J'ai entendu parlé de librairie Javascript mais je ne sais pas où les trouver ni comment les utiliser.
    Pour l'instant la seule chose que j'arrive à faire c'est utiliser display:none ou bien innerHTML pour simplement remplacer mon texte, mais au niveau esthétique c'est pas tip top.

    Si quelqu'un peut m'aider, j'apprécierais beaucoup :p

    Merci d'avance :)

    Bonne soirée.
    • Partager sur Facebook
    • Partager sur Twitter
      4 octobre 2009 à 21:15:04

      Pour le fondu tu peux regarder ce topic : http://www.siteduzero.com/forum-83-448 [...] vascript.html
      Pour la redimmention, tu mets une valeur fixe aux valeur qui déterminent la taille du conteneur. Tu lui mets
      overflow:hidden;
      
      et tu affiches le nouveau contenu dans un bloc à l'intéreiur de conteneur avec un visibility:hidden;
      Ensuite, tu regarde pixelHeight (pour IE) et offsetHeight (pour les autres) et tu calcule le nombre de pixels qui faut bouger par coup pour que ça fasse un effet d'agrandissement. Et tu suis le même principe que pour le fondu... sauf que tu n'utilises pas les même propriétés CSS.
      • Partager sur Facebook
      • Partager sur Twitter
        5 octobre 2009 à 13:39:59

        Merci pour l'aide :)

        J'ai réussi à faire l'affichage en fondu et aussi en se basant sur la même fonction, une disparition en fondu.
        Je n'ai pas encore réussi à faire s'adapter la taille du bloc de manière progressive. Je ne comprends pas bien le fonctionne des fonctions getcom() et hidecom() que tu as donné Tiller.

        Cela dit j'ai un léger problème déjà avec l'apparition en fondu.
        J'ai un texte 1 que je fais disparaitre en fonction avec FermetureEstomper (fonction contraire d'OuvertureEstomper) et la ligne d'en dessous je fais apparaitre un texte avec OuvertureEstomper.

        Mais l'ouverture du nouveau texte n'attend pas que FermetureEstomper ait fini. Du coup les deux partent quasiment en même temps et un texte apparait pendant que l'autre disparait.

        Je souhaiterais que la fonction d'apparition attende que la fonction de disparation ait fini. Comment est-ce possible ?

        Merci beaucoup !

        Bonne après-midi.
        • Partager sur Facebook
        • Partager sur Twitter
          5 octobre 2009 à 13:44:36

          utiliser une fonction de callback que tu passes en paramètre à la fonction !
          Explication... (un peu en dessous)
          • Partager sur Facebook
          • Partager sur Twitter
            5 octobre 2009 à 19:43:39

            Merci pour l'idée de la fonction de callback, je l'ai fait et effectivement ca marche.

            Vous pouvez voir où j'en suis ici : http://idees-vertes.com/test.html

            Pour l'instant, si on clique gentiment sur Texte1 et Texte2, ca marche pas trop mal. (Il faut juste pas cliquer sur la page où on est déjà, mais j'ajouterais ce controle plus tard :) )

            Voici un bout de mon code :
            function FermetureEstomper(id, tempsAnimation, callback, i){
            	if (!i) {
            		var i = 100;
            	}
            	
            	var photo = document.getElementById(id);
            	var tempsParOpacite = tempsAnimation / 100;
            	
            	setOpacity(photo, i);
            	i--;
            	
            	if (i > 0) {
            		setTimeout(function() {
            			FermetureEstomper(id, tempsAnimation, callback, i);
            		}, tempsParOpacite);
            	}
            	
            	
            	if(i==0)
            	{
            		callback();
            	}
            	
            }
            
            function texte2()
            {
            document.getElementById("par1").style.display="none";
            document.getElementById("par2").style.display="inline";
            OuvertureEstomper("par2",1000);
            setOpacity(document.getElementById("par1"),0);
            
            
            }
            
            function texte1()
            {
            document.getElementById("par2").style.display="none";
            document.getElementById("par1").style.display="inline";
            OuvertureEstomper("par1",1000);
            setOpacity(document.getElementById("par2"),0);
            }
            
               
            //-->
            </script>
            
            <div style="border-style:solid;border-width:1px;border-color:#000000;padding:10px;margin:auto;width:60%;overflow:hidden;">
            <span onclick="FermetureEstomper('par2',1000, texte1);">Texte1</span> <span onclick="FermetureEstomper('par1',1000, texte2);">Texte2</span><br />
            <div id="par1">
            ...
            


            J'ai prévu plus tard d'aller chercher correctement les contenus des divs à afficher avec une requête AJAX mais pour l'instant c'est juste pour faire fonctionner le truc.

            Donc je n'arrive pas à changer la taille des divs.
            Je suppose qu'il faut que je le fasse juste au début de ma fonction de callback (texte1() et texte2() ) .

            J'ai regardé ton lien Tiller mais je comprends pas grand chose, notamment offsetHeight et ob.scrollHeight. J'ai essayé de l'appliquer à mon script mais cela ne change absolument rien.

            Merci.

            • Partager sur Facebook
            • Partager sur Twitter

            Texte apparaissant en fondu et bloc s'ouvrant

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown