Du côté du markup HTML, notre notification se résumera à pas grand chose : un simple bloc fera l’affaire pour contenir notre message. On peu aussi rajouter une icône/image afin de donner une information supplémentaire sur la nature de la notification. Ça n’a vraiment aucune importance, pourvu que l’information affichée soit courte. Voici mon marquage :

<div class="notify">
  <span class="icon"></span>
  <p>Je suis une notification. Je vais dispara&icirc;tre! Phasellus elit nunc, tristique sed sodales sit amet, tincidunt sed.</p>
</div>

Pour animer notre notification on aurait pu choisir CSS3 comme l’a fait Chris Coyer, mais je préfère utiliser jQuery pour ne pas pénaliser les navigateurs qui ne prendraient pas en compte les animations CSS, et pour m’éviter une belle tartine de définition de style :D. Voilà le Javascript :

jQuery(document).ready(function($) {
  $(".notify").css("display","none").delay(1000).fadeIn(400).delay(5500).fadeOut(800);
  $(".notify").hover(function() {
      $(this).stop(true, true).fadeIn();
  }, function() {
      $(this).stop(true, true).delay(1000).fadeIn(400).delay(5500).fadeOut(800);
  });
});

Le script ci-dessus permet de cacher notre notification au chargement de la page, puis après une demi seconde d’attente d’afficher notre notification en fondue pendant cinq secondes et demi pour enfin la faire disparaitre en fondue.

Dans le cas où notre notification est survolé par la souris (fonction hover()) on stoppe l’animation jusqu’à ce que la souris sorte de la notification. Une fois la souris hors de la notification, on reprend l’animation après avoir attendu une demi seconde.

Passons maintenant à notre feuille de style. Ce qu’il est important de noter, c’est que notre bloc contenant le message informatif doit être en position : absolute afin de le positionner, non pas par rapport à son conteneur mais plutôt par rapport au document HTML lui même.

.notify {
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #222222;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: 0 3px 5px rbga(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 3px 5px rbga(0, 0, 0, 0.4);
  box-shadow: 0 3px 5px rbga(0, 0, 0, 0.4);
  color: #ffffff;
  font-size: .8em;
  max-width: 246px;
  padding: 25px;
  position: absolute;
  right: 8px;
  top: 8em;
}
.notify:hover {
  border: 2px solid #eeeeee;
}
.notify p {
  cursor: default;
  margin: 0;
}
.notify .icon {
  background: url("../img/notify_icon.png") no-repeat;
  display: block;
  height: 40px;
  left: -30px;
  position: absolute;
  top: 10px;
  width: 40px;
}

C’est fini ! Vous pouvez voir la démo et télécharger les sources sur GitHub.

Avant toute chose, il nous faut récupérer notre ID utilisateur, et non notre Nom d’utilisateur. Pour cela, un petit tour sur cette page : Récupérer son ID et son flux de photos Instagram.

Ce service va vous permettre, via l’URL d’une de vos photos, ou par votre compte Twitter, si vous y avez partagé une Instagram récemment, de récupérer un flux au format ATOM, et par la même occasion votre ID utilisateur.

Une fois que vous avez récupérer votre ID utilisateur, comme le montre l’image ci-dessus, rien de plus simple : votre flux au format JSON se trouve ici : http://instagram.heroku.com/users/xxxxx.json. N’oubliez pas de remplacer xxxxx par votre ID 

On va maintenant pouvoir passer à l’affichage de nos données.

Ce qu’il faut savoir : le fichier JSON récupéré est un bordel sans nom, tellement il contient d’informations. Hormis les 20 dernières photos partager, on peut récupérer les commentaires, les « Likes », l’identifiant, et encore quelques informations pour chaque photos.

Ici, je veux récupérer une miniature de l’image, son titre, et l’identifiant de celle-ci pour l’afficher depuis le site d’Instagram. Voici le bout de code qui me permet d’afficher ces données.

