jQuery Archives - Copier coller

Comment modifier dynamiquement les couleurs dans un champs textarea

copier coller — Fri, 16 Apr 2021 18:38:49 +0000

Comment modifier dynamiquement des élements à l’intérieur d’un champ textarea ?

Vous avez un champ textarea vide (ou pas). De manière dynamique, grâce au js, vous injectez du code à l’intérieur de ce champs texte. Ce texte contient entre autre, des couleurs ou une couleur dominante pour les titres, les phrases en gras, les bordures, les couleurs d’arrière plan etc. Vous souhaiteriez, par l’intermédiaire de boutons, modifier les codes couleurs contenus dans le code : voici une solution.

La partie html

Commencez par définir vos boutons puis votre champ texte:

on définit ici un attribut data-color par bouton. On définit un set de couleur pour tous les « produits » (ou n’importe quel autre objet). Chaque bouton correspond à un produit, une marque et représente une couleur. La couleur dominante dans le champs textarea figure elle aussi dans l’attribut data-color d’un bouton. Ca c’est pour pouvoir revenir à la couleur initiale.

Intéragir avec le champ texte

Grâce au js on va procéder de la manière suivante :
On insère tous nos codes couleurs dans une variable « color« .
Au clic sur le bouton :

on définit dans une variable « colour » la couleur de l’élément cliqué
on définit dans une variable « textarea » notre champ texte
on définit la taille de notre tableau de couleur

on boucle :

pour chaque couleur contenue dans le tableau
si une couleur du champ textarea correspond à l’une des couleurs de notre tableau
on remplace cette couleur par le data-color du bouton cliqué.

 var color =["#64A70B","#525ca3","#633bb0","#ff4c00","#61b09d","#00cbf9","#31B7BC","#4EAB8E"];
 $(".change").click(function() { 
  var colour = $(this).data("color");
  var textarea = $('#final-code');
  var len = color.length;
  for (i=0; i < len; i++) {
   textarea.html(textarea.html().replaceAll(color[i], colour)); 
 }  
});

The post Comment modifier dynamiquement les couleurs dans un champs textarea appeared first on Copier coller.

Créer un effet parallaxe grâce à jQuery

copier coller — Sun, 11 Apr 2021 02:31:09 +0000

Comment créer un effet de parallaxe sur les éléments d’une page ?

Après avoir longtemps cherché une solution simple pour créer un effet parallaxe sur plusieurs éléments en simultané, j’avais finalement laissé tomber : créer un parallaxe « statique » est assez simple, par contre faire en sorte qu’au scroll chaque élément d’une page se déplace différement, c’est un peu plus compliqué..La plupart des solutions impliquent à la fois des tonnes de css, ou l’utilisation combinée du css et jquery mais de manière assez compliquée.

Finalement, j’ai trouvé sur codePen une fonction js assez simple à comprendre qui prend en paramètre un seul élément de la page, c’est l’attribut data-scroll-speed qu’on va ajouter sur nos élements. Si vous avez une liste d’éléments sur la page, il suffit d’incrémenter chaque valeur : data-scroll-speed=1, data-scroll-speed=2 etc , et la fonction js fait le reste. Chaque élement va se déplacer au scroll en fonction de son data-scroll-speed !

Voici un exemple fait à la va vite pour tester cette fonction. J’ai mis le lien du codepen original dans le code.

See the Pen
Parallax objects jquery by blindDev (@yuyazz)
on CodePen.

The post Créer un effet parallaxe grâce à jQuery appeared first on Copier coller.

Créer un accordéon en css jQuery

copier coller — Sun, 11 Apr 2021 02:07:53 +0000

Comment créer un accordéon simple grâce à jQuery et css

Voici un exemple de code pour obtenir un accordéon. Les panels de chaque accordéon sont en display:none par défaut. Grâce au jQuery les simples fonctions slideDown(), slideUp() vont nous permettre de révéler le contenu. Dans l’un des accordéons, on insère une image minature. Au clic sur cette image, une popup s’ouvre pour voir l’image agrandie. Ici on joue avec la propriété transform:scale pour donner un effet de zoom à l’image.

