Forum du club des développeurs et IT Pro - jQuery https://www.developpez.net/forums/ fr Wed, 29 Jul 2026 06:36:59 GMT vBulletin 15 https://forum.developpez.be/images/misc/rss.png Forum du club des développeurs et IT Pro - jQuery https://www.developpez.net/forums/ <![CDATA[Comment puis ajouter un box au-dessus d'un marker et que ce box le suive au déplacement de la carte]]> https://www.developpez.net/forums/showthread.php?t=2184888&goto=newpost Tue, 28 Jul 2026 20:54:45 GMT Bonjour à tous,


J'essaye de hacker leaflet :
:D:D:D:D

Quand on clique su un marker, il y avait un popup qui s'ouvrait avec des informations.

J'aimerais que lorsque je clique sur ce marker, un popup s'ouvre mais avec un graph, plus préciséement, un polarArea qui est généré avec Chartjs.

Pour le moment, je me consacre au popup. Quand je clque sur le marker, mon popup s'ouvre et j'arrive le positionner au-dessus du marker.
Mon problème est que lorsque je déplace ma carte, le marker se déplace, mais pas le popup.

Pour avoir une idée, vous pouvez vous ceci online ici https://iot-charts.ch. Il n'y pas besoin de compte.

Pour reproduire l'effet, viser le marker rouge et cliquer dessus. Puis déplacer la carte.

Ce que j'ai essayé de faire sans succès.

le code HTML de mon marker ainsi que des ces éléments parents est

Code:
1
2
3
<div class="leaflet-marker-icon leaflet-div-icon leaflet-zoom-animated leaflet-interactive" style="margin-left: 0px; margin-top: 0px; transform: translate3d(826px, 402px, 0px); z-index: 402;" title="Jardin" tabindex="0" role="button" aria-describedby="leaflet-tooltip-132">
<i class="fa-solid fa-2xl fa-sun-plant-wilt red"></i>
</div>


Pour le moement, ca se passe comme cela.
J'ai un élément

Code:
1
2
3
<div id="chartContainer">
		<p>Comment puis-je faire en sorte que ce box suive l'icon sur lequel j'ai cliqué, lorsque je déplace la crate</p>
	</div>
Code:
1
2
3
4
5
6
7
 
#chartContainer{
  display: none;
  background-color: #ffffff;
  width: 220px;
  padding:5px;
}

Puis voici mon code JS qui le positionne au niveau du marker
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
marker.on("click", function(e){
                            console.log("e", e);
 
                            $('#chartContainer').show().css(
                                {
                                    "position":"absolute",
                                    "top": e.containerPoint.y - $('#chartContainer').height()-20,
                                    "left": e.containerPoint.x-90, 
                                    "z-index":"1000", 
                                })
 
 
                            //$('this').css({"border":"5px solid red","z-index":"1000"});
 
                            //$('this').parent('.leaflet-marker-icon').css({"border":"5px solid red","z-index":"1000"})
                            //$('this').parent('.leaflet-marker-icon').before('<div id="chartContainer2">TOTO</div>');
                            //$('#chartContainer').prependTo('this');
 
                        })

Comme je l'ai dit, ce box s'affiche bien là ou je veux mais il ne se déplace pas avec le marker
Mopn idée est quand je clique sur le marker mon élément, déplace entre le marker et son div parent

Code:
1
2
3
4
5
6
<div class="leaflet-marker-icon leaflet-div-icon leaflet-zoom-animated leaflet-interactive" style="margin-left: 0px; margin-top: 0px; transform: translate3d(826px, 402px, 0px); z-index: 402;" title="Jardin" tabindex="0" role="button" aria-describedby="leaflet-tooltip-132">
 
<div id="chartContainer"></div>
 
<i class="fa-solid fa-2xl fa-sun-plant-wilt red"></i>
</div>

J'ai essayé plusieur truc avant d'essayer de déplacer le <div id="chartContainer">