$(document).ready(function(){
  $.getJSON('http://instagram.heroku.com/users/45195.json',function(data){

    var instagram = new Array();

    $.each(data.items, function(i,item){
      var str = '<li><a href="http://intagr.am/p/' + item.code + '">
      <img src="' + item.image_versions[1].url + '"
      title="' + item.comments[0].text + '" />
      <div>' + item.comments[0].text + '</div>
      </a></li>';
      instagram.push(str);
    });

    $('<ul/>', {html: instagram.join('')}).appendTo('#instagram');
  });
});

Dans le cadre de projets chez CBC Informatique j’ai eu l’occasion d’implémenter cette technique plutôt sympa qui rend un menu de navigation tout de suite un peu plus attrayant.

Pré requis

Pour réaliser cet effet, il nous faudra utiliser deux plugins en plus de la librairie jQuery. Le premier, jQuery LavaLamp, nous servira à définir le comportement de notre menu Lava. JQuery Easing, notre deuxième plugin est facultatif, mais on va le télécharger par soucis d’esthétisme, il nous permettra de faire rebondir notre menu.

Le marquage HTML

Ici notre marquage HTML est des plus simple, c’est une bête liste d’éléments non ordonnés. En clair (ou plutôt en code), voilà votre menu :

<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

Ok, jusque là pas de soucis, ajoutons maintenant une classe ou une id CSS à notre liste pour agir plus facilement sur le comportement de notre menu. Ici je vais utiliser une id « menu » (wouh, supra original tout ça).

Notre sélecteur (notre id « menu ») définit, on va pouvoir s’attaquer à l’instanciation de notre menu Lava dans jQuery.

Le code Javascript

Comme tout script jQuery, il est préférable d’attendre que la page soit chargée totalement avant d’agir sur le DOM. Notre javascript débutera donc ainsi :

$(document).ready(function(){
  //notre code jQuery
});

On ajoute maintenant l’appel au plugin jQuery LavaLamp dans notre script en lui passant les paramètres  souhaités pour l’animation:

$(function() {
  $(".menu").lavaLamp({
    fx: "backout",
    speed: 800,
    click: function(event, menuItem) {
      return false;
    }
  });
});

Ici, rien de bien compliqué, on définit l’effet comme étant élastique, et la vitesse d’animation à 800 millisecondes.

La base de notre menu est terminée, maintenant tout est une question de CSS pour styliser votre menu Lava.

La feuille de style

Pour un très bel effet Lava je vous propose de reprendre la feuille de style de l’exemple présent sur le site du plugin LavaLamp, qui pour moi reflète bien cet esprit « lampe à lave » avec les petites bulles qui se baladent librement.

Aussi, plutôt que d’utiliser des propriétés de CSS3 qui pourraient nous économiser l’utilisation d’images, je reste en CSS2 et vais réaliser les « bulles » avec des images.

Bon allez, envoi du style Marcel!

.menu {
  background-image: url(../img/bg.gif);
  background-position: top;
  background-repeat: no-repeat;
  height: 30px;
  list-style-type: none;
  padding: 15px;
  position: relative;
  width: 421px;
}
.menu li {
  float: left;
}
.menu .back {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background-image: url(../img/lava.gif);
  background-repeat: no-repeat;
  display: block;
  height: 29px;
  position: absolute;
  width: 62px;
  z-index: 1;
}
.menu a {
  color: #fff;
  display: block;
  float: left;
  font-family: sans-serif;
  font-size: 15px;
  font-weight: bold;
  margin: auto 14px;
  padding: 6px 0;
  position: relative;
  text-decoration: none;
  z-index: 8;
}

Là aussi rien de trop compliqué. Le point important de cette CSS est l’utilisation des propriétés position et z-index.

En définissant position à relative dans l’id #menu ne change rien au menu lui même par rapport au contenu possible qui se trouverai autour, par contre lorsqu’on définit à absolute la position de la classe .back pour les éléments li de la liste #menu permet de bien positionner notre bulle sur le texte.