See the Pen
Accordion CSS/jQuery by blindDev (@yuyazz)
on CodePen.

The post Créer un accordéon en css jQuery appeared first on Copier coller.

Une carte dynamique Mapael.js avec jquery.connection.js

copier coller — Sat, 10 Apr 2021 17:59:17 +0000

Comment créer un effet de survol sur une carte Mapael.js

Ayant déjà fait un tuto sur la manière dont on peut implémenter une carte avec Mapael.js, ici je vais juste montrer, à travers un codePen, comment afficher ses tooltips au survol sur les markers. J’utilise ici le plugin jquery.connections.js, pour relier les markers à leur div respective.

Plutôt que des mots, voici le code et le rendu. Passez l’éditeur en 0.5 ou allez visionner ça dans CodePen directement.

See the Pen
Mapael Interactive hover map by blindDev (@yuyazz)
on CodePen.

Et voici la version statique, sans effet de survol

See the Pen
Interactive Mapael Map with connections by blindDev (@yuyazz)
on CodePen.

The post Une carte dynamique Mapael.js avec jquery.connection.js appeared first on Copier coller.

Créer une Step Progress Bar

copier coller — Sat, 10 Apr 2021 17:26:08 +0000

Comment créer une « step progress bar » ou barre de progression par étape

Ce genre de design est surtout visible sur les sites e-commerce ou les formulaires multi-étapes. On affiche des numéros, au clic sur un bouton on passe à l’étape suivante. Les numéros permettent de voir où l’on se situe.

Une progression en 4 étapes

Voici donc un exemple simple, les numéros sont grisés par défaut (opacity;0.5) et au clic s’affichent à pleine opacité (opacity:1). Les div sont également cachées, positionnées en absolute, et la suivante remplace la précédente. Ici on peut passer de la 1ère à la dernière position et inversement.

See the Pen
Tab list by blindDev (@yuyazz)
on CodePen.

Une progression en 3 étapes

Et voici un exemple similaire en 3 étapes seulement

See the Pen
Simple Jquery – Css Step Process by blindDev (@yuyazz)
on CodePen.

The post Créer une Step Progress Bar appeared first on Copier coller.

Remplir des champs dynamiquement en js

copier coller — Sat, 10 Apr 2021 16:43:51 +0000

Comment créer les options d’un champ select de manière dynamique ?

Il est parfois nécessaire d’afficher les options de ses menus déroulants de manière dynamiques : on selectionne une option dans un premier champ, cela affiche des données A dans le second champ. On sélectionne une autre option, cela affiche les données B, et ainsi de suite.

Voici un exemple simple qui reprend ce principe :

See the Pen
Fill a Dropdown Dynamically jQuery by blindDev (@yuyazz)
on CodePen.

Vous trouverez un autre exemple tout simple dans un autre article.

The post Remplir des champs dynamiquement en js appeared first on Copier coller.

Créer des animations avec AOS

copier coller — Sat, 10 Apr 2021 15:37:17 +0000

Comment créer des animations avec AOS

J’avais déjà rédigé un mini tuto pour créer des animations avec wow.js et animate.css. Aujourd’hui on va voir comment faire la même chose avec AOS, plus facile d’utilisation. C’est une librairie js qui permet d’appliquer tout type d’animation css au scroll, sur n’importe quel type de balise html.

L’appel des scripts

Dans le header de votre page, placez l’appel au script css.

Si ce n’est pas fait, incluez jquery et bien sûr n’oubliez pas ensuite d’inclure également le js:

Activer le plugin

Dans la même page entre des balises script, ou dans un fichier à part, on active le plugin avec ce bout de code:

Si jamais ca bugue sur mobile…

AOS semble buguer sur mobile, une solution consiste donc à annuler les animations sur petit écran. Voici le code

Les animations

Ensuite dans la page, vous pouvez appliquer les animations sur n’importe quel type de balise avec l’attribut data-aos= » » :