de mettre un cadre rouge sur le parent du marker, sans succès
Code:
$('this').parent('.leaflet-marker-icon').css({"border":"5px solid red","z-index":"1000"})

D'ajouter dynamiquement le chartContainer
Code:
$('this').parent('.leaflet-marker-icon').before('<div id="chartContainer2">TOTO</div>');

Finallement, j'ai essayé de le déplacer dans le container de mon marker, sans succès
Code:
1
2
3
marker.on("click", function(e){
  $('#chartContainer').show().prependTo($('this'));
})

je précise que le click fonctionne bien, mais je ne trouve pas comment bein cibler les éléments, ...et sans pour autant être sûre qu'après cela, le box se déplacera avec le marker :?

Merci pour vos lumières ]]> jQuery pierrot10 https://www.developpez.net/forums/d2184888/javascript/bibliotheques-frameworks/jquery/puis-ajouter-box-dessus-d-marker-box-suive-deplacement-carte/ <![CDATA[[waypoints] Uncaught TypeError: t.isFunction is not a function]]> https://www.developpez.net/forums/showthread.php?t=2184658&goto=newpost Tue, 14 Jul 2026 19:30:42 GMT Bonjour,

Sur ma page, j'ai des numéros. Par exemple

Code:
<div class="number" data-from="0" data-to="1131288">1131288</div>
J'utilise une librairie (jquery.countTo.js") qui va afficher l'incémentation de 0 à 1131288. Ceci fonctionne.

Ce que j'aimerais c'est que l'incémentation commence quand l'utilisateur scroll la page mais que lorsque les numéro sont visible. Si non, rien ne se passe.

J'ai trouvé une vielle librairie waypoints car apparemment, elle n'est pas mise à jour depuis 10 ans :(
Ne connaissant rien d'autre, j'essaye sans succès.

Ce que j'ai fait.

1. Import:
Code:
1
2
3
4
5
<script src="assets/js/jquery-4.0.0.min.js"></script>
 
	<script src="assets/js/jquery.countTo.js"></script>
	<script src="assets/js/waypoints/lib/jquery.waypoints.min.js"></script>
	<script src="assets/js/script.js"></script>

2. dans script.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(window).on("load", function(){
	//  Show counter after appear
 
    var $number = $('.number');
    if ($number.length > 0 ) {
 
        $('.number').waypoint(function() {
            initCounter();
        }, {
            offset: '25%'
        })
 
    }
});
 
function initCounter(){
    $('.number').countTo({
        speed: 3000,
        refreshInterval: 50
    });
}

Je ne comprends pas pourquoi cette ligne
Code:
$('.number').waypoint(function() {}

me génère cette erreur
Citation:
Uncaught TypeError: t.isFunction is not a function
t jQuery
<anonymous> https://isite.ch/assets/js/script.js:8
jQuery 2
Si je regarde cette page

J'ai essayé ceci
Code:
1
2
3
4
5
var waypoints = $('#handler-first').waypoint(function(direction) {
  notify(this.element.id + ' hit 25% from top of window') 
}, {
  offset: '25%'
})

et je l'ai modifié ainsi

Code:
1
2
3
4
5
$('.number').waypoint(function(direction) {
  initCounter();
}, {
  offset: '25%'
})
mais sans mielleurs résulats

Si non connaitriez-vous quelque chose de plus récent?

Mercii ]]> jQuery pierrot10 https://www.developpez.net/forums/d2184658/javascript/bibliotheques-frameworks/jquery/waypoints-uncaught-typeerror-t-isfunction-is-not-function/ <![CDATA[que signifie l'étoile dans le selector ?]]> https://www.developpez.net/forums/showthread.php?t=2180065&goto=newpost Fri, 24 Oct 2025 09:18:04 GMT bonjour, en reprenant du... bonjour,

