Discussion :

[Babatoa]

Bonjour à vous tous,

Je suis actuellement en train de développer un site perso assez simple. Je suis novice en développement et j'apprends pas à pas. Je suis actuellement bloqué sur un élément que j'aimerai développer sur mon site.

C'est un bouton fixe sur la home qui me permettrait d'afficher deux nouveaux éléments à l'ensemble de mes pages: un background image (il n'y a au départ qu'un bacckground-color) ainsi qu'une image qui follow le curseur de la souris. Quand le bouton est désactivé, ces deux éléments doivent être invisible.

Après mettre renseigné sur le web je pense que je dois utiliser cette fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function bascule(){
          var etat = document.getElementById('div1').style.display;
          var bouton = document.getElementById('afficheCache');
 
          if (etat =='none'){
          document.getElementById('div1).style.display='block';
          bouton.value = 'Cacher la balise div';
      }
      else{
      document.getElementById('div1').style.display='none';
      bouton.value = 'Afficher la balise div';
      }
}

J'espère être suffisamment clair, merci de votre attention

[ryan]

Yop!

Il manque le guillemet fermant après div1 dans la ligne 6. Cela dit, ta fonction "bascule" devrait fonctionner, pour autant que l'HTML suive.
Pour ce qui est de faire suivre le curseur par une image, tu y tiens vraiment? Perso, ça m'énerverait assez vite.

[Babatoa]

Bonsoir en merci de votre rapidité de réponse, en effet j'ai fait un petit oubli au niveau de l'écriture merci.

Par contre, je vais essayer d'être plus clair car mon niveau étant assez bas, j'ai besoin d'une aide plus précise si possible. En effet je sais que c'est plus que déconseillé d'insérer un mousemove mais c'est dans le cadre d'un mode "activable" un peu spécial, je vais essayer de mieux l'expliquer

Mon souhait est d'insérer dans mon header un bouton fixe activable. J'ai rapidement fait une maquette pour que vous arriviez à le visualiser. C'est le bouton en haut à droite, qui sera représenté par une image.



Lorsque le bouton est activé, un background-image se rajoute au body de mon site (ici se sont les dinosaures jaunes, mode repeat) ainsi qu'une image qui follow mon curseur (le dinosaure noir) comme vous pouvez le voir sur cette maquette rapidement réalisée.



Pour se qui est du code je suis, je dois l'avouer, un peu à la ramasse. Pour le moment j'ai posé ceci, avec la fonction if/else javascript :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="my_button">
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    $('#my_button').click(function(){
    $(this).toggleClass("button_active");
    if ( $(this).is('.button_active'){
        $('body').bind('mousemove', function(){ });
        $('body').addClass("custom_background");
    } else {
        $('body').unbind('mousemove');
        $('body').removeClass("custom_background");
    }
});

Je pense être sur le bon chemin mais pour le moment cela ne donne absolument rien.
Je ne sais pas comment rendre le bouton activable et je ne sais vraiment se que je dois mettre en css pour pouvoir poser un background-image, ainsi qu'activer mon mousemove.

Je suis désolé de vous demander autant d'information mais cela m'aiderait grandement.

[ryan]

Yop!

Sans préjuger du fonctionnement possible du code, il me semble qu'il manque une parenthèse fermante à la ligne 10 du code que tu as posté dans ton message, et aussi une accolade et une parenthèse fermantes pour la déclaration de la fonction du click. Ceci devrait corriger au moins ces problèmes-là:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
    $('#my_button').click(function(){
        $(this).toggleClass("button_active");
        if ( $(this).is('.button_active') ){
            $('body').bind('mousemove', function(){ });
            $('body').addClass("custom_background");
        } else {
            $('body').unbind('mousemove');
            $('body').removeClass("custom_background");
        }
    });
});

[Babatoa]