La propriété z-index:8 utilisée dans la classe .back permet de positionner son contenu au dessus des autre éléments. Enfin, en indiquant un z-index à 10 pour les liens présents dans un élément de liste permet de positionner le texte deux plans au dessus de notre bulle.

Notre menu Lava est terminé.

Voir la démo Télécharger les fichiers

Conclusion

Ici on a pu voir comment animer un élément de navigation afin de rendre plus attrayante l’expérience utilisateur lorsqu’on navigue dans un site. On a vu aussi comment bien utiliser les propriétés CSS position et z-index pour positionner un élément à l’écran.

L’idée ici, c’est de pouvoir faire apparaitre un panneau au clic sur un bouton. Ce panneau qui coulisserai vers le bas depuis le « header » du site afficherai un formulaire pour permettre aux utilisateurs du site de se connecter à leur espace personnel. On pourrait croire qu’il serai difficile de réaliser un tel effet. Eh bien non! Grâce à notre feuille de style et un tout petit peu de javascript en utilisant jQuery, l’effet est simple à réaliser, et tout n’est ensuite qu’une question de style  .

Avant de commencer, vous pouvez jeter un oeil sur le rendu final (pour un meilleur rendu, utilisez les navigateurs Chrome, Firefox 3.5 ou Safari 4).

Le marquage HTML

Maintenant qu’on a vu quel était notre but, passons au code HTML de notre panneau de login. Je ne vais pas expliquer le code, c’est un formulaire basique encapsulé dans un bloc, suivi d’un lien lui même encapsulé dans un bloc de paragraphe.

<div class="panel">
  <form action="" class="login" id="login">
    <label for="username">Nom d'utilisateur</label>
    <input type="text" name="username" id="username" />
    <label for="password">Mot de passe</label>
    <input type="password" name="password" id="password" />
    <input type="submit" name="submit" id="submit" value="Connexion" />
  </form>  
</div>
<button class="slide">Se connecter</button>

Voilà, on ne peut vraiment pas faire plus simple.

Les styles CSS

Maintenant, passons à notre feuille de style. Je ne mettrai ici que les propriétés importantes à la réalisation de l’effet, pour ne pas vous embêter avec le superflux, cependant le code complet sera disponible au téléchargement à la toute fin de l’article.

.panel {
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0;
  border-radius: 0 0 10px 10px;
  background-color: #ccc;
  display: none;
  margin: 0 auto;
  padding: 30px;
  width: 300px;
}

.slide {
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0;
  border-radius: 0 0 10px 10px;
  background: #ff0000;
  color: #fff;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  padding: 10px;
  width: initial;
}

Le script jQuery

Maintenant qu’on a définit notre marquage HTML et les styles à lui appliquer, il ne reste plus qu’à l’animer grâce à jQuery.

jQuery(document).ready(function($){
    $(".slide").on("click", function(event) {
        event.preventDefault();
        $(this).prev(".panel").slideToggle("slow");
        $(this).toggleClass("active");
    });
});

Et voilà, votre panneau de login est terminé!

Fichiers sources

Voir la démo ou Télécharger les fichiers. ]]> https://chierchia.fr/2010/01/creer-un-panneau-de-login-coulissant-avec-jquery/feed/ 0 https://chierchia.fr/2009/05/creer-des-info-bulles-attractives-avec-jquery/ https://chierchia.fr/2009/05/creer-des-info-bulles-attractives-avec-jquery/#respond Ange Chierchia]]> Thu, 28 May 2009 21:05:02 +0000 https://nighcrawl.com/blog/2009/05/creer-des-info-bulles-attractives-avec-jquery Dans cet article nous allons créer un plugin jQuery afin de générer à la volée des info-bulles stylisée en utilisant l’attribut title.

Màj: démo et fichiers en téléchargement en fin d’article

Introduction à jQuery

