WordPress.org

Ready to get started?Download WordPress

Forums

jQuery conflicts help (3 posts)

  1. danbahrami
    Member
    Posted 1 year ago #

    Hi guys,

    this is my first post in these forums so forgive me if this has already been answered but I have had a look around and just can't solve my issue.

    The site i'm working on is... here
    It's a one page site that uses jquery smooth scrolling to navigate. It all worked fine until I used the tour-dates plugin that you can see in the 'gigs' section, for some reason that throws off the scrolling action by the height of the tour-dates container div (I think).

    I don't think it's a problem with my smooth scrolling code which is here...

    <script type="text/javascript">
    $(document).ready(function() {
      function filterPath(string) {
      return string
        .replace(/^\//,'')
        .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
        .replace(/\/$/,'');
      }
      var locationPath = filterPath(location.pathname);
      var scrollElem = scrollableElement('#main');
      $('a[href*=#]').each(function() {
        var thisPath = filterPath(this.pathname) || locationPath;
        if (  locationPath == thisPath
        && (location.hostname == this.hostname || !this.hostname)
        && this.hash.replace(/#/,'') ) {
          var $target = $(this.hash), target = this.hash;
          if (target) {
            var targetOffset = $target.offset().top - 130;
            $(this).click(function(event) {
              event.preventDefault();
              $(scrollElem).animate({scrollTop: targetOffset}, 1000, function() {
                location.hash = target;
              });
            });
          }
        }
      });
      // use the first element that is "scrollable"
      function scrollableElement(els) {
        for (var i = 0, argLength = arguments.length; i <argLength; i++) {
          var el = arguments[i],
              $scrollElement = $(el);
          if ($scrollElement.scrollTop()> 0) {
            return el;
          } else {
            $scrollElement.scrollTop(1);
            var isScrollable = $scrollElement.scrollTop()> 0;
            $scrollElement.scrollTop(0);
            if (isScrollable) {
              return el;
            }
          }
        }
        return [];
      }
    });
    </script>

    because it was working fine before I installed the tour-dates plugin so I think it's most likely that i've included jquery badly.

    I know it's the wrong way to do it but I just cant get any other way to work so i've linked it into the header using this...
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    Could someone tell me where i'm going wrong and point me in the right direction?

    Thanks

  2. bcworkz
    Member
    Posted 1 year ago #

    wp_enqueue_script() is the proper way to include your script file. Passing the dependency argument as array('jquery') should be all that's needed to get jquery included with your script.

    If you still have trouble, there could be a name collision or something that is causing conflict with the plugin. Neither side is doing anything wrong, but the conflict needs to be resolved.

  3. lieutenantdan
    Member
    Posted 1 year ago #

    $(document).ready(function() {

    can be turned into

    jQuery(document).ready(function($) {

    for conflict free

Topic Closed

This topic has been closed to new replies.

About this Topic