Ajax Nodeloader F.A.Q.

08.06.2012
  1. Q. Module shows only title/broken/not working etc. What should I do?

    A. First of all, be sure, that you are using the latest version of the module. Ajax Nodeloader is under active development and time to time it gets new abilities and bugfixes.

    Also, while Ajax Nodelloader is sandbox project you should install it manually (via download and unpack) instead of installation via Drupal administration panel. See http://drupal.org/node/1609058

    If nothing helps, please create detailed issue via http://drupal.org/node/add/project-issue/1447152

  2. Q. It’s not work, but loader image appears.

    A. Be sure, that your link opens without class “nodeloader” and it’s href path is correct. Also, your link path must be absolute, and starts from slash, i.e. “/node/1″ or “/contacts”, but not from “http://yoursite.name” or external path.

  3. Q. It adds unnecessary word to URL, for example: my baseurl http://localhost/sitename/en, and there is a link http://localhost/sitename/en/content/blahblah it adds http://localhost/sitename/en#/sitename/en/content/blahblah

    A. Ajax Nodeloader just store link “href” attribute in hashtag, to allow you share your AJAXified links. So, if you’ve point your link href as “/sitename/en/content/blahblah” it will save it in hashtag.

  4. Q. How to replace loader image to my own? Should I edit the code?

    A. To replace animated module loader image, you should override some css in your site theme, for example:

    /* ajax nodeloader image */
    div#ajax-nodeloader-image {
      background: #fff url(../images/your-loader.gif) no-repeat center center!important;
    }

    Also, you can override position and size of the loader element, for example, this code brings it to center of the page and add round corners (except IE):

    /* ajax nodeloader image */
    div#ajax-nodeloader-image {
      background: #fff url(../images/your-loader.gif) no-repeat center center!important;
      border: 2px solid #B3B5B7;
      width: 128px!important;
      height: 128px!important;
      position: fixed;
      left: 50%!important;
      top: 50%!important;
      margin: -64px 0px 0px -64px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -khtml-border-radius: 10px;
      border-radius: 10px;
    }
    

    Another example allows you to make loader image follow your links. In your theme *.js file add function:

    /* Your theme JS file. */
    (function ($) {
      /* Here is document ready event. */
      $(document).ready(function() {
        // Delegate move loader function to all links:
        $(document).delegate('a','click',function() {
          var offset = $(this).offset();
          $('#nodeloader-ajax-image').css('top', offset.top+$(this).outerHeight());
          $('#nodeloader-ajax-image').css('left',   offset.left);
        });
      });
    })(jQuery);
    

Leave a Reply

CAPTCHA Image