[Problème] Insérer du code dans head pour un article spécifique + du javascript dans le body

[tony33349]

Bonjour à tous,

J'ai un problème concernant l'insertion d'un javascript dans un article de site Joomla 2.5.

Je souhaiterais insérer un Javascript qui nécessite que je puisse:

- insérer du code dans la balise head:

<script type="text/javascript" src="XXXXXXXX"></script>
<style type="text/css">
#countdown-blog {padding-left:250px;color:#000;height:200px}
#countdown-blog div.set{float:left}
#countdown-blog h2{text-align:center; font-size:18px}
#countdown-blog ul{list-style-type:none;height:103px;padding:20px 0px 5px}
#countdown-blog li{float:left;background:url(filmstrip_countdown_9-0.png) 0 0 no-repeat;width:53px;height:103px}
#countdown-blog li#s0, li#m0{background:url(filmstrip_countdown_5-0.png) 0 0 no-repeat}
#countdown-blog li#h0{background:url(filmstrip_countdown_2-0.png) 0 0 no-repeat}
#countdown-blog li.comma{background:url(comma.png) 2px 75px no-repeat;width:12px}
#countdown-blog div.separator{float:left; font:80px Arial,sans-serif; height:103px; padding:25px 0 0;}
</style>

- insérer du code dans la balise body:

<div class="center">

<div id="countdown-blog"></div>

<script type="text/javascript" src="countdown.js"></script>
</div>

- insérer le fichier countdown.js dans le même dossier que la page qui y fait référence.

Cela fait des jours que j'essaye différentes méthodes et que je cherche la réponse à mon problème mais je ne la trouve nullepart... J'ai essayé avec tout un tas de plugin dont Jumi mais rien ne marche, si une âme charitable pouvait bien me guider vers une solution je lui en serais bien reconnaissant.

Bien à vous.

[jisse03]

Re : Insérer du code dans head pour un article spécifique + du javascript dans le bod

Bonjour,

Je pense que la confusion provient du fait qu'une "page" n'a pas de lien précis avec un répertoire (dossier), puisque son contenu est dynamique et se trouve dans la base de données. Le fichier countdown.js doit donc être uploadé quelque part et on y fait référence par son chemin absolu.
On va supposer que ce countdown.js a été uploadé en images/jsperso/countdown.js.

Pour introduire le tout correctement, j'utilise Sourcerer http://www.nonumber.nl/extensions/sourcerer, mais ça devrait également fonctionner avec Jumi ou DirectPHP ou autre.

blah blah article
{source}
$document = JFactory::getDocument(); // récupère le document (page)
// Insère le premier script dans le head
$document->addScript('url_du_script.js'); // URI externe ou chemin vers le script ex images/jsperso/xxxxx.js
// Ajouter le CSS
$style = '#countdown-blog {padding-left:250px;color:#000;height:200px}
#countdown-blog div.set{float:left}
#countdown-blog h2{text-align:center; font-size:18px}
#countdown-blog ul{list-style-type:none;height:103px;padding:20px 0px 5px}
#countdown-blog li{float:left;background:url(filmstrip_countdown_9-0.png) 0 0 no-repeat;width:53px;height:103px}
#countdown-blog li#s0, li#m0{background:url(filmstrip_countdown_5-0.png) 0 0 no-repeat}
#countdown-blog li#h0{background:url(filmstrip_countdown_2-0.png) 0 0 no-repeat}
#countdown-blog li.comma{background:url(comma.png) 2px 75px no-repeat;width:12px}
#countdown-blog div.separator{float:left; font:80px Arial,sans-serif; height:103px; padding:25px 0 0;}';
$document->addStyleDeclaration($style);
{/source}
more article blah...
<div class="center"> 
    <div id="countdown-blog"></div>
{source}
<script language="javascript" type="text/javascript" src="images/jsperso/countdown.js"></script> 
{/source}</div>
some more article blah... 

[tony33349]

Re : Insérer du code dans head pour un article spécifique + du javascript dans le bod

Merci pour ta réponse, malheureusement cela ne marche toujours pas...

