Comment insérer un script javascript dans la section head d'une page en particulier

**ghazal** · 23/07/2013, 11h14

Re : Comment insérer un script javascript dans la section head d'une page en particul

Salut,

Ca fait des années que j'utilise Joomla et ça fait autant de temps que j'essai de faire ça.

Moi aussi, du coup j'ai développé un petit module qui fait ça pour mon usage perso.

GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

pour télécharger :

Build software better, together

https://github.com/ghazal/mod_multimoo/releases/tag/v0.1-RC

GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

PS : "multimoo" parce que je l'avais développé au départ pour des scripts mootools

Particularités :
* j'ai profité la fonctionnalité de duplication/clonage des modules
* et de la fonctionnalité loadposition
* on peut dropper autant de fichiers js ou css qu'on veut (en général associés) dans les dossiers js et css du module multimoo
* donc les fichiers JS et CSS qu'on veut placer sont à envoyer par FTP dans les dossiers js et css du module multimoo

Usage :
* créer un NOUVEAU module multimoo
* lui attribuer une position NON existante, genre "lenomdemonfichierjs"
* choisir les fichiers souhaités CSS et JS
PS : je propose la possiblité de placer 2 fichiers JS, un pour le script, un pour l'usage
* choisir Publier partout

PS : pour les CSS, il faut faire attention aux duplications de noms de sélecteurs, genre éviter .container, #wrap, input, .button, etc ... qui pourraient déjà être présents dans les CSS du template.
Donc :
ou corriger les noms des sélecteurs dans la CSS
(à tester) ou attribuer un suffixe CSS genre .monsuffixe et corriger la css :

.monsuffixe button
.monsuffixe input

Enfin, dans l'article, insérer :

{loadposition lenomdemonfichierjs}

Si tu as des soucis, reposte ici.

Ou crée "A new issue" ici (en français, pas de souci):

https://github.com/ghazal/mod_multimoo/issues

**cavo789** · 23/07/2013, 15h16

Re : Comment insérer un script javascript dans la section head d'une page en particul

Bonjour

@Ghazal : ta solution est très propre, bravo. Juste un truc : en modifiant le index.php de ton template et en ayant créer une entrée de menu vers l'article (==> nous avons un Itemid pour cet article); on aurait pû mettre un petit code style "Si ItemID=Celui de l'article Alors charger JS". Cela aurait été moins propre, je le conçois mais plus rapide. Enfin, si la chaleur écrasante n'a pas cramé un de mes neurones :-)

**ghazal** · 23/07/2013, 16h13

Re : Comment insérer un script javascript dans la section head d'une page en particul

@Ghazal : ta solution est très propre, bravo.

Molto grazie (la chaleur me fait parler italien, bientôt je vais pousser la canzonnetta).

Juste un truc : en modifiant le index.php de ton template et en ayant créer une entrée de menu vers l'article (==> nous avons un Itemid pour cet article); on aurait pû mettre un petit code style "Si ItemID=Celui de l'article Alors charger JS". Cela aurait été moins propre, je le conçois mais plus rapide.

Oui, bien sur.
Mais ma soluce évite de surcharger encore l'index.php - je pense aussi aux index.php des templates avec framework, toujours un peu compliqués.
Et là, y'a pas trop à réfléchir, on balance les scripts dans les dossiers référents et hop ...

**cavo789** · 23/07/2013, 16h53

Re : Comment insérer un script javascript dans la section head d'une page en particul

Envoyé par ghazal Voir le message

la chaleur me fait parler italien, bientôt je vais pousser la canzonnetta

Si tu chantes aussi bien que moi, surtout n'hésite pas!!!, une bonne averse, bien drue, nous ferait du bien

**boucdur** · 23/07/2013, 18h08

Re : Comment insérer un script javascript dans la section head d'une page en particul

Envoyé par ghazal Voir le message

Enfin, dans l'article, insérer :
{loadposition lenomdemonfichierjs}

Salut Ghazal, merci pour la réponse.
Si j'utilise loadposition en théorie le module va s'afficher à l'endroit du tag loadposition non ?
Donc çane va pas apparaitre dans la section head de la page. Je me trompe ?

**boucdur** · 23/07/2013, 18h11

Re : Comment insérer un script javascript dans la section head d'une page en particul

Yihhhaaaaaaaaaaaaaaaaaaaaa Ca marrccchhheeee !!!
et en plus c'est simple y a pas 36 options inutiles.
bravo excellent module !!!

Ce serait encore mieux si on pouvait éviter le loadposition.
J'utilise "advanded module manager" (http://www.nonumber.nl/extensions/advancedmodulemanager). Cette extension rajoute des tas de possiblité pour placer les module où on veut. Ca aurait été super que ton module soit compatible. J'aurais pu sauter l'étape loadposition mais apparemment ce n'est pas compatible.

**boucdur** · 23/07/2013, 19h00

Re : Comment insérer un script javascript dans la section head d'une page en particul

Pardon je me corrige tout de suite. Ca marche parfaitement avec advanced module manager!!!
Il suffit d'assigner une position existante dans le module et puis à l'aide des options que rajoute l'extension "advanced module manager" on peut facilement préciser que le module ne doit s'afficher que sur une page en particulier ou plusieurs pages.

En gros je te remercie vrrrraaaaiiiment beaucoup !

**ghazal** · 23/07/2013, 19h27