Avant toute chose, je ne ferai pas d’article pour présenter/apprendre le framework jQuery, Samuel Le Morvan a déjà fait un très bon article sur le sujet, je vous invite donc à aller voir son billet avant de commencer ici.

Mise en forme du code HTML et CSS

Après un passage dans Photoshop ou autre logiciel de création graphique, il est tant de découper notre design d’info-bulle afin de l’intégrer en XHTML et CSS.

Après avoir découpé votre design en trois parties (topBulle.png, bottomBulle.png et fondBulle.png pour mon exemple), il est temps de passé au code HTML et CSS de notre bulle. Nous intégrerons ce code HTML dans notre plugin jQuery ne l’enregistrez donc pas dans un fichiers mais gardez le en-tête.

dans notre fichier index.html, nous allons insérer une simple le ligne de code

<a href="#" title="Ici se trouve le texte de notre info-bulle">Survolez pour afficher l'info-bulle</a>

Voilà maintenant pour notre feuille de style :

.bg {
    background: transparent url(images/fondBulle.png) repeat-y;
    padding: 0 25px 20px 25px;
}
.basbulle {
    background: transparent url(images/bottomBulle.png) no-repeat bottom;
    height: 52px;
}

Notre classe bulle permet de garder le tout bien ensemble. Elle nous permet aussi de définir les dimensions et le fond de notre bulle. Les propriétés width et padding-top sont respectivement la largeur et la hauteur de notre image topBulle.png. La classe bg permet de définir des marges intérieures et un fond que l’on répète pour l’ajuster à la taille de notre bloc. Enfin la classe basbulle permet de fermer notre info-bulle.

Le plugin jQuery

Voici le code complet du plugin, on vera les détails juste après

$.fn.infoBulle = function(options){
    /* options par défaut pour l'info-bulle */
    var defaults = {
        speed: 200,
        delay: 300
    };

    var options = $.extend(defaults, options);

    /* création de la fonction permettant de générer le code HTML de l'info-bulle */
    getBulle = function() {
        var tBulle =
            "<div class='bulle'>" +
            "<div class='bg'>"    +
            "</div>" +
            "<div class='basbulle'></div>" +
            "</div>";
        return tBulle;
    }
    $("body").prepend(getBulle());

    /* permettre l'appel du plugin */
    $(this).each(function(){

        var $this = $(this);
        var bulle = $('.bulle');
        var bulleInner = $('.bulle .bg');

        var tTitle = (this.title);
        this.title = "";

        var offset = $(this).offset();
        var tLeft = offset.left;
        var tTop = offset.top;
        var tWidth = $this.width();
        var tHeight = $this.height();

        /* fonctions mouse over/out */
        $this.hover(
            function() {
                bulleInner.html(tTitle);
                setBulle(tTop, tLeft);
                setTimer();
            },
            function() {
                stopTimer();
                bulle.hide();
            }
        );

        /* animation de la transition */
        setTimer = function() {
            $this.showBulleTimer = setInterval("showBulle()", defaults.delay);
        }

        stopTimer = function() {
            clearInterval($this.showBulleTimer);
        }

        /* positionnement de l'infobulle */
        setBulle = function(top, left){
            var topOffset = bulle.height();
            var xBulle = (left-30)+"px";
            var yBulle = (top-topOffset-60)+"px";
            bulle.css({'top' : yBulle, 'left' : xBulle});
        }

        /*fonction qui arrete le timer et anime la transition */
        showBulle = function(){
            stopTimer();
            bulle.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
        }
    });
};

Définition de la fonction infoBulle

Tout d’abord nommez votre fichier JavaScript comme suit jquery.infoBulle.js ce qui permettra à notre plugin d’être reconnu par jQuery.

Dans ce fichier la définition de notre fonction ce fait ainsi :

$.fn.infoBulle = function(){
});

Cela permet de définir notre fonction comme étant publique et donc d’être appellée dans d’autre documents. Ceci fait, pour appeller notre plugin il suffira d’insérer le code suivant entre les balise <head> et </head> de notre page HTML :