en reprenant du code pour un selector jquery, je remarque un asterisk, que signifie-t-il ?
que je le mette ou l'enlève, ça sélectionne bien ce que je veux (les élements ayant lundi,mardi.. dans l'attribut data-name)

Code:
1
2
3
$('*[data-name="Mardi"],[data-name="Lundi"],[data-name="Mercredi"],[data-name="Jeudi"],[data-name="Vendredi"],[data-name="Samedi"]').each(function() {
	$(this).css("background-image","url('files/background_papier.png')");			
});

Normalement le * veut dire de sélectionner tout dans le cas d'un (*) mais là, avant une énumération de plusieurs conditions, je ne vois pas son utilité...

avez-vous une idée ? ]]> jQuery clavier12AZQSWX https://www.developpez.net/forums/d2180065/javascript/bibliotheques-frameworks/jquery/signifie-l-etoile-selector/ Ajouter une mention CSS dans le header pour imprimer en mode paysage https://www.developpez.net/forums/showthread.php?t=2179813&goto=newpost Mon, 13 Oct 2025 09:27:01 GMT bonjour, je travaille sur... bonjour,

je travaille sur le rendu d'un framework propriétaire.
Quand on utilise la fonction imprimer du navigateur c'est un mode portrait.
Je voudrais le forcer en mode paysage.
je peux pas changer la CSS générée par le framework mais je peux ajouter un script JS en pied de page.

est-ce que par change je peux hacker gentiment le header pour ajouter une balise CSS en mode print indiquant d'utiliser l'orientation landscape au lieu de portrait (et au lieu de -vide- default) ?

