[RÉGLÉ] javascript css template

[Geant]

Bonjour je veut intégré une animation à base de javascript et de css dans mon Template comme je les fais sur le forum en phpbb3 j'arrive pas à l'intégré pouvez vous m'aider ?.

Adresse du forum avec l'animation sur la gauche.
http://www.advictoriam.ovh/viewforum.php?f=26

Mais pour mon template joomla j'arrive pas à l'intégré voici les bouts de code que j'ai utiliser sous phpbb3.

Contenu du fichier /templates/html/animation.js

// JavaScript Document
		// Animation
		var posY1 = 0;
		var posY2 = 0;
		var posY3 = 0;
		var imgH = 500;
		setInterval(function(){
			if (posY1 <= -885) posY1 = 0;
			if (posY2 <= -900) posY2 = 0;
			if (posY3 <= -1200) posY3 = 0;
			posY1 -= 1;
			posY2 -= 2;
			posY3 -= 3;
			jQuery('.anim_01').css({ backgroundPosition: '0' + posY1 + 'px' });
			jQuery('.anim_02').css({ backgroundPosition: '0' + posY2 + 'px' });
			jQuery('.anim_03').css({ backgroundPosition: '0' + posY3 + 'px' });
		},50);

Contenu du /templates/css/custom.css

.anim_01 {
position: fixed;
top: 0;
left: 0;
width: 480px;
height:1000px;
background: url("../images/anim_01.png") repeat-y 0 0;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
font-size: 12px;
}

.anim_02 {
position: fixed;
top: 0;
left: 0;
width: 480px;
height: 1000px;
background: url("../images/anim_02.png") repeat-y 0 0;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
font-size: 12px;
}

.anim_03 {
position: fixed;
top: 0;
left: 41px;
width: 280px;
height: 1000px;
background: url("../images/anim_03.png") repeat-y 0 0;
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
font-size: 12px;
}

Le code que je rajoute dans le Header du template.

<script type="text/javascript" src="templates/html/animation.js"></script>

J'ai placer les images =>anim_01.png - anim_02.png - anim_03.png dans le dossier /templates/images
Le fichier custom.css => /templates/css
Le fichier animation.js => /templates/html/

Mais je c'est pas si le code marche pour le template joomla comment mètre en place pour que ça marche.

Je vous en remercie d'avance.

[lefabdu51]

Re : javascript css template

il manques la partie html de ton code.
ton code js et css est en place, mais il manques le code html correspondant aux balise sur lesquelles agit le javascript.

normalement dans un module de contenu personnalisé ou le fichier index.php du template tu doit avoir un code du style suivant

<div class="animation>
<div class="anim1></div>
<div class="anim2></div>
<div class="anim3></div>
</div>

Ce code varies en fonction du script js utilisé, donc je te renvoies vers la doc de celui ci.
si tu ne les a pas intégré toi meme sur ton forum phpbb, alors c est qu elles existent déja.
Donc a toi de regarder et de recupérer ce qui te seras utile.

[Geant]

Re : javascript css template

Oui c'est vrais j'ai oublier de rajouter dans le bloc body cette partie.

<div>
	 <div class="anim_01"></div>
         <div class="anim_02"></div>
         <div class="anim_03"></div>
</div>

Je voix maintenant les images mais les images ne bouge pas une idée ?.

[Geant]

Re : javascript css template

Une idée svp ?.

[pmleconte]

Re : javascript css template

Bonjour,

Dans l'explorateur (firefox, chrome ou autre), passez en mode développement (chrome = click droit et inspecter, internet explorer = F12, firefox = CTR Maj I) et allez voir dans l'onglet Console si vous n'avez pas des messages d'erreur.

Pascal

[Geant]

Re : javascript css template

Oui j'au des erreurs comme suite.

GET http://www.war-team.com/templates/html/animation.js                            www.war-team.com/:46
JQMIGRATE: Migrate is installed, version 1.4.1                                               jquery-migrate.min.js:2
GET http://www.war-team.com/templates/html/animation.js 404 (Not Found)     (index):46

Pour l'erreur 404 Not Found il trouve pas le fichier ( animation.js ) j'ai bien vérifier il se trouve bien dans /templates/html


Pour l'erreur ( JQMIGRATE: Migrate is installed, version 1.4.1 ) j'ai regarder sue le net il faux activer la valeur ( jQuery.migrateMute ) en true dans le fichier ( jquery-migrate.js ) qui nous donne.

// Set to true to prevent console output; migrateWarnings still maintained
jQuery.migrateMute = true;

Je comprend pas comment rectifier les 2 erreur normalement j'ai bien fais pour les erreurs ??.
Et faire en sorte que l’animation marche ??.

[pmleconte]

Re : javascript css template

Bonjour,

En regardant sur votre site, j'obtiens non par 2 mais 23 messages d'erreurs.

En général, les fichiers html devraient être dans le répertoire de votre template wt_home et non directement dans le répertoire templates. Ensuite, il faut vérifier l'ordre d'appel des scripts: si vous appelez une commande jquery et que le script jquery n'a pas été préalablement chargé, vous obtiendrez quelques unes de vos erreurs (je pense que l'erreur base64 est de ce type).

De plus, Daneel avait fait passé un message il y a quelques temps à propos de l'orthographe et la grammaire : http://forum.joomla.fr/showthread.ph...ht=grammatical

Pascal

[lefabdu51]

Re : javascript css template

https://docs.joomla.org/Adding_JavaScript/fr

[fynhooft]

Re : javascript css template

Bonjour,

Encore un peu de lecture mais en français.

En clair, je mettrais l'include juste avant la balise </body> du fichier index.php du template.
Tu mets ce code :

<script src="templates/<?php echo $this->template ?>/js/animation.js"></script>

De plus, le fichier "animation.js" doit se trouver dans le dossier "js" du template.
Comme ton fichier "custom.css" : dans le dossier "css" du template

[Geant]

Re : javascript css template

Je suis désoler pour le français j'ai des lacune encore désoler.

Si non pour le reste ça marche super encore un grand merci de votre aide.

@+ les pro