YES !!
Merci maintenant cela fonctionne, après avoir rajouté le code css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body.custom_background {
   background-image:url(<a href="http://zupimages.net/up/14/46/pd70.png);" target="_blank">http://zupimages.net/up/14/46/pd70.png);</a>
}

j'ai bien un nouveau background qui se rajoute en cliquant sur mon bouton.

Maintenant il ne me reste plus que le fait d'avoir une image qui follow mon curseur (je sais que ça vous paraît étrange mais faut pas chercher à comprendre )

J'ai essayé de compléter dans la div id="my_button" le code html et javascript en dessous :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="my_button">
    <img src="http://zupimages.net/up/14/46/rv2q.png" class="follow" id="mousemove">
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#mousemove").mousemove(function(e){
  $('.follow').css({'top': e.clientY - 25, 'left': e.clientX - 190});
});

mais cela ne fonctionne pas.

[ryan]

Yop!

Il faut impérativement que l'image qui doit suivre le curseur soit en "position: absolute"
Edit: et ne pas oublier de tenir compte du scroll possible de la page, et du fait qu'il faille exprimer le left et le top en px, si je ne me trompe pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
theleft = e.clientX + window.pageXOffset - 25;
thetop = e.clientY + window.pageYOffset -190;
 
 $('.follow').css({'top':thetop + 'px', 'left':theleft + 'px'});

Edit again: et placer l'événement mousemove sur le document ou sur le conteneur si le follow doit être limité à une partie de la page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(document).mousemove.....

[Babatoa]

Bonsoir,

J'ai rectifié/complété mon code javascript, cependant j'ai encore quelques soucis:

code html du bouton:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="my_button"><img src="http://zupimages.net/up/14/46/7uy2.png"/>
</div>

code javascript du bouton afin d' activer/cacher les éléments du background et du mousemove :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
        $('#my_button').click(function(){
            $(this).toggleClass("button_active");
 
            if ( $(this).is('.button_active') ){
                $('body').bind("mousemove", function(){
                });
 
               $('body').addClass("custom_background");
 
            } else {
                $('body').unbind("mousemove");
 
                $("body").removeClass("custom_background");
                }
        });
    });

Ceci est le javascript afin qu'une image follow le curseur :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="mousemove"><img src="http://zupimages.net/up/14/46/7uy2.png" class="follow" id="dino">

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$("#mousemove").mousemove(function(e){
  theleft = e.clientX + window.pageXOffset + 50;
  thetop = e.clientY + window.pageYOffset -6;
 $('.follow').css({'top':thetop + 'px', 'left':theleft + 'px'});
});

et le css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#dino {
  position: absolute;
  z-index: 1000;
}

Aucun problème avec le background qui s'active/désactive bien en cliquant sur ce même bouton. Par contre cela ne fonctionne pas avec le mousemove. Il apparait bien sur mon site, mais il n'est pas lié au .bind. Je pense qu'il me manque le fait de préciser la fonction ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 if ( $(this).is('.button_active') ){
    $('body').bind("mousemove", function(){
});

