Librairie Raphael.js probleme d'affichage

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Librairie Raphael.js probleme d'affichage

    Bonjour à tous,

    Depuis quelques jours, j'essaie d'ajouter une librairie raphael.js pour l'affiche d'une carte sur une page de mon site.
    J'ai essayé plusieurs chose :
    1.d'jouter la librairie dans le fichier index.php du template gantry
    2. ajouter la librairue avec jumi en créer un id avec :
    <?php
    $document=&JFactory::getDocument();
    $document=addScript('/media/system/js/raphael-min.js');
    ?>
    3. j'ai également essayé avec sourcerer mais également cela ne fonctionne pas.

    J'ai testé ma carte sur une page html en y insérant la librairie et mon fichier js et ça fonctionne.
    Je voudrai eviter d'utiliser une iframe.

    Merci de vos conseils

    Please, help me !!!

    Magali

  • #2
    Re : Librairie Raphael.js probleme d'affichage

    une url?

    en principe ça :
    <?php
    $document=&JFactory::getDocument();
    $document=addScript('/media/system/js/raphael-min.js');
    ?>
    direct dans l'index.php du template devrait fonctionner

    as-tu des erreurs js dans la console javascript?
    Christophe
    http://www.webcrea.fr

    Commentaire


    • #3
      Re : Librairie Raphael.js probleme d'affichage

      J'ai placé le fichier comme ceci dans le head :
      <?php
      $gantry->displayHead();

      $gantry->addStyle('grid-responsive.css', 5);
      $gantry->addScript('jquery-slickwrap.js',5);
      $gantry->addScript('raphael-min.js');

      $gantry->addLess('bootstrap.less', 'bootstrap.css', 6);
      $gantry->addLess('global.less', 'master.css', 8, array('headerstyle'=>$gantry->get('headerstyle','dark')));

      if ($gantry->browser->name == 'ie'){
      if ($gantry->browser->shortversion == 9){
      $gantry->addInlineScript("if (typeof RokMediaQueries !== 'undefined') window.addEvent('domready', function(){ RokMediaQueries._fireEvent(RokMediaQueries.getQuer y()); });");
      }
      if ($gantry->browser->shortversion == 8){
      $gantry->addScript('html5shim.js');
      }
      }
      if ($gantry->get('layout-mode', 'responsive') == 'responsive') $gantry->addScript('rokmediaqueries.js');
      if ($gantry->get('loadtransition')) {
      $gantry->addScript('load-transition.js');
      $hidden = ' class="rt-hidden"';}

      ?>

      Commentaire


      • #4
        Re : Librairie Raphael.js probleme d'affichage

        Non je n'ai pas d'erreur, quand je regarde les script avec firebug, je vois bien dans le head mon fichier raphael-min.js
        c'est vraiment bizzard ce truc.
        ou alors flexicontent vire le js
        là je sais plus où regarder ni que faire !!

        Commentaire


        • #5
          Re : Librairie Raphael.js probleme d'affichage

          tu charges la librairie : ok mais il faut que tu lances ton script maintenant... Cela peut se faire dans un article ou dans un module...

          <script type="text/javascript">fonction_de_lancement_de_la_carte();
          </script>
          Christophe
          http://www.webcrea.fr

          Commentaire


          • #6
            Re : Librairie Raphael.js probleme d'affichage

            Envoyé par webcrea Voir le message
            tu charges la librairie : ok mais il faut que tu lances ton script maintenant... Cela peut se faire dans un article ou dans un module...

            <script type="text/javascript">fonction_de_lancement_de_la_carte();
            </script>


            Dans mon article , j'ai inséré le javascript suivant :
            window.onload = function () {
            var R = Raphael("paper", 500, 550);
            var attr = {
            fill: "#84b81a",
            stroke: "#333",
            "stroke-width": 1,
            "stroke-linejoin": "round"
            };
            var cc3r = {};
            cc3r.aubenton=R.path("M378,495.5h-14H378l5.197-0.17l0.623-15.201l4.441-10.248l3.27-4.423l2.798-4.438l1.688-6.516l0.02-4.012c0,0-5.385-26.419-5.385-29.456s-0.837-9.103,0-11.613s3.342-11.339,5.123-15.369s4.182-8.77,5.628-12.736s4.729-15.31,4.62-14.932s5.133-7.892,8.197-11.271s10.669-11.764,11.617-12.81s0.853-1.607,1.453-3.056s3.725-28.537,4.35-29.563s7.634-12.521,7.634-12.521l-1.408-2.841l-3.493-2.055l-18.445-2.049l-9.563,2.049l-9.564-0.684l-6.49,11.613l-20.152,3.416l-0.943,3.21l-2.137,7.376l-2.398,26.301l-7.18-0.342V353l-3.736,5.533l-6.832-1.025l-3.074,4.1l-0.581,12.223l-0.37,3.871l-5.301,34.62c0,0-5.988,19.758-8.244,27.544s-4.377,14.64-4.377,14.64l-7.973,18.897l-0.82,1.945l2.391,1.707l10.93,1.367L334,482.5h4.393 l22.337,11.762l1.854,2.068L378,495.5z").attr(attr) ;
            cc3r.beaume=R.path("M317.012,473.402l7.973-18.897c0,0,2.121-6.854,4.377-14.64s8.244-27.544,8.244-27.544l5.301-34.62l-1.087-2.779l-7.183-5.459l-6.49-0.342l-3.416-9.221l2.732-1.025l-0.684-2.391l-8.197-2.732l-4.098-3.758l-8.881-1.025l-3.758-6.146l-1.729,2.27l-3.735,4.902l-4.781,3.074l-3.758-2.049l-1.367,5.121L286.5,359v9.096l2.209,16.053l12.795,16 .738l2.049,8.539l-2.049,11.271L297.5,429v23.805l6.021,17.182l0.374,1 .604l5.807,1.025l4.659,2.329L317.012,473.402z").at tr(attr);
            cc3r.wimy=R.path("M63.095 161.464L59.679 157.708 54.897 158.732 48.75 151.901 40.552 155.316 35.925 154.354 32.354 152.925 28.938 153.609 31.671 159.074 30.305 160.909 20.333 161.5 16.097 161.5 8.073 114.922 35.758 53.141 74.777 45.969 85.5 35.333 90.119 45.333 83.248 48.748 77.099 83.929 91.787 110.571 94.519 112.621 94.5 114 94.5 117.403 85.629 124.576 84 130.5 79.148 130.5 87 141.5 81.198 141.5 76.076 138.993 68.563 140.243 67.2 145.663 70.279 160.943 65.37 161.397z").attr(attr);
            cc3r.mondrepuis=R.path("M85.761 34.617L89.956 45.174 83.187 48.669 77.069 83.89 91.762 110.551 94.5 112.621 94.5 116 126.626 98.275 136.531 104.765 140.289 104.082 142.68 107.156 148.145 108.522 148.486 116.036 152.926 119.11 167.272 106.473 166.248 100.474 171.371 95.5 175 95.5 176.152 92.468 180.594 90.419 181.959 86.32 194.256 74.024 195.622 64.46 234.46 30.378 198.547 42.13 190.021 17.341 112.558 3.869z").attr(attr);
            cc3r.hirson=R.path("M183.719,205.183c0,0,0.554,0.8 01,1.656,2.393s5.772,3.694,8.539,5.465s7.515,1.025 ,7.515,1.025l6.213,7.06l1.302,1.479l15.709-17.421l1.792-1.267l2.651-2.831l-0.342-5.123L239,190.839l1.366-19.128l-9.222-7.856l15.028-43.378l53.284-30.399l23.91-61.14l15.937-6.557l1.571-0.647l-5.373-6.374l-45.666,6.524l-7.053-8.347l-44.717,14.589l-2.826,2.069l-39.71,34.169l-1.32,9.612l-12.274,12.32l-1.354,4.11l-4.436,1.863l-0.677,3.23H171l-4.752,5.166l1.024,5.807l-14.346,12.638l-0.15,1.642l-0.192,2.115c0,0-3.68-0.283-4.099,1.708s-1.366,6.49-1.366,6.49l3.415,3.416l-3.074,4.44l2.05,5.124l-5.465,1.708l9.563,7.173l-3.415,6.148l1.201,9.909l1.531,1.96l4.099,1.793l-0.342,3.758l4.44,3.757l6.831-2.391l5.124-4.099L180.5,180c0,0,0,3,0,5.033s3.964,3.003,5.313, 4.083s-0.835,4.425-1.763,5.751c-0.929,1.327-1.517,2.058-1.517,2.058l-0.389,4.969L183.719,205.183z").attr(attr);
            cc3r.stmichel=R.path("M339.638,22.299l-16.382,6.712l-23.854,61.104l-53.257,30.38l-15.015,43.369l9.228,7.852l-1.363,19.126l-10.244,5.122l0.343,5.123l-4.443,4.098l4.1,4.44l-2.042,6.831l4.79,4.781V227l-4.115,1.41l-0.342,5.362l7.856,6.728H240l4.804,6.695l9.723-3.297l5.989-4.9l6.148-0.342l21.178,7.516l3.416-4.783l7.172,1.709l4.441-3.758l5.807,2.732l3.756-2.732l8.881,4.439l4.1-2.732l-0.342-12.979l3.416,0.342l2.391,5.123l8.197-6.832l-4.1-5.124l-1.023-6.147l4.439-9.563l7.174-8.198l3.756-9.563l-0.34-11.271c0,0,2.732-0.342,5.123-3.074s3.368-6.832,3.368-6.832L360.5,164v-16l12.391-17.961c0,0,0.502-10.913,2.051-12.979s3.072-4.099,3.072-4.099l-1.365-19.127l4.439-1.708l0.342-6.832l-4.098-5.124l1.379-13.38l-3.465,0.815l2.242-26.698l-30.57-10.496L339.638,22.299z").attr(attr);
            cc3r.watigny=R.path("M347.073,253.971l-2.192,0.729l5.534-2.389l3.349-2.393l4.781,2.051l-0.342,5.807l0.342-5.807l-4.781-2.051l-3.349,2.393l-5.534,2.389l-1.508-2.389l-2.59-4.1l-4.781-0.342l-5.66-9.564l-0.842-3.553v-2.175l1.525,0.957l8.124-6.832l-4.136-5.124l-1.042-6.147c0,0,5.603-10.904,5.341-11.514s5.474-5.351,5.474-5.351l4.538-10.46c0,0-0.306-10.121-0.341-11.271s2.587-1.552,5.887-3.948s2.28-4.473,2.651-5.958S360.5,166,360.5,166v-18.2l12.l39.458-6.685l16.053,5.932l-2.125,30.706l-14.316,21.108l-4.641,56.832l7.631,2.375l-0.324,2.109l-3.301,21.468l-4.098,4.44l1.023,6.147l-2.732,3.074l-1.707,5.466l-5.249,3.087l-0.216,4.77c0,0-10.662,12.544-14.346,15.027s-15.713,10.59-15.713,10.59l-5.465,6.146l-7.005-0.193l-5.292-0.146").attr(attr);



            var current = null;
            for (var state in cc3r) {
            cc3r[state].color = "#84b81a";
            (function (st, state) {
            st[0].style.cursor = "pointer";
            st[0].onmouseover = function () {
            current && cc3r[current].animate({fill: "#84b81a", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
            st.animate({fill: st.color, stroke: "#ccc"}, 500);
            st.toFront();
            R.safari();
            document.getElementById(state).style.display = "block";
            current = state;
            };
            st[0].onmouseout = function () {
            st.animate({fill: "#FCC008", stroke: "#666"}, 500);
            st.toFront();
            R.safari();
            };

            })(cc3r[state], state);
            }
            };

            Commentaire


            • #7
              Re : Librairie Raphael.js probleme d'affichage

              Salut,
              une petite technique pour gérer du JS dans joomla
              - sans passer par un plugin ou un module spécialisé dans l'insertion JS
              - sans devoir charger à chaque fois la librairie, ce qui est le cas si l'appel à la lib est inséré dans l'index.php du template
              - utilisant une librairie CDN, cad chargée extérieurement via un serveur CDN
              - en chargeant la lib à la fin du document

              Sur Gantry par ex.
              1- dans l'index.php, insérer un jdoc:include avant </body>

              <jdoc:include type="modules" name="endbody" style="none" />
              </body>
              </html>
              <?php
              $gantry->finalize();
              ?>
              2 - créer un module "Contenu personnalisé "
              3- lui attribuer la position "endbody"
              NB : masquer le titre aussi

              4 - insérer l'appel à la lib et le script dépendant
              dans le cas de raphael.js

              <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
              <script type="text/javascript" charset="utf-8">
              //le script dépendant
              </script>
              5 - Publier

              6 - Créer un article.
              Ne pas oublier d'insérer le code html lié au JS
              Dans le cas ici :
              <div id="paper"></div>
              Pour un meilleur controle de l'affichage du module, attribuer un lien de menu à l'article.
              Je colle également un Read more avant la partie html concernant le script, pour ne pas l'afficher dans le cas d'un article dépendant d'une catégorie en Blog

              7 - Associer le module au lien de menu de l'article

              Et voila.

              NB : il existe deux serveurs CDN de JS où l'on trouve quasiment toutes les libs :
              cdnjs.cloudflare.com is an ultra-fast, reliable, globally available content delivery network for open-source libraries.

              Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library files on your websites.


              Je rajoute cette référence :
              Joomla-SEO | Use a CDN (Content Delivery Network)
              Using a Content Delivery Network (CDN) with Joomla is quite possible, though better for experienced users. There are extensions to do this, or use a good host.
              Dernière édition par ghazal à 03/02/2014, 11h48
              Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

              Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

              Commentaire


              • #8
                Re : Librairie Raphael.js probleme d'affichage

                Bonjour,
                j'ai également testé cette solution mais en vain.

                Je pense qu'un des modules installés doit empêcher rapharl de fonctionner. Je vais essayer de les déactiver un par un.

                je vous remercie

                je poursuis mes recherches

                merci

                Je vous tiens au courant

                Magali

                Commentaire


                • #9
                  Re : Librairie Raphael.js probleme d'affichage

                  Rebonjour,

                  J'ai trouvé le module qui empêche raphael.js de fonctionner, il s'agit d'un slideshow?
                  Je vais trouver une solution alternative pour le slideshow.

                  Encore merci de votre aide.

                  Magali

                  Commentaire

                  Annonce

                  Réduire
                  Aucune annonce pour le moment.

                  Partenaire de l'association

                  Réduire

                  Hébergeur Web PlanetHoster
                  Travaille ...
                  X