Quelques options sont possibles :

      data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >

Retrouvez la liste complète des options.

Voilà c’est à peu près tout ce qu’il faut savoir pour lancer de belles animations sur ses pages.. Attention à ne pas trop en mettre, ca complique la lecture parfois.. Rendez vous sur le github pour en savoir plus, ou l’article de l’auteur sur css trciks.

The post Créer des animations avec AOS appeared first on Copier coller.

Créer un comparateur « drug checker » simplifié en js

copier coller — Sun, 20 Dec 2020 08:43:13 +0000

Création d’un comparateur de produits en js

Le terme de comparateur est ici un peu trompeur, en fait l’idée est de donner à l’utilisateur la possibilité, à partir d’une page produit, de connaître les interactions avec d’autres produits. On part donc du principe qu’on est déjà dans une page produit. Dans celle-ci, on va afficher un groupe de champ qui nous servira de comparateur. Un premier champ select avec tous les produits à comparer. Selon la sélection de l’utilisateur, on va afficher dans les champs suivants les informations correspondantes.

Voici le rendu de mon exemple :

On a donc un menu déroulant, puis trois cases vides. Dans le code, ce sont des div et non des input texte. En dehors du cadre central on affiche des « familles » de produits par couleur, puis des « catégories » par des picto. Ces éléments sont juste esthétiques. La div centrale « interactions » récupère plutôt des informations sous forme de texte.

Afin de pouvoir classifier ces informations on place notre liste de produits dans un fichier json.

Le but est donc que l’utilisateur puisse, à partir d’un produit de la liste, savoir à quelle famille il appartient, quelles sont ses interactions avec le produit principal de la page, puis ses spécificités.

La construction de mon comparateur

Voici mon html


	
		| DCI | 
		
	

	
		| Famille|
		
			
		

	

	
		| Interactions|
		

	

	
		| CAT**|

On a un premier champ select, le reste ce sont des div stylisées comme des input texte.

Un fichier json

Pour regrouper la liste d’information, on pourrait tout à fait utiliser un fichier js, tout insérer dans une variable et travailler à partir de là. Ici j’utilise plus simplement un fichier à part, en json. Le but sera ensuite de récupérer toutes ces informations via notre js, et de l’insérer dans les différents champs.

Le fichier je l’appelle « interaction.json » et se compose de la manière suivante :

[{
       
"DCI": "Antidépresseurs tricyliques",
"Famille": "antidepresseurs",
"Interaction": "Sub. du CYP2D6",
"CAT": "diminuer"
},{       
"DCI": "Amlodipine",
"Famille": "antihypertenseurs",
"Interaction": "Inhib. du CYP3A",
"CAT": "precaution"
}
,{       
"DCI": "Aprépitant",
"Famille": "autres",
"Interaction": "Inhib. du CYP3A",
"CAT": "precaution"
}
]

Je n’en mets ici qu’un extrait. A l’intérieur, on définit plusieurs types ou catégories : dans mon exemple, ce sera « DCI » , « famille », « Interaction », « CAT ». Ces éléments permettent de classifier les informations et de les récupérer plus facilement.

La fonction js pour tout récupérer et insérer

Ensuite, dans un fichier js dédié, voici le code utilisé. Ce dernier est commenté pour mieux comprendre. En fait ici j’appelle le fichier json. Selon le choix de l’utilisateur, j’insère toutes les données « famille », « interactions » et « cat » correspondantes au produit choisi. Ensuite, je fais en sorte que l’élements choisi soit mis en exergue en front pour le distinguer plus facilement (voir le gif)

let dropdown = $('#dci');
let input1 = $('#family');
let input2 = $('#interactions');
let input3 = $('#cat');


