• [Javascript] Interagir à l'aide des éléments Input

    Par Papasti dans Scripts, html et css sur Eklablog le 16 Septembre 2011 à 15:16

    Votre blog n'est pas un site complet qui vous permette de faire des choses très complexes à base de PHP et de bases de données Mysql.

    On peut cependant assurer une certaine interaction à l'aide du javascript et de l'élément HTML Input

    Supposons que vous souhaitiez faire une page qui permette de calculer des surfaces, des périmètres et autres volumes.

    Cela est possible   Regardez l'exemple ci dessous:

    Largeur:     Longueur:     

     

    Dans cet exemple, j'ai placé deux boites Input (Largeur et Longueur) et un bouton Surface. Lorsque l'on clique sur le bouton, on fait appel à une fonction Javascript (calculsurface) en lui envoyant les valeurs contenues dans Largeur et Longueur.

    Cette fonction calcule le produit des deux nombres et renvoie le résultat.
    Si dans largeur ou longueur, vous mettez du texte, alors la fonction detecte que le résultat n'est pas un nombre à l'aide de la méthode IsNaN (en anglais : Is Not a Number)

    Code de l'exemple


    <script type="text/javascript">// <![CDATA[
    function calculsurface(nombre1,nombre2)
    {
    if(isNaN(nombre1*nombre2) == true)
    {
        alert('Veuillez saisir des nombres');
    }
    else
    {
        alert ('La surface est de: '+nombre1*nombre2);
    }
    }
    // ]]></script>
    <form method="get">
    Largeur:<input style="width: 50px;" name="largeur" type="text" value="5" />&nbsp;&nbsp;&nbsp;&nbsp; Longueur: <input style="width: 50px;" name="hauteur" type="text" value="10" /> &nbsp; &nbsp;&nbsp; <input onclick="calculsurface (largeur.value,hauteur.value);" type="button" value="Surface" /></form>

     

    Vous pouvez maintenant laisser libre cours à votre imagination pour remplir vos fonctions javascript.


    13 commentaires

  • [HTML] La balise <IFrame>

    Par Papasti dans Scripts, html et css sur Eklablog le 16 Septembre 2011 à 10:25

    Peut être avez vous envie sur votre blog d'afficher la page d'un autre blog.

    Pour celà, rien de plus facile. Une simple balise HTML et c'est fini. Pour tester, cliquez sur les boutons ci-dessous.

     

     

    Dans cet exemple, j'ai créé 3 balises <div>  (s'appellant respectivement fr1 , fr2 et fr3 ) contenant chacune une <iframe>.
    Chaque balise est initialement rendue invisible avec la propriété style="display:none;"
    Il ne reste plus ensuite qu'à jouer sur les états "visible" ou "invisible" de chacune des <div> en modifiant leur état avec les méthodes hide (cacher) et show (montrer).

    En cliquant sur un bouton, on rend visible la balise correspondant et on cache les autres.


    En plus de la balise <iframe> vous avez aussi appris à mettre un bouton et montrer ou cacher un élément

    Code correspondant à l'exemple ci-dessus




    9 commentaires

  • [CSS] Modifier la taille d'un élément

    Par Papasti dans Scripts, html et css sur Eklablog le 15 Septembre 2011 à 17:24
    Salut tout le monde. Je vais ici vous faire un petit baratin dont le but n'est pas d'être lu mais simplement de faire un petit remplissage afin d'illustrer le tuto. Je commence donc par vous parler de la pluie et du beau temps, du cours du lait et de l'artisanat mongol du début du XXII ème siècle. J'enchaîne sur la baisse du pouvoir d'achat, la déforestation en amazonie et sur ma tête (non, je plaisante) pour enfin en arriver au terme de cet article sans intérêt mais qui a rempli son office, c'est à dire un texte trop long pour pouvoir être affiché dans la <div>

    Comme vous le constatez, tout le texte n'apparaît pas dans le cadre ci-dessus. Vous aurez par contre remarqué l'ascenseur sur la droite du cadre ainsi que la poignée de redimensionnement dans le coin inférieur droit.

    Vous pouvez donc soit faire défiler le texte à l'aide de l'ascenseur ou agrandir le cadre à l'aide de la poignée.

    Code CSS correspondant à l'exemple ci-dessus

    #retailler
    {
    border:2px solid blue;
    padding:20px 20px;
    width:200px;
    height: 150px;
    resize:vertical;/*options : none, vertical, horizontal ou both */
    overflow:auto;/*options : visible, hidden, scroll, auto, inherit */
    }

     

    Il ne vous reste plus qu'à placer votre texte dans votre article comme ci-dessous

    <div id="retailler">Votre texte ici....</div>


    30 commentaires

  • [CSS] Mettre des colonnes dans ses articles

    Par Papasti dans Scripts, html et css sur Eklablog le 15 Septembre 2011 à 16:57
     
    Salut tout le monde. Je vais ici vous faire un petit baratin dont le but n'est pas d'être lu mais simplement de faire un petit remplissage afin d'illustrer le tuto. Je commence donc par vous parler de la pluie et du beau temps, du cours du lait et de l'artisanat mongol du début du XXII ème siècle. J'enchaîne sur la baisse du pouvoir d'achat, la déforestation en amazonie et sur ma tête (non, je plaisante) pour enfin en arriver au terme de cet article sans intérêt mais qui a rempli son office, c'est à dire apparaître sur 3 colonnes.

     

    Pour en arriver à ce résultat il vous suffit de mettre le code CSS suivant (Dans Apparence -> Modifier le thème ->Ajouter du CSS)

     

    .newspaper
    {
    /* Vous pouvez spécifier le nombre de colonnes voulues (ici 3)*/
    /* Ce code peut ne pas fonctionner avec internet explorer*/
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari et Chrome */
    column-count:3;
    }

     

    Et mettre tout simplement votre texte dans votre article comme ci-dessous (Edition d'un article/ Icone HTML)

    <div class="newspaper">Votre texte ici....</div>


    7 commentaires



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