jQuery : Astuces, bugs - Le MEMO du Web Développeur

Faire clignoter un élément avec JQuery

t@ra — Sun, 01 Dec 2024 23:00:00 +0000

Exemple simple pour faire clignoter un élement html (ici une image) grâce à JQuery.
J’utilise les fonctions natives JQuery fadeIn() et fadeOut() qui permettre de faire un fondu d’apparition et de disparition d’un élément, entrecoupées par un intervalle de temps grâce à la fonction delay (temps en ms).

Et je répète l’opération grâce à la fonction Javascript setInterval (mafonction, intervalle de répétition en ms)

Code HTML :

Code JQuery :

$(document).ready(function(){ 
    function FaireClignoterImage (){ $("#image-neon").fadeOut(200).delay(300).fadeIn(200); } 
    setInterval(FaireClignoterImage,700); 
});

Il existe d’autres techniques, notamment un effet de clignotement en pur CSS

The post Faire clignoter un élément avec JQuery first appeared on Le MEMO du Web Développeur.

Charger JQuery directement via les librairies google

t@ra — Sun, 03 Dec 2023 23:00:00 +0000

Si vous ne souhaitez pas héberger les scripts JQuery sur votre serveur, vous pouvez les récupérer sur votre site Internet directement depuis les Librairies Google.

Les avantages de cette technique :

Ce n’est pas votre serveur qui fournit la bande passante et traite les requêtes mais les serveurs de Google.
Comme beaucoup de sites Internet utilisent cette technique, il y a des chances qu’un internaute qui arrive sur votre site Internet ait déjà le script JQuery dans sa mémoire cache, chargée sur une autre site Internet, d’où un chargement optimisé de votre site Internet.

Charger la dernière version 1.x.x de Jquery depuis Google

Charger la dernière sous-version 1.6.x de Jquery depuis Google

boucle sur tous les div visibles enfants de l'élement d'id 'monelement' :

$("#monelement div:visible").each( function() {

});

The post Savoir si un élément est visible ou hidden first appeared on Le MEMO du Web Développeur.

Ajouter / Déplacer dynamiquement un élément dans le DOM avec jQuery

t@ra — Wed, 07 Aug 2013 18:21:01 +0000

jQuery propose quelques méthodes faciles d’utilisation pour ajouter des éléments dynamiquement dans notre code HTML après que la page se soit chargée.

Soit notre code HTML :


  -- Mon premier span ma_classe --
  -- Mon deuxième span ma_classe --
   Ce DIV est initialement dans le DOM en fin de fichier

insertAfter : Insérer du code après un autre élément