merci de votre aide ]]> jQuery clavier12AZQSWX https://www.developpez.net/forums/d2179813/javascript/bibliotheques-frameworks/jquery/ajouter-mention-css-header-imprimer-mode-paysage/ Annuaire perso en HTML https://www.developpez.net/forums/showthread.php?t=2179510&goto=newpost Sat, 27 Sep 2025 10:51:58 GMT Bonjour, je souhaite créer... Bonjour,
je souhaite créer un annuaire perso.
Je ne retrouve pas mes données du fichier. JSON dans le htlm index.
Si quelqu'un pourrait m'aider, je le remercie par avance .
voici les fichiers : https://nuage01.apps.education.fr/in...areAQdxmi4HmSe
index.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF‑8">
  <title>Annuaire</title>
  <style>
    body {
      font-family: Arial, sans‑serif;
      margin: 20px;
      background-color: #f9f9f9;
      color: #333;
    }
    header {
      display: flex;
      align-items: center;
      border-bottom: 2px solid #273375; /* bleu foncé */
      padding-bottom: 10px;
      margin-bottom: 20px;
    }
    header img { height: 60px; margin-right: 15px; }
    header h1 {
      color: #273375;
      font-size: 1.8em;
      margin: 0;
    }
    #searchBar {
      margin-bottom: 15px;
      width: 100%;
      padding: 8px;
      font-size: 1em;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .contact-list { list-style: none; padding: 0; }
    .contact-item {
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 10px;
    }
    .contact-item img {
      border-radius: 50%;
      width: 50px;
      height: 50px;
      object-fit: cover;
      margin-right: 12px;
    }
    .contact-info {
      display: flex;
      flex-direction: column;
    }
    .name { font-weight: bold; color: #273375; }
    .role { font-size: 0.9em; color: #555; }
  </style>
</head>
<body>
 
<header>
  <img src=" alt="">
  <h1>Annuaire interne</h1>
</header>
 
<input type="text" id="searchBar" placeholder="Rechercher un contact..." />
 
<ul class="contact-list" id="contactList"></ul>
 
<script>
let contacts = [];
 
// Affichage des contacts
function afficher(contactsFiltres) {
  const list = document.getElementById('contactList');
  list.innerHTML = '';
  contactsFiltres.forEach(c => {
    const li = document.createElement('li');
    li.className = 'contact-item';
    li.innerHTML = `
      <img src="${c.photo}" alt="Photo de ${c.nom}" />
      <div class="contact-info">
        <span class="name">${c.nom}</span>
        <span class="role">${c.role}</span>
        <span class="email">${c.email}</span>
      </div>`;
    list.appendChild(li);
  });
}
 
// Charger les contacts depuis le fichier JSON
fetch('contacts.json')
  .then(response => response.json())
  .then(data => {
    contacts = data;
    afficher(contacts);
  })
  .catch(error => {
    console.error("Erreur lors du chargement des contacts :", error);
  });
 
// Filtrage dynamique
document.getElementById('searchBar').addEventListener('input', function() {
  const terme = this.value.toLowerCase();
  const filtres = contacts.filter(c =>
    c.nom.toLowerCase().includes(terme) ||
    c.role.toLowerCase().includes(terme) ||
    c.email.toLowerCase().includes(terme)
  );
  afficher(filtres);
});
</script>
 
</body>
</html>
contacts.json
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[
  {
    "nom": "Dupont, Marie",
    "role": "Inspectrice",
    "email": "marie.dupont@ac-orleans-tours.fr",
    "photo": "https://via.placeholder.com/50?text=MD"
  },
  {
    "nom": "Martin, Julien",
    "role": "IA-IPR",
    "email": "julien.martin@ac-orleans-tours.fr",
    "photo": "https://via.placeholder.com/50?text=JM"
  },
  {
    "nom": "Durand, Sophie",
    "role": "Chargée de mission",
    "email": "sophie.durand@ac-orleans-tours.fr",
    "photo": "https://via.placeholder.com/50?text=SD"
  }
]
Bien à vous, ]]> jQuery Jpoly3 https://www.developpez.net/forums/d2179510/javascript/bibliotheques-frameworks/jquery/annuaire-perso-html/ Passer un parametre à une fonction https://www.developpez.net/forums/showthread.php?t=2179322&goto=newpost Wed, 17 Sep 2025 16:06:18 GMT Bonjour, Pour une appli... Bonjour,
Pour une appli développée avec codeigniter
J'utilise un script jquery, que j'ai trouvé sur le web, pour ajouter dynamiquement des champs à un formulaire
Le script est appelé dans une view :
Code:
<a href="javascript:void(0);" class="add_input_button" title="Add field"><img src="add-icon.png"/></a>
Il contient ceci :
(j'ai viré une bonne partie du code HTML de new_field_html, inutile pour la compréhension du pb)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
    var max_fields = 10;
    var add_input_button = $('.add_input_button');
    var field_wrapper = $('.field_wrapper');
    var new_field_html = '...<a href="javascript:void(0);" class="remove_input_button" title="Remove field"><img src="img/books_remove-icon.png"/></a>...';
    var input_count = 1;
    $(add_input_button).click(function(){
        if(input_count < max_fields){
            input_count++;
            $(field_wrapper).append(new_field_html);
        }
    });
    $(field_wrapper).on('click', '.remove_input_button', function(e){
        e.preventDefault();
        $(this).closest('#inputFormRow').remove();
        input_count--;
    });
});
En ce qui concerne la partie :
Code:
$(add_input_button).click(function(){
du code, je voudrais modifier le chemin d'accès à l'IMG parce que comme tel, elle ne s'affiche pas. Il faudrait que je puisse passer le chemin, depuis la view, au code JS
j'imagine qu'il faut modifier javascript:void(0); pour lui passer le paramètre "pathToImg"
Mais je ne sais pas comment faire et encore moins comment modifier le script pour récupérer le paramètre
Toute aide sera la bienvenue, sachant que je vais être honnête, je n'ai pas la moindre envie de me plonger dans la doc pour apprendre jquery car j'en ai une utilisation strictement limité à ce cas de figure et je manque cruellement de temps.
Merci ]]> jQuery foxbille https://www.developpez.net/forums/d2179322/javascript/bibliotheques-frameworks/jquery/passer-parametre-fonction/