Re : Comment insérer un script javascript dans la section head d'une page en particul

Je réponds même si tu as trouvé ta soluce.

Si j'utilise loadposition en théorie le module va s'afficher à l'endroit du tag loadposition non ?
Donc çane va pas apparaitre dans la section head de la page. Je me trompe ?

Oui, tu te trompes.
Ce module est developpé justement pour que les fichiers JS et CSS se placent dans la head et c'est tout ce qu'il fait.
Où tu places {loadposition trucmuche} dans l'article n'a aucune importance.

@cavo
Considérations météo :
j'ai pas poussé la canzonetta mais on a eu un un gros orage à Paris ... et il fait toujours aussi chaud.

**Robert44** · 01/04/2014, 16h16

Re : Comment insérer un script javascript dans la section head d'une page en particul

Bonjour,
je viens de tenter le module de Ghazal pour insérer un Google Charts Géo (je ne voulais pas passer par un module de graphique parce que pas assez personnalisable), mais malheureusement, cela ne fonctionne pas !

Voici le code (juste en exemple)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geochart']});

function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);

var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, {width: 556, height: 347});
}

google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
</body>
</html>

J'ai donc fait de ce code un fichier .js, que j'ai importer dans le dossier js du module, créé le module et publié partout en indiquant le fichier js à prendre en compte et enfin insérer le code

{loadposition lenomdemonfichierjs}

dans mon article avec la bonne position ainsi que le

Serait-ce une sécurité liée à Google qui m'empêche cette possibilité, ou bien ai-je manqué une étape?

Robert

**ghazal** · 02/04/2014, 12h30

Re : Comment insérer un script javascript dans la section head d'une page en particul

Salut,
dans ton cas, mon module n'est pas vraiment adapté.

Tu peux tester cette 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
- avec la possibilité d'utiliser une librairie CDN, cad chargée extérieurement via un serveur CDN -->googleJSAPI
- en chargeant la lib à la fin du document

Sur un template sans framework (comme Protostar, par ex.).
1- dans l'index.php, insérer un jdoc:include avant </body>

<jdoc:include type="modules" name="endbody" style="none" />
</body>
</html>

*** si tu utilises un template associé à un framework type Gantry, ou autre, et que tu as des difficultés
--> demande ici

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 ton cas :

ET

**même chose avec les fichiers CSS si besoin
Si le fait qu'un fichier CSS soit placé en fin de document, refait l'opération avec une expression jdoc du style :

<jdoc:include type="modules" name="endhead" style="none" />

Expression à placer juste au dessus de </head>, évidemment.

5 - Publier

6 - Créer un article.
Ne pas oublier d'insérer le code html lié au JS

Pour un meilleur controle de l'affichage du module, attribuer un lien de menu à l'article.

NB : 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.

Si souci, reporter sur ce post.

**Robert44** · 02/04/2014, 13h03

Re : Comment insérer un script javascript dans la section head d'une page en particul

Bonjour et merci pour ce retour,
Malheureusement je n'ai pas plus de succès avec cette méthode. De ce que je comprend, il n'y a pas besoin d'utiliser ton module, donc j'ai retiré le code relatif à lui. (mais peut être que je me trompe et qu'il faut combiner les deux)

J'ai simplement le code du script qui s'affiche en bas (à la position du endbody). Je n'ai rien fais concernant le css car cela ne concerne que du js.

J'ai bien suivi la démarche. Quand à mon template, c'est un template de base car je l'ai créé moi même et mes connaissances étant limitées, il n'y a rien de plus que du positionnement de module.

Ta proposition est pourtant simple à exécuter et intéressante et je sens qu'il manque peu de chose...

**ghazal** · 02/04/2014, 13h34

Re : Comment insérer un script javascript dans la section head d'une page en particul

Je pourrais voir ?
Firebug pour Firefox dit quoi ?
Tu travailles avec J!3 ou J!2.5 ?

L'HTML est bien dans le corps de l'article, et non du module ?

Une autre solution serait de faire un fichier du script d'accompagnement :

google.load('visualization', '1', {packages: ['geochart']});
etc ...

et de le coller dans un répertoire nommé "js" dans le template, avec le chemin :

A placer après l'appel à la js de google dans le module.

**Robert44** · 02/04/2014, 13h55

Re : Comment insérer un script javascript dans la section head d'une page en particul

Je ne connais pas Firebug.
Je travailles sur J!2.5 mais je vais passer au J!3 ce soir, je dois seulement vérifier la compatibilité de mon site pour faire le transfert.
Pour l'HTML, j'ai essayé les deux, mais ni l'un ni l'autre ne fonctionne.
Je t'envoi le lien vers la page en question en mp.
Je testerais cette dernière méthode plus tard dans l'aprem. Merci pour ce retour en tout cas

**ghazal** · 02/04/2014, 14h14

Re : Comment insérer un script javascript dans la section head d'une page en particul

Je pense comprendre le souci --> l'éditeur.
Change momentanément d'éditeur dans ton compte d'utilisateur (Super Admin, bien sur),
selectionne Code Mirror, par exemple

Au besoin, une fois l'opération terminée (et réussie, non mais !!!, lol), tu rebascules sur ton éditeur favori.

Comment insérer un script javascript dans la section head d'une page en particulier

[RÉGLÉ] Comment insérer un script javascript dans la section head d'une page en particulier

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association