$("!Je suis les éléments de classe ma_classe!
").insertAfter('.ma_classe');

Le paragraphe sera inséré après la balise de fermeture de l’élément ma_classe

insertAfter() : Déplacer un élément dans le DOM

La méthode insertAfter peut aussi être utilisée pour déplacer un élément si elle est affectée à un élement se trouvant déjà dans le DOM

$("span").insertAfter('#mon_div');

Tous les éléments existants dans le DOM seront déplacés après l’élément d’identifiant #mondiv [Voir exemple ci dessus ]

insertBefore() : Deplacer/Ajouter un élément juste avant un autre élément

La métode insterBefore s’utilise de la même manière mais insère le nouvel élément devant l’élément passé en paramètre.

$("Un petit texte à insérer dans le DOM juste avant mon_div").insertBefore('#mon_div');

append() : Insérer un élément à l’intérieur d’un autre élément (à la fin de ce dernier)

La méthode append permet quant à elle d’insérer un élément non plus avant ou après mais à l’intérieur de la balise de l’élément auquelle elle est affectée, et ce juste avant la balise de fermeture de cet élément.
Ici on insére un paragraphe dans le div d’identifiant mon_div

$( "#mon_div" ).append( "** Je mets ça en fin de DIV **
" );

prepend() : Insérer un élément à l’intérieur d’un autre élément (au début de ce dernier)

prepend() fonctionne comme append, à la différence que l’élément va être ajouté au début de son conteneur, juste après la balise d’ouverture.

$( "#mon_div" ).prepend( "++ Tiens je rajoute ça en début de div ++
" );

append et prepend permettent aussi de sélectionné un élément du DOM et de le déplacer à l’intérieur d’un autre élément (à la fin ou au début comme vous l’avez compris).

The post Ajouter / Déplacer dynamiquement un élément dans le DOM avec jQuery first appeared on Le MEMO du Web Développeur.

Récupérer le contenu ou afficher du texte dans un textarea en JQuery

t@ra — Thu, 01 Aug 2013 06:08:41 +0000

On récupère le texte affiché dans un textarea en JQuery avec la fonction val()

On peut aussi modifier le contenu grâce à la même fonction val(« mettre du text dans le textarea »)

Code HTML :


 Mon texte ici

Afficher le texte contenu dans un textarea en JQuery

$("#afficher_texte").click(function(){
    alert ("Le texte contenu dans le textarea est " + $("#mon_textarea").val());
});

Insérer du texte dans un textarea en JQuery

$("#afficher_texte").click(function(){ 
  alert ("Le texte contenu dans le textarea est " + $("#mon_textarea").val()+" mais je vais lui rajouter une série de XXXXXXXX en fin de texte!); 
  $("#mon_textarea").val($("#mon_textarea").val()+'XXXXXXXX')
});

The post Récupérer le contenu ou afficher du texte dans un textarea en JQuery first appeared on Le MEMO du Web Développeur.

Empêcher de coller du texte dans un champs input de type text

t@ra — Thu, 11 Jul 2013 22:00:00 +0000

Pour empêcher le copier collage d'un texte dans un champs html input text, on va utiliser la fonction javascript preventDefault() sur l'événément keydown. PreventDefault empêchera l'action du keydown() de se déclencher .

En l'occurence, on ajoute ici un "écouteur" d'événement addEventListener sur l'événement keydown de l'élément d'identifiant "no_paste". Si la touche ayant déclenché l'événement est le coller, on empêche le déclanchement de l'action de collage.

Code HTML :

Code JQuery :

document.getElementById('no_paste').addEventListener('keydown',
function (foo)
{
    if (foo.keyCode == 86) // Code clé du copier/coller
    {
      alert('Le collage de texte n'est pas autorisé !');
      foo.preventDefault();
    }
 }

The post Empêcher de coller du texte dans un champs input de type text first appeared on Le MEMO du Web Développeur.

Ajouter un masque de saisie dans un champs input text

t@ra — Thu, 13 Jun 2013 06:18:16 +0000

Il est possible de rajouter un masque de saisie lors de la saisie d’un champs input text d’un formulaire HTML qui empêche l’utilisateur de saisir certains caractères.

Ce masque codé en javascript, se déclanche sur l’événement keyup du champs texte du formulaire.
L’input text doit porter une classe spécifique, ici la classe only_alpha_num qui nous permettra de déclancher l’évenement keyup.

Lorsque l’utilisateur tape un caractère, on analyse ce caractère dans l’événement keyup que l’on fait passer par le filtre d’une expression régulière. Dans notre cas on vérifie que le caractère tapé est un caractère alphanumérique, si la condition est vérifiée, on applique la fonction supprimer_dernier_caractere qui va supprimer du champs text le dernier caractère saisi.
Il devient impossible alors pour l’utilisateur de saisir un autre caractère qu’un caractère alphanumérique.

code HTML :

Code javascript :

function supprimer_dernier_caractere(elm) {
  var val = $(elm).val();
var cursorPos = elm.selectionStart;
$(elm).val(
   val.substr(0,cursorPos-1) + // before cursor - 1
  val.substr(cursorPos,val.length) // after cursor
)
elm.selectionStart = cursorPos-1; // replace the cursor at the right place
elm.selectionEnd = cursorPos-1;
}

$(document).ready( function () {
  // Supprime le dernier caractère s'il n'est pas alphanumérique sur evt keyup
  $('body').delegate('input.only_alpha_num','keyup',function(){
    if(!$(this).val().match(/^[0-9a-z]*$/i)) // a-z et 0-9 uniquement
      supprimer_dernier_caractere(this);
  });


// Annulation du "coller" dans l'input texte auquel on a affecté l'identifiant "no_paste"
document.getElementById('no_paste').addEventListener('keydown', 
  function (foo){
    if (foo.keyCode == 86)
    {
       // alert('Vous avez copié du texte');
foo.preventDefault();
    }
 });


})

The post Ajouter un masque de saisie dans un champs input text first appeared on Le MEMO du Web Développeur.

Modifier l’attribut src d’une image avec JQuery

t@ra — Wed, 22 May 2013 06:20:39 +0000

JQuery permet grâce à la propriété attr, de modifier les attributs d’un éléments sur un événement donné.

Il est possible par exemple de changer en Jquery l’image affectée à l’élément en modifiant son attribut « src « .

Ici on affecte l’image monimage.jpg à l’élément img d’identifiant #mon_image :

$("#mon_image").attr('src','monimage.jpg');

Exemple de modification d’une image au survol de la souris (événement hover)

Code HTML :

Code JQuery :

$("#mon_image").hover(
   function () {
     $(this).attr('src','monimage1.jpg');  
   },
   function () {
      $(this).attr('src','monimage2.jpg');  
   }
);

Exemple :

The post Modifier l’attribut src d’une image avec JQuery first appeared on Le MEMO du Web Développeur.

DatePicker de JQuery : Déployer le calendrier à l’ouverture de la page

t@ra — Tue, 04 Dec 2012 08:14:18 +0000

Le plugin calendrier Datepicker de JQueryUI se déploie par défaut si l’on click sur le champs de date (en fait lorsque le champs prend le focus) ? voir exemple ici sur le champs de la date de naissance.

On peut parfois vouloir déployer le calendrier automatiquement dès l’ouverture de la page, pour ce faire il sufffit, grâce à JQuery de mettre le focus sur l’input du champs de date au chargement de la page

Code HTML :

Code JQuery :

The post DatePicker de JQuery : Déployer le calendrier à l’ouverture de la page first appeared on Le MEMO du Web Développeur.

Apparition d’un élément en fondu avec JQuery sur le survol de souris

t@ra — Tue, 04 Dec 2012 08:11:05 +0000

La fonction suivante permet de faire un fondu entre deux images lors du passage de la souris sur l’élément #monimage

Le principe : Lors du survol de #monimage dont le background est ‘image1.png’ un élément div temporaire (#temp) est créé #temp dont le background est ‘image2.png’. On affiche cet élément en fondu grâce la fonction animate de JQuery. Il est possible d’optimiser le chargement de l’image en utilisant les sprites (inclure image1.ppng et image2.png dans la même image et jouer sur la position du background lors de l’affichage)

Petit exemple ici

Code CSS :

#monimage{
background:url('image1.png') no-repeat top left;
}

Code JQuery :

The post Apparition d’un élément en fondu avec JQuery sur le survol de souris first appeared on Le MEMO du Web Développeur.

Créer un effet d’opacité sur le survol d’une image en jQuery

t@ra — Sun, 30 Sep 2012 16:34:14 +0000

Voici une fonction JQuery qui donne un effet sympathique sur le survol d’une image, dans cet exemple, lorsque celle çi est associée à un lien .
L’image est rendu légèrement transparente au survol de la souris.
Alternative plus classe à l’ajout de bordure à l’image sur le hover !

Code HTML :

Code JQuery : Evénement sur le survol de toutes les images associées à un lien

$('a img').hover(
   function(){ $(this).animate({ opacity : '.75' }); },
   function(){ $(this).animate({ opacity : '1' }); }
  );

The post Créer un effet d’opacité sur le survol d’une image en jQuery first appeared on Le MEMO du Web Développeur.

Détecter un click à l’extérieur d’un élément avec JQuery

t@ra — Thu, 09 Aug 2012 07:04:51 +0000

Le code suivant permet de repérer si l’utilisateur clique à l’extérieur ou sur un élément d’identifiant ‘id_de_mon_element’.

event.target correspond à l’élément qui a déclenché l’événement, où est est le paramètre passé à la fonction

$('html').click(function(event){
     if(event.target.id == 'id_de_mon_element') {
       alert ("j'ai cliqué sur mon élément");
     } else {
       alert ("j'ai cliqué à l'extérieur de mon élément");
     }
 });

The post Détecter un click à l’extérieur d’un élément avec JQuery first appeared on Le MEMO du Web Développeur.

Afficher une image différente selon la date de l’année en javascript

t@ra — Wed, 08 Aug 2012 07:06:47 +0000

Ce script javascript permet d’afficher une image de background différente selon les saisons à l’élément d’identifiant id= »monimage »

L’idée est d’analyser la date courante afin de déterminer la saison en utilisant l’objet new Date(année, mois, jour)

The post Afficher une image différente selon la date de l’année en javascript first appeared on Le MEMO du Web Développeur.

not(expr) Element d’exclusion en Jquery

t@ra — Tue, 24 Apr 2012 07:15:37 +0000

not(expr) va nous permettre d’exclure une classe d’élément parmis les éléments sélectionnés dans une expression.

Ici, on affecte un background à tous les éléments de classe « maclassegenerale » et qui n’ont pas la classe « maclasseaexclure »

Code HTML :

 mon 1
 mon 2
 mon 3
 mon 4

Code Javascript :

$('.maclassegenerale').not(".maclasseaexclure").css({"background":"url(btPlay.png)  no-repeat 5px 5px"});

L’image de background ne va être affectée qu’aux éléments « mon1 » et « mon3 »

The post not(expr) Element d’exclusion en Jquery first appeared on Le MEMO du Web Développeur.

not(expr) Element d’exclusion en Jquery

t@ra — Mon, 23 Apr 2012 22:00:00 +0000

not(expr) va nous permettre d'exclure une classe d'élément parmis les éléments sélectionnés dans une expression.

Ici, on affecte un background à tous les éléments de classe "maclassegenerale" et qui n'ont pas la classe "maclasseaexclure"

Code HTML :

 mon 1
 mon 2
 mon 3
 mon 4

Code Javascript :

$('.maclassegenerale').not(".maclasseaexclure").css({"background":"url(btPlay.png)  no-repeat 5px 5px"});

L'image de background ne va être affectée qu'aux éléments "mon1" et "mon3"

The post not(expr) Element d’exclusion en Jquery first appeared on Le MEMO du Web Développeur.

Connaitre le nombre d’éléments possédant une classe définie

t@ra — Wed, 11 Apr 2012 07:08:33 +0000

JQuery permet de calculer facilement le nombre d’éléments étant affectés d’une classe en particuler grâce à la propriété length utilisée tel que suit :

var nb_element_de_class;
nb_element_de_class=$(".ma_classe").length;

la variable nb_element_de_class contient le nombre d’éléments affectés de la classe ma_classe

The post Connaitre le nombre d’éléments possédant une classe définie first appeared on Le MEMO du Web Développeur.

Comment faire des opérations avec les attributs de style exprimés en px

t@ra — Thu, 05 Apr 2012 07:09:46 +0000

Pour faire des opérations en javascript avec des mesures exprimées en px comme

$(« #monDiv1 »).css(‘height’) qui vaut ‘500px‘ et

$(« #monDiv2_tutos »).css(‘marginTop’) qui vaut ‘200px‘

Utilisons la fonction parseInt qui va supprimer l’attribut ‘px’ de la valeur et nous permettre de faire toutes les opérations que l’on veut en utilisant les attributs de style longeur ou hauteur de nos éléments.

mavaleur =parseInt($("#monDiv1").css('height')) - parseInt($("#monDiv2").css('marginTop')

ici mavaleur =300

The post Comment faire des opérations avec les attributs de style exprimés en px first appeared on Le MEMO du Web Développeur.

lecture seule d’un textarea en JQuery

t@ra — Mon, 12 Mar 2012 23:00:00 +0000

Voici différentes méthodes pour rendre impossible l'écriture dans un textarea:

Déclaration du textarea en HTML :

Rendre le textarea non editable en affectant l'attribut readonly en JQuery :

$(".elementtextarea").attr('readonly','readonly');

Rendre le textarea non editable en affectant l'attribut disabled en JQuery :

$(".elementtextarea").prop("disabled", true); //(valable depuis jquery 1.6 !!) équivalent de

$(".elementtextarea").attr("disabled", "disabled");// évenement onclic inaccessible sur l'input

Différences entre les propriétés disabled et readonly

La propriété readonly permet à la valeur de l'input d'être envoyée sur soumission du formulaire, ce qui n'est pas le cas de la propriété disabled.
Il est possible de mettre le focus sur un élement readonly, pas sur un élément disabled.
Les éléments disabled ne sont pas parcourus lors d'une navigation entre les champs avec la touche TAB.
Les éléments