joyride-tour-presentation-site

Joyride – créer un tour de présentation de votre site

Joyride est un plugin Jquery qui vous permet de réaliser un tour de présentation des fonctions de votre site, simplement et rapidement, à l’aide d’info bulle design.

De quoi mettre un peu plus d’interaction dans votre site, et amener l’utilisateur à découvrir les fonctionnalités de votre site.

Pour cela, ajouter les quelques scripts nécessaires à votre page :


/* Attacher la CSS */

/* jQuery */

/* le plugin jquery Joyride */

A chaque étape de votre visite, mettez simplement un attribut id avec un nom unique à l’élément HTML désiré :


Créer une liste ordonnée contenant chacune des étapes de votre visite guidée. Vous pouvez spécifier différentes choses:

  1. Joyride est un plugin permettant faire des présentations de fonctionnalités de site

  2. Description de la fonction 1.

  3. Description de la fonction 2.

  4. Dernière fonction

    Pour finir, une belle description mise en forme...

    Il est évidemment possible de mettre en forme les bulles en HTML/CSS

  1. Présentation

    WebJuice vous permet de découvrir de nouveaux outils, des infos pratiques et utiles pour développer vos compétences, votre communication sur internet

  2. Naviguer

    naviguer sur le site à l’aide du menu principal

  3. Nos Services

    Découvrez les prestations proposées par ACcréation, éditrice de ce blog

  4. Rechercher

    Rechercher un article sur un sujet donné à l’aide du formulaire dédié

  5. Echanger

    Suivez-nous sur les réseaux sociaux WebJuice et ACcréation, ou en vous inscrivant à la newsletter

  6. Commenter

    L’article vous plait ? Vous avez une question ? Laissez un commentaire ! ou contactez-nous

  7. Partager

    Nous souhaitez partager votre joie de nous lire mais ne savez pas comment ? N’hésitez plus !

Finalement, lancer le plugin au chargement de la page, en précisant éventuellement des paramètres facultatifs :


Et voilà, ça fonctionne !
N’est-ce pas ?

Lire la suite

fitvids-responsive-design-video

Responsive-webdesign : vos vidéos s’adaptent à votre taille d’écran

Le responsive-design est décidément dans l’ère du temps, avec l’explosion du mobile et autres tablettes, et la multiplication des tailles d’écrans.

Grâce à la librairie fitvids.js, vos vidéos youtube, viméo, … s’adaptent automatiquement à la taille de votre navigateur.

Même en pleine lecture, vous pouvez redimensionner votre navigateur (et donc votre vidéo) sans coupure !

Niveau intégration, comme toujours avec jQuery, rien de plus simple :

$(document).ready(function(){
$("#mavideo").fitVids();
});

Lire la suite

chosen

Chosen – moderniser vos listes déroulantes

Chosen est un plugin JavaScript qui rend vos longues listes déroulantes bien plus agréables à utiliser.

Cerise sur la gâteau, il est disponible en tant que plugin jQuery et Prototype, et a déjà été porté sur Motools et Drupal 7.

Pourquoi utiliser Chosen ?

Ergonomie

Au lieu de forcer vos utilisateurs à faire défiler la liste des 36000 communes françaises ou des quasi 200 pays, ils pourront désormais saisir une partie du nom de leur communes/pays pour réduire instantanément cette liste à ce qu’ils cherchent.

Amélioration progressive (Progressive Enhancement)

Chosen est basé sur Javascript, de façon non intrusive. Votre code HTML reste conforme aux standards HTML. Aucun problème pour les ordinateurs n’ayant pas Javascript activé.

De plus, les données postées par le formulaire reste également les mêmes que si la liste déroulante d’origine était utilisée. Aucun traitement particulier n’est donc à prévoir côté serveur.

Installation sans soucis

Ajouter les fichiers de Chosen à votre application et appeler le plugin. Chosen respecte automatiquement les optgroups, les items sélectionnés, l’attribut « multiple » et l’ordre de navigation au clavier (tabulation).

Lire la suite

tiny CircleSlider

Tiny Circleslider – un carrousel circulaire

Après les sliders vus et revus, les caroussels en 3D, en voici un petit nouveau, original et élégant, un caroussel circulaire : Tiny Circleslider

Il est basé sur la librairie JQuery et est très léger : 4ko seulement !

Ces principales caractéristiques :

  • Support de l’iPhone, iPad et Android
  • Support du défilement automatique, ou par rotation du « curseur » ou clic sur le rond de l’image à afficher
  • Option de fondu en fin de déplacement
  • Paramétrage du rayon du slider
  • Possibilité d’appel de callback après chaque mouvement
  • Facilement personnalisable

Lire la suite