Z-index et Javascript
Résolu/Fermé
TimTim
-
19 avril 2012 à 18:04
jojo150393 Messages postés 330 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 29 juillet 2015 - 19 avril 2012 à 20:53
jojo150393 Messages postés 330 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 29 juillet 2015 - 19 avril 2012 à 20:53
A voir également:
- Z-index et Javascript
- Telecharger javascript - Télécharger - Langages
- Code ascii de a à z - Guide
- Cpu z pc - Télécharger - Informations & Diagnostic
- Index téléphonique - Guide
- Free z - Guide
3 réponses
jojo150393
Messages postés
330
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
29 juillet 2015
23
19 avril 2012 à 18:20
19 avril 2012 à 18:20
En utilisant jQuery:
$('.img_drag').click(function(){
$('.img_drag').css('z-index','1000');
});
$('.img_drag').click(function(){
$('.img_drag').css('z-index','1000');
});
vincebzh
Messages postés
137
Date d'inscription
lundi 22 mars 2010
Statut
Contributeur
Dernière intervention
7 mai 2013
29
Modifié par vincebzh le 19/04/2012 à 20:05
Modifié par vincebzh le 19/04/2012 à 20:05
Salut.
Dans la fonction click, il faut utiliser this à la place du sélecteur ".img_drag", sinon c'est tous les objets ayant cette classe qui vont se retrouver avec un z-index de 1000.
Ensuite, dans la fonction "draggable", il doit certainement y avoir un preventDefault qui annule l'exécution du click.
Le plus simple est de passer par un mousedown qui sera exécuté avant le drag.
Normalement, ça devrais fonctionner.
Dans la fonction click, il faut utiliser this à la place du sélecteur ".img_drag", sinon c'est tous les objets ayant cette classe qui vont se retrouver avec un z-index de 1000.
Ensuite, dans la fonction "draggable", il doit certainement y avoir un preventDefault qui annule l'exécution du click.
Le plus simple est de passer par un mousedown qui sera exécuté avant le drag.
Normalement, ça devrais fonctionner.
<script type="text/javascript">
$(function() {
var zIndex = 1000;
$( ".img_drag" ).draggable();
$( ".img_drag" ).mousedown(function() {
$(this).css('z-index', zIndex++);
});
});
</script>
Effectivement, cela fonctionne parfaitement !
Je ne connaissais pas du tout le "this", mais je vois déjà son utilité et grâce à ça je pense avoir résolu une bonne partie des problèmes que j'ai pu avoir auparavant !
Merci beaucoup pour l'aide ! :D
(Merci quand même à jojo150393 qui s'est donné du mal pour me répondre)
Je ne connaissais pas du tout le "this", mais je vois déjà son utilité et grâce à ça je pense avoir résolu une bonne partie des problèmes que j'ai pu avoir auparavant !
Merci beaucoup pour l'aide ! :D
(Merci quand même à jojo150393 qui s'est donné du mal pour me répondre)
jojo150393
Messages postés
330
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
29 juillet 2015
23
19 avril 2012 à 20:53
19 avril 2012 à 20:53
good game ! effectivement chui con pour le this mais c'est horrible quand on peut pas débugger directement.
jojo150393
Messages postés
330
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
29 juillet 2015
23
Modifié par jojo150393 le 19/04/2012 à 19:09
Modifié par jojo150393 le 19/04/2012 à 19:09
essaye comme ça plutot :
<script type="text/javascript">
jQuery(function($){
$( ".img_drag" ).draggable();
$('.img_drag').click(function(){
alert('salut');
});
});
</script>
si quand tu cliques ça affiche "salut" c'est que Jquery marche.
Ensuite tu écris :
<script type="text/javascript">
jQuery(function($){
$( ".img_drag" ).draggable();
$('.img_drag').click(function(){
$('.img_drag').css('z-index','1000');
});
});
</script>
et si ça ne marche pas tu écris :
<script type="text/javascript">
jQuery(function($){
$( ".img_drag" ).draggable();
$('.img_drag').click(function(){
$('.img_drag').addClass('index');
});
});
</script>
et dans la partie css:
.index[z-index:1000):
Je suis pas un pro mais en moins je cherche, je teste, je me casse la tête et parfois JE TROUVE .
<script type="text/javascript">
jQuery(function($){
$( ".img_drag" ).draggable();
$('.img_drag').click(function(){
alert('salut');
});
});
</script>
si quand tu cliques ça affiche "salut" c'est que Jquery marche.
Ensuite tu écris :
<script type="text/javascript">
jQuery(function($){
$( ".img_drag" ).draggable();
$('.img_drag').click(function(){
$('.img_drag').css('z-index','1000');
});
});
</script>
et si ça ne marche pas tu écris :
<script type="text/javascript">
jQuery(function($){
$( ".img_drag" ).draggable();
$('.img_drag').click(function(){
$('.img_drag').addClass('index');
});
});
</script>
et dans la partie css:
.index[z-index:1000):
Je suis pas un pro mais en moins je cherche, je teste, je me casse la tête et parfois JE TROUVE .
19 avril 2012 à 18:29
J'ai placé ce bout de code comme ceci :
<script type="text/javascript"> $(function() { $( ".img_drag" ).draggable(); }); $('.img_drag').click(function(){ $('.img_drag').css('z-index','1000'); }); </script>Ca ne fonctionne pas...
(Désolé, je ne suis vraiment pas une flèche en Javascript ^^' )
19 avril 2012 à 18:34
<script type="text/javascript"> $(function() { $( ".img_drag" ).draggable(); $('.img_drag').click(function(){ $('.img_drag').css('z-index','1000'); }); }); </script>c'est possible que ça ne marche pas car je ne sais plus si css prend en compte le z-index.
19 avril 2012 à 18:41