jquery works on all pages except home page

Question

I have a jquery called fade and it has always worked fine on our homepage. Now i want to use it on all pages.

So, I did the following:

1) remove the line that called the jquery from the design-tab in the cms-page
2) added the line to the page.xml of my theme.

Now it works on all pages, accept the homepage. When i look in the head of the homepage it does load the jquery. Chrome gives the following error:

undefined is not a function (index):286
(anonymous function)

If i remove the line from the page.xml and add it again in the design-tab of the cms-page it works on the homepage, but not on all other pages (ofcourse).

I'm pretty new to this, does anyone have any idea's?

EDIT(on request) On Mariun requist, here is the code of the jquery. It's quite long.

(function ($) {
  function FadeTransition(element, opts) {
    var el = element,
        $el = $(el),
        fadeTimer = null,
        current = 0,
        paused = false,
        self = this,
        options = $.extend({pauseTime: 5000,
                            transitionTime: 2000,
                            ignore: null,
                            delayStart: 0,
                            pauseOnMouseOver: false,
                            manualNavigation: false,
                            createNavButtons: false,
                            navButtonContainer: null}, opts),
        els = (options.ignore)?$("> *:not(" + options.ignore + ")", el):$("> *", el);

    function setup() {
      $el.css("position", "relative");
      els.css("display", "none").css({left: 0, top: 0, position: "absolute"});
      els.filter(':first').css("display", "block");

      if (options.createNavButtons) {
        createNavButtons();
        highlightNav();
      }

      if (options.pauseOnMouseOver) {
        $el.mouseover(pause).mouseout(unpause);
        $('a', options.navButtonContainer || el).mouseover(pause).mouseout(unpause);
      }

      if (options.delayStart > 0) {
        setTimeout(start, options.delayStart);
      }
      else {
        start();
      }
    }

    function transitionTo(nextIdx) {
      $(els[current]).fadeOut(options.transitionTime);
      $(els[current = nextIdx]).fadeIn(options.transitionTime, cue);
      highlightNav();
    }

    function manualNav(e) {
      var idx;
      this.blur();
      $(els).stop(true);
      clearTimeouts();
      $(els).css({'opacity': 1, 'display': 'none'});
      $(els[current]).css({'display': 'block'});
      idx = $('.fadenav a', el).index(this);
      transitionTo(idx);
      e.preventDefault();
    }

    function createNavButtons() {
      var i, nav = $('<div class="fadenav"></div>');
      for (i=0; i<els.length; i++) {
        $('<a class="nav' + i + '" href="#">&nbsp;</a>', options.navButtonContainer || el).click(manualNav).appendTo(nav);
      }

      nav.appendTo(options.navButtonContainer || el);
    }

    function highlightNav() {
      if (options.createNavButtons) {
        $('.fadenav a', options.navButtonContainer || el).removeClass('current');
        $('.fadenav a:nth-child(' + (1 + current) + ')', options.navButtonContainer || el).addClass('current');
      }
    }

    function start() {
      if (options.ignore) {
        $(options.ignore, el).fadeOut(options.transitionTime);
        $(els[current]).fadeIn(options.transitionTime);
        fadeTimer = setTimeout(self.next, options.pauseTime + options.transitionTime);
      }
      else {
        highlightNav();      
        if (!options.manualNavigation) {
          fadeTimer = setTimeout(self.next, options.pauseTime);
        }
      }
    }

    function pause() {
      paused = true;
      clearTimeouts();
    }

    function unpause() {
      paused = false;
      cue();
    }

    function clearTimeouts() {
      if (fadeTimer) {
        window.clearTimeout(fadeTimer);
        fadeTimer = null;
      }
    }

    this.show = function(item) {
      if (typeof(els[item]) !== 'undefined') {
        clearTimeouts();
        transition(item);
      }

      return this;
    };

    this.currentItem = function() {
      return current;
    }

    function cue() {
      if (paused || options.manualNavigation || (els.length < 2)) {
        return false;
      }
      clearTimeouts();
      fadeTimer = window.setTimeout(self.next, options.pauseTime);
    }

    this.next = function() {
      transitionTo((current + 1) % els.length || 0);
    };

    this.prev = function() {
      transitionTo(((current || els.length) - 1) % els.length);
    };

    $el.data('Fader', this);
    setup();
  }

  $.fn.fadeTransition = function(options) {
    function getFader() {
      if (typeof $(this).data('Fader') === 'object') {
        return $(this).data('Fader');
      }
      else {
        return new FadeTransition(this, options);
      }
    }

    this.fader = function() {
      if (typeof $(this).filter(':first').data('Fader') === 'object') {
        return $(this).filter(':first').data('Fader');
      }

      return null;
    };

    return this.each(getFader);
  };


}(jQuery));

Answer 1

If you put jquery file inside page.xml under default layout handle, it will load for almost all pages in Magento. Obviously it will include that jquery file in home page, since homepage uses defaulthandle.

First thing that you need to check is, whether there is any conflict issues existing. In order to avoid conflict issues, what I normally do is, put jquery file above the inclusion of prototype.js file. and then edit the jquery file and add this code inside it, at very bottom

 var jq = jQuery.noConflict();

Then use this jq instead of $ in any file. Note this is my way of avoiding jquery conflict with prototype.js. There may be lot of other ways to do this.

If there is no conflict issues exist now, the reason may be removing jquery file through any handle(other than default handle) that is using in home page. This call somewhat look like this

<action method="removeItem"><type>skin_js</type><name>css/jquery.js</name></action>

If that is the case, you need to remove this line from that particular handle.

If it didn't work, the last suggestion that I can make here is, you put jquery file in cms page layout section as well as in default handle. It may resolve this problem.