Z-index et Javascript
Résolu
TimTim
-
jojo150393 Messages postés 365 Statut Membre -
jojo150393 Messages postés 365 Statut Membre -
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 ! ;)
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 ! ;)
3 réponses
-
En utilisant jQuery:
$('.img_drag').click(function(){
$('.img_drag').css('z-index','1000');
});
-
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 ^^' ) -
-
-
-
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>-
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) -
-
-
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 .