J'ai moi aussi Sourcerer j'ai donc inséré le code suivant en utilisant le bouton "insérer code":

Texte de mon article avec ses balises
{source}
$document = JFactory::getDocument(); // récupère le document (page)
// Insère le premier script dans le head
$document->addScript('/media/system/js/countdown.js'); // URI externe ou chemin vers le script ex images/jsperso/xxxxx.js
// Ajouter le CSS
$style = '#countdown-blog {padding-left:250px;color:#000;height:200px}
#countdown-blog div.set{float:left}
#countdown-blog h2{text-align:center; font-size:18px}
#countdown-blog ul{list-style-type:none;height:103px;padding:20px 0px 5px}
#countdown-blog li{float:left;background:url(images/filmstrip_countdown_9-0.png) 0 0 no-repeat;width:53px;height:103px}
#countdown-blog li#s0, li#m0{background:url(images/filmstrip_countdown_5-0.png) 0 0 no-repeat}
#countdown-blog li#h0{background:url(images/filmstrip_countdown_2-0.png) 0 0 no-repeat}
#countdown-blog li.comma{background:url(images/comma.png) 2px 75px no-repeat;width:12px}
#countdown-blog div.separator{float:left; font:80px Arial,sans-serif; height:103px; padding:25px 0 0;}';
$document->addStyleDeclaration($style);
{/source}
<div class="center"> 
    <div id="countdown-blog"></div>
{source}
<script language="javascript" type="text/javascript" src="/media/system/js/countdown.js"></script> 
{/source}</div>
Suite du texte de mon article avec ses balises 

Et sinon c'est quoi le document page? où on le trouve? on l'insère sous quelle forme? est-il obligatoire de le renseigner?

Pour ce qui est d'uploader le fichier js dans le même dossier c'était juste pour simplifier car je ne suis pas sûr de la manière dont je dois insérer le chemin. En fait tout marche très bien sur une page que j'ai créée de A à Z mais sur Joomla je galère vraiment...

Bien à toi et merci encore.

[lefabdu51]

Re : Insérer du code dans head pour un article spécifique + du javascript dans le bod

$document->addScript('/media/system/js/countdown.js'); // URI externe ou chemin vers le script ex images/jsperso/xxxxx.js
// Ajouter le CSS

quand je lis cela, je me dit qu il y as une erreur.
Le chemin devrais etre : media/system/js/countdown.js et non /media/system/js/countdown.js

secundo, moi perso je procéderait autrement:

je mettrais ceci directement juste avant la balise </head> du fichier index.php du template.

<script type="text/javascript" src="/media/system/js/countdown.js"></script>

les propriétés css dans le fichier css du template :

#countdown-blog {padding-left:250px;color:#000;height:200px}
#countdown-blog div.set{float:left}
#countdown-blog h2{text-align:center; font-size:18px}
#countdown-blog ul{list-style-type:none;height:103px;padding:20px 0px 5px}
#countdown-blog li{float:left;background:url(images/filmstrip_countdown_9-0.png) 0 0 no-repeat;width:53px;height:103px}
#countdown-blog li#s0, li#m0{background:url(images/filmstrip_countdown_5-0.png) 0 0 no-repeat}
#countdown-blog li#h0{background:url(images/filmstrip_countdown_2-0.png) 0 0 no-repeat}
#countdown-blog li.comma{background:url(images/comma.png) 2px 75px no-repeat;width:12px}
#countdown-blog div.separator{float:left; font:80px Arial,sans-serif; height:103px; padding:25px 0 0;}

et ce code directement dans l'article :
<div class="center">
<div id="countdown-blog"></div>
</div>

ou si tu veut faire plus court:
<div id=""countdown-blog" class="center"></div>

si tu veut mettre ce code directement dans le fichier index.php , alors il faut faire une boucle pour comparer l'id de l article affiché avec celui de l article ou il doit etre affiché et ensuite passer le code html si sur la page ou il doit etre affiché.

[jisse03]

Re : Insérer du code dans head pour un article spécifique + du javascript dans le bod

Le document (la page) est chargée par JFactory::getDocument...

