• 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.


    23 commentaires
  • 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>


    15 commentaires
  •  

    Un tooltip ? Késaco ? Vous savez c'est cette petite fenêtre qui s'ouvre pour vous donner une information lorsque vous passez sur un élément avec la souris.

    Le tooltip est souvent utile et basique. Il est pourtant assez facile d'en réaliser un plus évolué. Mais rien de tel qu'un exemple.

    Passez votre souris sur moi

     

    Alors comment ça marche?

    Le principe:

    L'article contient une balise <div>(que j'ai appelé tooltip) qui est rendue invisible grâce à la propriété display. Cette balise a la couleur et la bordure choisie.

    Sous ce <div> , j'ai placé trois autres balises (une pour le titre, une pour le corps du texte et enfin une pour l'image).

    Lorsque l'on passe avec la souris sur l'élément choisi (onmouseover), cela appelle une fonction javascript (show_tooltip) qui:

      - Définit la taille de la balise invisible
      - Positione cette balise en haut et à droite de la souris
      - Affiche la balise

    Dès que l'on quitte l'élément avec la souris (onmouseout), une autre fonction (unshow) est appelée qui rend la balise invisible.

    Comment l'utiliser ?

    Il faut placer dans la partie HTML de votre page le script suivant:

    <script type="text/javascript">// <![CDATA[
    function show_tooltip(event,larg,haut,coul,titre,baratin)
    {
    var x=event.clientX;
    var y=event.clientY;
    document.getElementById("tooltip").style.width =larg+'px';
    document.getElementById("tooltip").style.height =haut+'px'
    document.getElementById("tooltip").style.backgroundColor = coul;
    if (titre !='') {document.getElementById("titretooltip").innerHTML=titre}
    if (baratin !='') {document.getElementById("corpstooltip").innerHTML=baratin}
    document.getElementById("tooltip").style.left =(x+10)+'px';
    document.getElementById("tooltip").style.top =(y-haut -10)+'px';
    document.getElementById("tooltip").style.display ='block';
    }
    function unshow()
    {
    document.getElementById("tooltip").style.display ='none';
    }
    // ]]></script>

     

    Puis il faut définir la <div> qui va vous servir de tooltip. Celle ci-dessous correspond au tooltip de cette page:

    <div id="tooltip" style="display: none; padding: 5px; border: 1px solid Black; border-radius: 10px; position: fixed; float: none; width: 60px; ">
    <h3 id="titretooltip">pp</h3>
    <p id="corpstooltip" style="float: left; width: 150px;">pp</p>
    <p style="float: right;"><img src="http://ekladata.com/Q97lTr67ftDn0mdAOp2Hw7sNIEI/227407.jpg" alt="" width="50" height="50" /></p>
    </div>

     

    Maintenant il ne reste plus qu'à l'appeler quand vous en avez besoin. Dans l'exemple ci-dessous, 250 est la largeur de la div et 120 sa hauteur .

    <a onmouseover="show_tooltip(event,250,120,'LightBlue','Super tooltip','Vous ne trouvez pas ? On peut y placer quasiment tout, texte, images etc.')" onmouseout="unshow()">Passez votre souris sur moi</a>



     

     

    Faire un Tooltip évolué


    33 commentaires
  • J'ai réalisé un nouveau générateur de CSS qui vous donne automatiquement le sélecteur choisi pour votre blog Eklablog. Ce tuto se trouve ici:Générateur de code CSS

    Bienvenue.

    Vous allez pouvoir ici faire différents tests pour la génération de votre code CSS. Ce formulaire vous permet de définir une couleur de fond, une image de fond avec sa taille et sa position ainsi que differents styles, attributs de texte, d'ombrage et de bordures. J'ai regroupé les fonctions qui me semblaient les plus utiles mais n'hésitez pas a me faire part des améliorations que vous aimeriez voir ou des problèmes que vous rencontrez.

    Fonctionnement

    Remplissez les différentes cases, jouez avec les réglages et cliquez sur le bouton appliquer. Lorsque votre choix est fait il vous suffit de copier le code css indique en bas de page.
     
    Image de Fond Texte
    Ombrage Bordure
    Nom de la balise :
    Largeur : px
    Hauteur : px
    Générateur de CSS Générateur de CSS
    PaddingGénérateur de CSS
    Gauche : px   Droite : px
    Haut : px   Bas : px
    Couleur de fond

    Ceci est un exemple pour illustrer le rendu obtenu. Vous pouvez ainsi apprécier l'effet visuel avant de générer le code.

     

    28 commentaires



    Suivre le flux RSS des articles
    Suivre le flux RSS des commentaires