dropdown.empty();//je vide le champ select
dropdown.append('');//j'insère dynamiquement une option par défaut
const url = 'http://localhost/cerdelga-select/interaction.json'; // je définis l'url de mon fichier json
$.getJSON(url, function(data) {//je récupère les données
    $.each(data, function (key, entry) {//pour chaque entrée..
    dropdown.append($('').attr('value', entry.DCI).text(entry.DCI));//j'insère depuis le fichier json les données de ma catégorie DCI à l'intérieur de l'attribut "value"
   }); 
   $('#dci').change(function()  {//pour chaque selection de l'utilisateur
     var i = this.selectedIndex; // je définis l'index du choix
      i = i - 1; 
     
          
      input1.removeClass().addClass(data[i].Famille);//dans ma div #family je supprime la classe s'il y en a une, et j'ajoute la classe liée à ma catégorie famille
      input2.text(data[i].Interaction);// dans ma div #interaction, j'insère les infos de ma catégorie interaction
      input3.removeClass().addClass(data[i].CAT);//dans ma div #cat je supprime la classe s'il y en a une, et j'ajoute la classe liée à ma catégorie CAT
    

    var elem = $(this).parent().next().find('div').attr('class');//depuis le champ select #dci, je remonte d'un cran dans le DOM, je cible l'élement suivant, à l'intérieur je cible la div, et prend la classe
   

    $('p[data-rel = '+elem+']').removeClass().addClass('lighten').siblings().removeClass().addClass('darken');//ici je mets en exergue la catégorie correspondante
    var car = $(this).parent().siblings().find('#cat').attr('class');//je récupère la classe de la div #cat
    $('.checker-cat p[data-rel = '+car+']').removeClass().addClass('lighten').siblings().removeClass().addClass('darken');//pareil, je mets en exergue les élements CAT correspondants
    
  
   });
});

Utiliser un plugin js pour l’autocomplétion : easy-autocomplete

Si la liste des produits comporte des dizaines d’option, il faudra à un moment passer à l’auto-complétion, afin d’éviter une liste à rallonge qui dépasse même le cadre de l’écran.

Voici donc une autre manière de faire. Je mets ici mon html, quelque peu modifié

  
	  
		  | DCI | 
		  
		  
	  

	  
		  | Famille|
		  
			  
		  

	  

	  
		  | Interactions|
		  
	  

	  
		  | CAT**|

Ici, le premier champ est un select, le champ « interactions » est un input de type texte, les deux autres sont des div simples.

Dans cet exemple, je vais utiliser easy-autocomplete. Ce plugin d’auto-complétion est très bien fait et propose plein d’options, pour tout type de projet.

Dans mon header, j’appelle donc le fichier css puis dans le footer, le script easy-complete.

Le résultat sera exactement le même, sauf qu’à la place d’une liste sans fin, le select va nous afficher tous les termes correspondants aux premières lettre tapées. Le plugin permet aussi de remplir automatiquement les champs vides en fonction du choix utilisateur. Veuillez vous reporter à la page d’exemple du plugin, d’où j’ai tiré l’essentiel du code.

Voici la fonction js :

var options = {
  adjustWidth: false,

  url: "http://localhost/interaction.json",

  getValue: "DCI",//on récupère chaque entrée du fichier json grâce à la fonction getValue du plugin

  list: {
match: {
      enabled: true
    },
    sort:{
      enabled: true // rangement par ordre alphabétique
    
    },
    maxNumberOfElements: 10, // max
    onSelectItemEvent: function() {// on récupère les données de chaque entrée qu'on insère dans les div correspondantes
      var famille = $("#dci").getSelectedItemData().Famille; 
      var interaction = $("#dci").getSelectedItemData().Interaction;
      var cat = $("#dci").getSelectedItemData().CAT;

      $("#family").removeClass().addClass(famille).trigger("change");// comme dans le précédent exemple,
      $("#interactions").val(interaction).trigger("change");
      $("#cat").removeClass().addClass(cat).trigger("change");
    }
  }
};

$("#dci").easyAutocomplete(options);

Le code en action

Voici un exemple reprenant tous les élements décrits plus haut

See the Pen
EasyAutoComplete js and dynamic select fields by blindDev (@yuyazz)
on CodePen.