Pourquoi ajouter 2 fois /media/system/js/countdown.js et en /media au lieu de media/ ?

Charger 2 fois le même JavaScript est très loin d'être conseillé.

Avec Sourcerer, et si tout est fait correctement, sans conflit entre scripts, ça devrait fonctionner.

[tony33349]

Re : Insérer du code dans head pour un article spécifique + du javascript dans le bod

Je l'avais écrit avec et sans le /, mais cela ne changeait rien.

Voici le code de la page internet ou cela fonctionne (avec tous les fichiers dans le même dossier):

<html lang="fr">  
    <head>  
    <meta charset="utf-8">
      <title>Compte à rebour</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
        <style type="text/css">
            #countdown-blog {padding-left:250px;color:#000;height:200px}
            #countdown-blog div.set{float:left}
            #countdown-blog h2{text-align:center; font-size:18px}
            #countdown-blog ul{list-style-type:none;height:103px;padding:20px 0px 5px}
            #countdown-blog li{float:left;background:url(filmstrip_countdown_9-0.png) 0 0 no-repeat;width:53px;height:103px}
            #countdown-blog li#s0, li#m0{background:url(filmstrip_countdown_5-0.png) 0 0 no-repeat}
            #countdown-blog li#h0{background:url(filmstrip_countdown_2-0.png) 0 0 no-repeat}
            #countdown-blog li.comma{background:url(comma.png) 2px 75px no-repeat;width:12px}
            #countdown-blog div.separator{float:left; font:80px Arial,sans-serif; height:103px; padding:25px 0 0;}
        </style> 
  </head> 
     
    <body>              

        <div class="center">     
            
            <div id="countdown-blog"></div>
            
            <script type="text/javascript" src="countdown.js"></script> 
        </div>
        
        
  </body>  
</html> 

J'aimerais juste pouvoir retrouver ce compte à rebour sur ma page Joomla...

Pour la deuxième méthode proposée je ne sais pas comment éditer le fichier index.php pour le modifier dans Joomla, et j'ai vu que ce n'était pas conseillé car cela peut à la longue entrainer une certaine lourdeur vu que pour chaque js le code figurerait dans toutes les pages même celles qui ne l'utilisent pas contrairement à l'autre méthode.

Pour le getDocument on ne met rien entre les parenthèses? et si oui quoi exactement?

Merci à tous les 2 en tout cas.

[tony33349]

Re : Insérer du code dans head pour un article spécifique + du javascript dans le bod

ah mais je viens de voir que le premier src je ne l'ai pas mis!

EDIT: ça ne marche toujours pas voici ce que j'ai inséré dans Sourcerer:

Texte de mon article
{source} 
$document = JFactory::getDocument(); // récupère le document (page) 
// Insère le premier script dans le head 
$document->addScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'); // URI externe ou chemin vers le script ex images/jsperso/xxxxx.js 
// Ajouter le CSS 
$style = '#countdown-blog {padding-left:250px;color:#000;height:200px} 
#countdown-blog div.set{float:left} 
#countdown-blog h2{text-align:center; font-size:18px} 
#countdown-blog ul{list-style-type:none;height:103px;padding:20px 0px 5px} 
#countdown-blog li{float:left;background:url(images/filmstrip_countdown_9-0.png) 0 0 no-repeat;width:53px;height:103px} 
#countdown-blog li#s0, li#m0{background:url(images/filmstrip_countdown_5-0.png) 0 0 no-repeat} 
#countdown-blog li#h0{background:url(images/filmstrip_countdown_2-0.png) 0 0 no-repeat} 
#countdown-blog li.comma{background:url(images/comma.png) 2px 75px no-repeat;width:12px} 
#countdown-blog div.separator{float:left; font:80px Arial,sans-serif; height:103px; padding:25px 0 0;}'; 
$document->addStyleDeclaration($style); 
{/source}
<div class="center"> 
    <div id="countdown-blog"></div> 
{source}
<script language="javascript" type="text/javascript" src="media/system/js/countdown.js"></script> 
{/source}</div> 
Suite du texte de mon article