Cependant je n'arrive pas à la placer, j'ai bien essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if ( $(this).is('.button_active') ){
    $('body').bind("mousemove", function(.follow){
});

mais cela ne fonctionne pas.

[ryan]

Yop!

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
if ( $(this).is('.button_active') ){
    $('body').bind("mousemove", function(){
        theleft = e.clientX  + window.pageXOffset - 25;
        thetop = e.clientY + window.pageYOffset -190;
        $('.follow').css({'top':thetop + 'px', 'left':theleft + 'px'});
    });

en s'assurant que le style de la classe "follow" comporte bien "position: absolute;"

[Babatoa]

J'ai remarqué qu'il y avait un problème dans mon code : la fonction .bind permet de rajouter une fonction, .unbind la désactive. Ce qui n'allait pas dans mon code c'est que j'avais un doublon. En effet après réalisé les changements, j'avais ma fonction 'mousemove' dans mon .bin ET dans mon code javascript en dessous pour mon image "dino". Le résultat étant que je pouvais cliquer ou non sur mon bouton, le résultat était le même.

J'ai donc supprimé mon javascript de mousemove follow de mon image dino, ce qui permet de le rajouter en cliquant sur mon bouton. Cependant j'ai toujours le problème de mon image qui, comme elle n'est pas intégrée au .bind, reste visible tout le temps. J'imagine qu'il faudrait que je l'intègre à mon .bind cependant puis-je le faire de cette manière et comment ? ou .bind ne fonctionne qu'avec les fonctions ? et si oui, il a t-il la solution de rajouter un "display:none;" dans le css de mon image pour qu'après dans mon .bind je puisse supprimer ou non ce style pour que cela fonctionne ?

Pour le moment mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<div id="my_button"><img src="http://zupimages.net/up/14/46/7uy2.png"/>
</div>
 
<script type="text/javascript">
   $(document).ready(function(){
        $('#my_button').click(function(){
            $(this).toggleClass("button_active");
 
            if ( $(this).is('.button_active') ){
                $('body').bind("mousemove", function(e){
                     theleft = e.clientX  + window.pageXOffset + 50;
                     thetop = e.clientY + window.pageYOffset -6;
                      $('.follow').css({'top':thetop + 'px', 'left':theleft + 'px'});
                });
 
               $('body').addClass("custom_background");
 
            } else {
                $('body').unbind("mousemove");
 
                $("body").removeClass("custom_background");
                }
        });
    });
</script>
 
<div id="mousemove"><img src="http://zupimages.net/up/14/46/7uy2.png" class="follow" id="dino">

et le css de l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#dino {
  position: absolute;
  z-index: 1000;
}

[Babatoa]

Finalement je suis arrivé à trouver la solution : en plus de ma fonction .bind (que j'utilise pour le changement de background et pour la fonction follow de l'image), j'ai rajouté la fonction bascule () pour cette même image qui follow afin qu'elle puisse elle aussi apparaitre ou disparaitre selon si le bouton est actif ou non. Je pense que j'aurais pu faire beaucoup plus simple mais bon au moins ça marche . Je remets un récapitulatif de mon code si ça peut aider quelqu'un à l'avenir :

Code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="my_button"><img src="http://zupimages.net/up/14/47/kmu7.png" onclick="bascule()"/></div>
<div id="mousemove"><img src="http://zupimages.net/up/14/46/7uy2.png" class="follow" id="dino">

Code javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function bascule(){
    var etat = document.getElementById('dino').style.display;
    var bouton = document.getElementById('my_button');
    if (etat =='block'){
        document.getElementById('dino').style.display='none';
    }
    else{
        document.getElementById('dino').style.display='block';
    }
}
$(document).ready(function(){
    $('#my_button').click(function(){
        $(this).toggleClass("button_active");
        if ( $(this).is('.button_active') ){
            $('body').bind("mousemove", function(e){
                theleft = e.clientX  + window.pageXOffset + 40;
                thetop = e.clientY + window.pageYOffset +10;
                $('.follow').css({'top':thetop + 'px', 'left':theleft + 'px'});
            });
            $('body').addClass("custom_background");
            Preview
        } else {
            $('body').unbind("mousemove");
            $("body").removeClass("custom_background");
        }
    });
});

Code css:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#my_button {
    display: auto;
    position: fixed;
    right: 47px;
    top:40px;
    cursor: e-resize;
}
body.custom_background {
   background-image:url(<a href="http://zupimages.net/up/14/47/wz41.png);" target="_blank">http://zupimages.net/up/14/47/wz41.png);</a>
}
#dino {
  position: absolute;
  z-index: 1000;
    display:none;
}

Merci ryan pour sa précieuse aide.

J'aurais juste un dernier petit soucis : ce bouton ne fonctionne pas avec un burger menu que j'ai pu rajouter. En effet quand le bouton est actif et que je vais sur un de mes projets via ma home page il reste bien comme voulu. Cependant quand je vais sur un de mes projets via mon menu, cela ferme mon bouton. Si quelqu'un a une idée...