$(document).ready(function(){
    $('.tBulle').infoBulle();
});

Grâce à ce morceau de code notre plugin sera appellé par tout les élements dont la classe est tBulle.

Paramétrer l’animation du plugin

Afin de rendre notre plugin le plus réutilisable possible, il est pratique de créer une fonction permettant de donner les paramètres souhaité à notre animation. Ici nous nous occuperons du temps et de la vitesse de l’animation.

$.fn.infoBulle = function(options){
    var defaults = {
        speed: 200,
        delay:300
    };
    var options = $.extend(defaults, options);
});

Ainsi si l’on ne renseigne pas la varialbe options lorsqu’on invoque le plugin, il utilisera les valeurs par défauts. Pour paramétrer le plugin, on écrira la ligne suivante : $("bBulle").infoBulle({speed:400, delay:600});

Création à la volée du code HTML/CSS de notre info-bulle

C’est ici que le code HTML en début d’article va nous servir.  La fonction prepend() de jQuery va nous permettre d’injecter avant tout contenu existant, notre code HTML afin de positionner notre info-bulle au dessus de tout autre contenu.

getBulle = function() {
    var tBulle = "<div class='bulle'>" +
    "<div class='bg'>"    +
    "</div>" +
    "<div class='basbulle'></div>" +
    "</div>";
    return tBulle;
}
$("body").prepend(getBulle());

La fonction $(this).each()

Cette fonction permet de boucler à travers tout les élements d’une page associés au plugin lorsqu’il est invoqué dans les balises <head></head>. Ici la fonction bouclera sur chaque élément ayant comme classe tTip et appliquera les propriétés et méthodes que l’on va y définir.

$(this).each(function(){
    var $this = $(this);
    var bulle = $('.bulle');
    var bulleInner = $('.bulle .bg');

    var tTitle = (this.title);
    this.title = "";

    var offset = $(this).offset();
    var tLeft = offset.left;
    var tTop = offset.top;
    var tWidth = $this.width();
    var tHeight = $this.height();

    /* fonctions mouse over/out */
    $this.hover(function() {
        bulleInner.html(tTitle);
        setBulle(tTop, tLeft);
        setTimer();
    }, function() {
        stopTimer();
        bulle.hide();
    });
});

Ici on a juste défini la position que prendra notre info-bulle, et les paramètre du mouseover et mouseout. De même on met en mémoire la valeur de l’attribut title dans la variable tTitle, et on supprime le texte de l’attribut title pour éviter d’afficher l’info-bulle par défaut et avoir notre info-bulle jQuery accompagnée par l’info-bulle simple. On réalise ceci avec la ligne suivante : this.title = "";

L’animation de l’info-bulle

Ici on va utiliser deux fonctions setTimer et stopTimer permettant de définir une intervalle de temps entre le survol d’un élement de la classe tTip et l’apparition de notre info-bulle

setTimer = function() {
    $this.showBulleTimer = setInterval("showBulle()", defaults.delay);
}

stopTimer = function() {
    clearInterval($this.showBulleTimer);
}

Positionnement de l’info-bulle

On positionne ensuite notre info-bulle grâce à la fonction setBulle

/* positionnement de l'infobulle */
setBulle = function(top, left){
    var topOffset = bulle.height();
    var xBulle = (left-30)+"px";
    var yBulle = (top-topOffset-60)+"px";
    bulle.css({'top' : yBulle, 'left' : xBulle});
}

Affichage de l’info-bulle

On arrive enfin au bout de notre plugin, ici la fonction showBulle permet de définir les paramètres de l’animation qui seront utilisé dans la fonction setTimer.

showBulle = function(){
    stopTimer();
    bulle.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
}

C’est tout!

Fichiers source

Voir la démo Télécharger les fichiers ]]> https://chierchia.fr/2009/05/creer-des-info-bulles-attractives-avec-jquery/feed/ 0