The post Créer un comparateur « drug checker » simplifié en js appeared first on Copier coller.

Valider ses formulaires avec jquery validate

copier coller — Wed, 24 Jun 2020 21:14:06 +0000

Comment valider ses formulaires avec jquery validate ?

Dans ce tuto on va voir comment on peut valider un formulaire html/css en un temps record, grâce au plugin jquery-validate.js. Il en existe beaucoup d’autres, comme validate.js, et il est également possible de le faire en javascript natif, comme le montre le site W3shools.

See the Pen
Simple jquery-validate form by blindDev (@yuyazz)
on CodePen.

Comment faire dans le cas d’un formulaire avec vérification et envoi en ajax/ php ?

Si vous partez d’un formulaire classique en php, avec une validation en ajax, voici une piste pour faire fonctionner les deux ensembles. Ici je me base sur l’exemple fourni par le site tutsplus. L’idée est d’afficher un formulaire avec un message de succès caché. A la soumission du formulaire on cache ce dernier et on affiche le message.

La vérification des données en php

Voici le code à insérer dans un fichier php à part, qu’on va appeler form-process.php. Le code est appliqué au formulaire donné en exemple.

$errorMSG = "";
 
// NAME
if (empty($_POST["name"])) {
    $errorMSG = "Veuillez indiquer votre Nom et Prénom";
} else {
    $name = $_POST["name"];
}
 
// EMAIL
if (empty($_POST["email"])) {
    $errorMSG .= "Veuillez indiquer votre Email";
} else {
    $email = $_POST["email"];
}

// TEL
if (empty($_POST["tel"])) {
    $errorMSG .= "Veuillez indiquer votre numéro de téléphone";
} else {
    $tel = $_POST["tel"];
}

// ENTREPRISE
if (empty($_POST["entreprise"])) {
    $errorMSG .= "Veuillez indiquer votre entreprise";
} else {
    $entreprise = $_POST["entreprise"];
}


// MESSAGE
if (empty($_POST["message"])) {
    $errorMSG .= "Message is required ";
} else {
    $message = $_POST["message"];
}
 
 
$name = $_POST["name"];
$email = $_POST["email"];
$tel = $_POST["tel"];
$entreprise = $_POST["entreprise"];
$message = $_POST["message"];
 
$EmailTo = "votreemail@gmail.com,autreemail@hotmail.fr";
$Subject = "Nouveau message de monsite.com";
 
// le corps du mail
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
 
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
 
$Body .= "Tel: ";
$Body .= $tel;
$Body .= "\n";

$Body .= "Entreprise: ";
$Body .= $entreprise;
$Body .= "\n";

$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
 
// envoi email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
 
// redirection vers le message de validation
if ($success && $errorMSG == ""){
   echo "success";
}else{
    if($errorMSG == ""){
        echo "Something went wrong :(";
    } else {
        echo $errorMSG;
    }
}

?>

Les fonctions js de vérification

Si l’on suit le tutoriel de Tutsplus, voici le fichier js dépouillé, sans l’utilisation de bootstrap validator et tout le reste.

$("#contact").submit(function(event){
    
    event.preventDefault();
    submitForm();
});
function formSuccess(){ // ici des évènements qui s'actionnent lors de l'envoi du formulaire, typiquement, je cache le formulaire et le bouton d'envoi, et insère un message de validation à la place
     
	$("#contact").hide().html("#msgSubmit");
	$( "#msgSubmit" ).removeClass( "hidden" );
	
}
function submitForm(){
	var name = $("#name").val();
		var email = $("#email").val();
		var tel = $("#tel").val();
		var entreprise = $("#entreprise").val();
		var message = $("#message").val();
 
		 $.ajax({
			  type: "POST",
			  url: "form-process.php",
			  data: "name=" + name + "&email=" + email +"&tel=" + tel + "&entreprise=" + entreprise + "&message=" + message,
			  success : function(text){
				  if (text == "success"){
					  formSuccess();
				  } 
			  }
		  });
}

La fonction finale js + php

