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

[magalirc]

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

[webcrea]

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?

[magalirc]

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"';}

?>

[magalirc]

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 !!

[webcrea]

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>

[magalirc]

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>

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);
}
};

[ghazal]

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 :

http://cdnjs.cloudflare.com

http://cdnjs.com/

Je rajoute cette référence :
Joomla-SEO | Use a CDN (Content Delivery Network)

http://joomla-seo.net/Performance/use-a-cdn-content-delivery-network

[magalirc]

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

[magalirc]

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