Z-index et Javascript [Résolu/Fermé]

- - Dernière réponse : 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
Bonjour à tous,

Je cherche désespérément à changer le z-index grâce à une fonction Javascript...
J'ai cherché sur ce forum les précédents sujets et même sur d'autres sites mais il y a toujours un truc qui ne va pas avec mon code -_-

Je cherche à faire cet effet un peu "photos posées sur une table" que l'on peut bouger.
Le top, ça serait que lorsque l'on clique sur une photo, celle-ci passe en premier plan par rapport aux autres et y reste !
La propriété CSS :active ne fonctionne que sur Chrome et remet le z-index normal à la fin de la sélection...

Voilà le site ou se trouvent mes travaux pour le moment, vous pouvez regarder les codes, ça sera plus simple que de les poster ici ^^

http://test-javascript.net46.net/

Merci à quiconque pourra m'aider ! ;)

Afficher la suite 

3 réponses

Meilleure réponse
Messages postés
330
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
29 juillet 2015
18
1
Merci
En utilisant jQuery:

$('.img_drag').click(function(){
$('.img_drag').css('z-index','1000');
});

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 6026 internautes nous ont dit merci ce mois-ci

Ca semble tout bête en effet, mais je ne comprend pas quand même.
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 ^^' )
jojo150393
Messages postés
330
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
29 juillet 2015
18 -
non fait comme ça :
<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.
Testé sous Chrome et FF, le code ne fonctionne pas :/
Messages postés
137
Date d'inscription
lundi 22 mars 2010
Statut
Contributeur
Dernière intervention
3 septembre 2014
29
1
Merci
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.
<script type="text/javascript"> 
 $(function() { 
  var zIndex = 1000; 
  $( ".img_drag" ).draggable(); 
  $( ".img_drag" ).mousedown(function() { 
   $(this).css('z-index', zIndex++); 
  }); 
 }); 
</script>

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 6026 internautes nous ont dit merci ce mois-ci

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)
jojo150393
Messages postés
330
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
29 juillet 2015
18 -
good game ! effectivement chui con pour le this mais c'est horrible quand on peut pas débugger directement.
Messages postés
330
Date d'inscription
samedi 12 septembre 2009
Statut
Membre
Dernière intervention
29 juillet 2015
18
0
Merci
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 .