• Un nouveau blog.

    Par Papasti le 1 Janvier 2014 à 22:14

    Voilà, me rendant compte qu'il m'est très plaisant de faire des tutos en particulier sur le javascript, j'ai décidé de recréer un blog qui ne sera axé que sur le HTML, le CSS et surtout le Javascript.

    Je vais essayer de le rendre ludique, sobre et clair. Il comportera différentes rubriques consacrées à ces trois langages mais aussi une foire aux questions, un forum pour les demandes d'aide ainsi qu'une boite à outils que vous pourrez exploiter à loisir. (avec des codes prêts à l'emploi, des formulaires en ligne etc.)

    J'attends de le remplir un peu avant de le rendre public mais je ne manquerai pas de vous tenir informés de son avancement.


    26 commentaires

  • Tuto: Une Boite déroulante en CSS3 + Javascript

    Par Papasti le 17 Octobre 2011 à 15:31

    Une animation façon mootools, c'est ce que je vous propose aujourd'hui. On va pour cela utiliser les propriétés de transition du CSS3. (Ne fonctionne pas avec Internet Explorer)

    Mais le plus simple pour se rendre compte des possibilites est de tester. Alors, passez votre souris sur les barres grisées ci-dessous.

    Passez la souris ici pour voir le résultat
    Une animation qui donne un effet plutôt sympa et réalisée sur la base de CSS3. A priori, cela n'est pas fonctionnel avec IE.
    J'ai ajouté un peu de javascript pour assurer le déroulé et l'enroulé de la zone de texte, le tout avec une unique fonction.
    Un peu d'Explications

    A chaque titre correspond une balise div qui contient 2 autres balises selon la structure suivante:

    <div id="zone1">
       <div id="bandeau1">.....</div>
       <div id="textederoule1">...</div>
    </div>
    <div id="zone2">
       <div id="bandeau2">.....</div>
       <div id="textederoule2">...</div>
    </div>


    La hauteur de premierezone est définie au départ avec la même valeur que celle de bandeau1 afin que l'on ne puisse pas voir le texte.
    Au survol de la souris, (avec onmouseover) on appelle la fonction deroule qui active l'animation. Le premier paramètre de la fonction est une valeur correspondant à bandeau1 et le second la hauteur déroulée en pixels. Dès que l'on quitte le bandeau avec la souris (onmouseout), on rappelle cette même fonction en réduisant sa hauteur de déroulé.

    Bien entendu vous pouvez fixer les autres propriétés CSS du bandeau, du texte et de la zone (couleurs, fond etc.)


    Retrouvez ci-dessous le code de l'exemple de cet article.

    <script type="text/javascript">// <![CDATA[
    function deroule(champ,valeur)
    {/*valeur est la hauteur en pixel de la zone*/
    switch (champ)
    {
      case 1: /*si champ vaut 1 alors on change la hauteur de zone1*/
        document.getElementById("zone1").style.height=valeur+'px';
        break;
    case 2: /*si champ vaut 2 alors on change la hauteur de zone2*/
        document.getElementById("zone2").style.height=valeur+'px';
        break;
    }
    }
    // ]]></script>

    <div id="zone1" style="width: 100%; height: 20px; background: White; border: 1px solid DimGrey; transition: height 1s; -moz-transition: height 1s;-webkit-transition: height 1s;-o-transition: height 1s; overflow: hidden;">
        <div id="bandeau1" style="height: 20px; width: 100%; font-size: medium; color: white; background-color: darkgrey;" onmouseover="deroule(1,100);" onmouseout="deroule(1,20);">Passez la souris ici pour voir le r&eacute;sultat
        </div>
        <div id="texte1" style="float: left;">Texte1 /*Remplacez par le texte de la première zone*/
        </div>
    </div>
    <div id="zone2" style="width: 100%; height: 20px; background: White; border: 1px solid DimGrey; transition: height 1s; -moz-transition: height 1s;-webkit-transition: height 1s;-o-transition: height 1s; overflow: hidden;">
        <div id="bandeau2" style="height: 20px; width: 100%; font-size: medium; color: white; background-color: darkgrey;" onmouseover="deroule(2,350);" onmouseout="deroule(2,20);">Un peu d'Explications
        </div>
        <div id="texte2" style="float: left;">Texte2/*Remplacez par le texte de la deuxième zone*/
        </div>
    </div>


    14 commentaires

  • Lancement du blog

    Par Papasti le 21 Avril 2011 à 18:07

    Bienvenue sur ce Blog.

    Papasti (c'est moi !  ) est un pseudo qui n'a rien d'italien et qui, pour la petite histoire, provient d'un jour ou mon fils m'a demandé de créer un personnage pour l'aider sur un MMORPG. Son personnage s'appelant Asti, et n'ayant pas beaucoup d'imagination, j'ai appelé tout naturellement le mien Papasti.

    Bon, vous me direz, ça on s'en fout et vous avez raison ! Donc pour en venir à l'essentiel, ici, vous trouverez des articles sur quelques logiciels sympas que l'on trouve sur le net (mais pas forcément connus), quelques actus Geek et même parfois mes humeurs. Bref un blog qui touche à tout ce qui m'intéresse.

    Bien entendu je modèrerai tout commentaire déplacé (insultes, violence, antisémitisme, etc.) et tout lien vers des sites irréguliers. Le langage mms est aussi proscrit.

    Les critiques sont les bienvenues pourvu qu'elles soient constructives. Mais le mot d'ordre c'est Bonne humeur et entr'aide.

    En tous cas merci d'être venu visiter ce blog. J'espère que vous y avez trouvé ce que vous cherchiez.

     


    3 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique