javascript css template

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] javascript css template

    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

    Code HTML:
    // 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

    Code HTML:
    .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.
    Code HTML:
    <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.
    Dernière édition par Geant à 29/10/2016, 22h06

  • #2
    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

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

    Commentaire


    • #3
      Re : javascript css template

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

      Code HTML:
      <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 ?.

      Commentaire


      • #4
        Re : javascript css template

        Une idée svp ?.

        Commentaire


        • #5
          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
          If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

          Commentaire


          • #6
            Re : javascript css template

            Oui j'au des erreurs comme suite.

            Code HTML:
            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.

            Code HTML:
            // 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 ??.

            Commentaire


            • #7
              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
              If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

              Commentaire


              • #8
                Re : javascript css template

                Commentaire


                • #9
                  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 :
                  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
                  Dernière édition par fynhooft à 29/10/2016, 16h37
                  GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                  Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                  Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                  Commentaire


                  • #10
                    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

                    Commentaire

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X