[RÉGLÉ] Fonction JS dans un template

[Darkhan]

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:

$(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?

[Fraggleboard]

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 !

[Fraggleboard]

Re : Fonction JS dans un template

Dsl je suis sur l'iPhone

[kursus]

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.

[Darkhan]

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:

    <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!