Fonction JS dans un template

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

  • [RÉGLÉ] Fonction JS dans un template

    Bonjour, Je développe actuellement un template en onepage, qui fonctionne très bien, seul problème, c'est que lorsque je descend dans la page, je voudrais que la barre du header se réduise (de 150px à 30px) pour ne laissé apparaitre QUE le menu horizontal.
    Quand je code le fichier JS et que je le teste hors joomla, ça fonctionne très bien, par contre, lorsque je mets le fichier dans mon template, la, cela ne fonctionne plus.
    Je pense donc devoir adapté mon JS à joomla, mais j'avoue ne pas savoir comment m'y prendre...
    Voici le code:
    Code:
    $(function(){
        $(document).scroll(function() {
          if($('body').scrollTop() > 130 || $('html').scrollTop() > 130)
            document.getElementById('head').style.height = "30px";
          else 
            document.getElementById('head').style.height = "150px";
        });
    });
    Quelqu'un aurait il une idée s'il vous plais?

  • #2
    Re : Fonction JS dans un template

    Salut normalement tu ajoute ton script dans le dossier jus de ton template est tu l appelle direct sur ta page dinc si sa marche pas doit tu merdouille sur l emplacement de ton script soit quand tu fait appel à lui dans ta page !
    www.fraggleboard.com

    Commentaire


    • #3
      Re : Fonction JS dans un template

      Dsl je suis sur l'iPhone
      www.fraggleboard.com

      Commentaire


      • #4
        Re : Fonction JS dans un template

        Pour un script de cette taille il n'est pas nécessaire de le placer dans un fichier à part, ça fait toujours une requête d'économisée.
        Sauf si tu as un fichier unique regroupant tous tes js.

        Sinon assure-toi que jQuery est chargée avant ton script, sinon ça ne marche pas. Vérifie également qu'il n'y a qu'une occurence de jQuery sur ton site, sinon ça créé des conflits.

        Commentaire


        • #5
          Re : Fonction JS dans un template

          Bon, effectivement, il avait un petit conflit dans jQuery, donc, pour résoudre le problème, j'ai fais ça:
          Code:
              <script type="text/javascript">
                $.noConflict();
                  jQuery(document).ready(function($){
                    $(document).scroll(function() {
                    if($('body').scrollTop() > 130 || $('html').scrollTop() > 130)
                      document.getElementById('head').style.height = "30px";
                    else 
                      document.getElementById('head').style.height = "150px";
                  });
                });
              </script>
          Et le problème est résolut!
          Merci à tous!

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X