Puisqu’on se retrouve avec deux fonctions d’envoi, celle en ajax et celle du plugin jquery.validate.js, il va falloir mixer le tout : voici donc la version finalisée du fichier js. Les lignes sont commentées pour une meilleure compréhension.

function formSuccess(){  // voici la fonction "formSuccess" : en cas de soumission du formulaire, une fois les conditions passées, on envoie le formulaire et on affiche à la place du formulaire la div cachée contenant le message de succès.
	$("#contact").hide().html("#msgSubmit");
	$( "#msgSubmit" ).removeClass( "hidden" );	
}


$(function() {
 
  $("form[name='contact']").validate({
       rules: {
      // Chque input a un attribut "name" que l'on reprend ici pour la vérification
      nom: "required",
      prenom: "required",
      tel:{
       required: true,
      number: true
      },
      email: {
        required: true,
        // ono applique ici les règles d'email définies par le plugin
        email: true
      },
      message:"required"
    },
    // On définit ici les messages d'erreur propre à chaque champ
    messages: {
      nom: "veuillez insérer votre nom",
      prenom: "veuillez insérer votre prénom",
      entreprise:"veuillez indiquer une entreprise",
      tel: 'veuillez insérer un numéro de téléphone',
      email: "veuillez insérer une adresse mail valide",
      message:"veuillez remplir ce champ"
    },
    submitHandler: function(form) {
	//la fonction ajax insérée dans le submitHandler de jquery.validate
		var name = $("#name").val();
		var email = $("#email").val();
		var tel = $("#tel").val();
		var entreprise = $("#entreprise").val();
		var message = $("#message").val();
 
		 $.ajax({
			  type: "POST",
			  url: "form-process.php", // on envoie le tout dans la moulinette php du fichier form-process.php pour l'envoi du message
			  data: "name=" + name + "&email=" + email +"&tel=" + tel + "&entreprise=" + entreprise + "&message=" + message,
			  success : function(text){
				  if (text == "success"){ //si c'est ok, applique la fonction formSuccess
					  formSuccess();
				  } 
			  }
		  });
		}
	});
});

Avec ca, vous devriez donc avoir la vérification html5, celle du js côté client, et la vérification php côté serveur !

The post Valider ses formulaires avec jquery validate appeared first on Copier coller.

Personnaliser les légendes d’un graphique avec Chart Js

copier coller — Sat, 06 Jun 2020 18:16:49 +0000

Comment personnaliser ses légendes avec le plugin Chart js ?

Dans un précédent tuto, on a vu comment mettre rapidement en place un graphique de statistique par année. Vous pouvez vous référer au précédent tutoriel pour construite tout votre graphique.

Voici le rendu avec des légendes personnalisées:

See the Pen
Chart js Donught with custom labels by blindDev (@yuyazz)
on CodePen.

A la différence du précédent exemple, la première chose à faire ici est d’annuler les légendes par défaut :

legend: {
		  display: false
		},

Ensuite dans le html, on va construite une simple div. Je lui donne l’ID : « legendBlock« , mais vous pouvez lui donner n’importe quel nom.

Dans le js, on va utiliser la fonction myDoughnutChart.generateLegend(); pour insérer les légendes dynamiquement dans notre div en ciblant son ID :

document.getElementById('legendBlock').innerHTML = myDoughnutChart.generateLegend();

Voilà. ¨Pour le reste, on peut ensuite via notre css créer de simples cercles ou reproduire l’apparence des légendes par défaut. La fonction generateLegend() va déjà générer une liste formatée avec notamment les couleurs définies dans votre js.

...

Il vous suffira alors de styliser un peu plus votre liste

ul{
	list-style:none;
	padding-left:0;
	margin-left:0
}

#legendBlock li span{
    display: inline-block;
    width: 45px;
    height: 20px;
    margin-right: 5px;
	border:1px solid #fff

}
.legend{
	align-self:center;
}

The post Personnaliser les légendes d’un graphique avec Chart Js appeared first on Copier coller.