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 ! ;)
A voir également:
- Z-index et Javascript
- Code ascii de a à z - Guide
- Index téléphonique - Guide
- Gpu z - Télécharger - Informations & Diagnostic
- Cpu z - Télécharger - Informations & Diagnostic
- Telecharger index - Télécharger - Gestion de fichiers
3 réponses
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)
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 .
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 ^^' )
<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.