IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Afficher/cacher des éléments javascript


Sujet :

jQuery

  1. #1
    Candidat au Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Novembre 2014
    Messages : 6
    Points : 2
    Points
    2
    Par défaut Afficher/cacher des éléments javascript
    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

  2. #2
    Membre expérimenté
    Avatar de ryan
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2003
    Messages
    956
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2003
    Messages : 956
    Points : 1 316
    Points
    1 316
    Billets dans le blog
    1
    Par défaut
    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.

  3. #3
    Candidat au Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Novembre 2014
    Messages : 6
    Points : 2
    Points
    2
    Par défaut
    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.

    Nom : bouton-off.jpg
Affichages : 213
Taille : 83,1 Ko

    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.

    Nom : bouton-on.jpg
Affichages : 208
Taille : 108,7 Ko

    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.

  4. #4
    Membre expérimenté
    Avatar de ryan
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2003
    Messages
    956
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2003
    Messages : 956
    Points : 1 316
    Points
    1 316
    Billets dans le blog
    1
    Par défaut
    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");
            }
        });
    });

  5. #5
    Candidat au Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Novembre 2014
    Messages : 6
    Points : 2
    Points
    2
    Par défaut
    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.

  6. #6
    Membre expérimenté
    Avatar de ryan
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2003
    Messages
    956
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2003
    Messages : 956
    Points : 1 316
    Points
    1 316
    Billets dans le blog
    1
    Par défaut
    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.....

  7. #7
    Candidat au Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Novembre 2014
    Messages : 6
    Points : 2
    Points
    2
    Par défaut
    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.

  8. #8
    Membre expérimenté
    Avatar de ryan
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2003
    Messages
    956
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2003
    Messages : 956
    Points : 1 316
    Points
    1 316
    Billets dans le blog
    1
    Par défaut
    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;"

  9. #9
    Candidat au Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Novembre 2014
    Messages : 6
    Points : 2
    Points
    2
    Par défaut
    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;
    }

  10. #10
    Candidat au Club
    Homme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2014
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Novembre 2014
    Messages : 6
    Points : 2
    Points
    2
    Par défaut
    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...

Discussions similaires

  1. afficher/cacher des éléments
    Par orphen dans le forum jQuery
    Réponses: 3
    Dernier message: 14/07/2013, 23h39
  2. Afficher/Cacher des éléments
    Par cuddy dans le forum Débuter
    Réponses: 15
    Dernier message: 08/09/2012, 10h16
  3. Réponses: 5
    Dernier message: 28/07/2010, 16h41
  4. Afficher/cacher des éléments de type select en fonction d'autres
    Par GLDavid dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 05/04/2006, 11h06
  5. pb afficher cacher des éléments
    Par fongus dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 04/04/2006, 14h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo