0

This script from JSFiddle that works: https://jsfiddle.net/ryXFt/704/

Does not work in my Drupal theme (yes, it does load, I can see it via Firebug). All I do is just wrap up the code to match Drupal rules.

(function ($) {
  Drupal.behaviors.yourBehaviorName = {
    attach: function (context, settings) {
        $("#block-menu-menu-mobile ul li .nolink").click(function() {
            $('html,body').animate({
                scrollTop: $(".region-front-calander").offset().top},
                'slow');
        });
    }
  };
})(jQuery);

When clicked, console gives TypeError: $(...).offset(...) is null for line that contains scrollTop: $(".region-front-calander").offset().top},

HTML

<html>
    <body>
        <div id="page">
            <div id="main">
                <div id="content" class="column" role="main">
                    <div class="region region-highlighted">
                        <div id="block-menu-menu-mobile" class="block block-menu first odd" role="navigation">
                            <ul class="menu">
                                <li class="first leaf">
                                    <span class="nolink" title="">Calendar</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="region region-front-calendar"></div>
                </div>
            </div>
        </div>
    </body>
</html>
4
  • Can you post the html of the dom objects your trying to work with?
    – Jance
    Jul 8, 2015 at 19:41
  • Hi, I added the HTML code. Jul 8, 2015 at 19:49
  • Does "#block-menu-menu-mobile ul li .nolink" exist? Is it clickable? What appears in JS console when you click it? Is your function called at all? With error? No error but nothing visible happens?.. Scrolling attempt might get unnoticed if the problem is with your CSS, for example.
    – Mołot
    Jul 8, 2015 at 19:58
  • When clicked console gives 'TypeError: $(...).offset(...) is null'. It does exist., I just posted the HTML. Jul 8, 2015 at 20:00

1 Answer 1

1

Looks like your classes aren't matching up. I'm guessing that the ideal action you want is when you click on the calendar link, it brings the region-front-calendar up.

The issue looks like your js isn't doing anything to that region, rather it's attempting to pull up a class called "second" which dosn't exist in the html snippet you posted.

If you switch that to the region-front-calander, that might be the answer your looking for.

(function ($) {
  Drupal.behaviors.yourBehaviorName = {
    attach: function (context, settings) {
        $("#block-menu-menu-mobile ul li .nolink").click(function() {
            $('html,body').animate({
                scrollTop: $(".region-front-calander").offset().top},
                'slow');
        });
    }
  };
})(jQuery);
2
  • You're right, I forgot to replace the class from .second to .region-front-calander, but after replacing it's still not working. Console gives TypeError: $(...).offset(...) is null Jul 8, 2015 at 20:04
  • Nevermind, the issue was the typo. Not calander, but calendar. Jul 8, 2015 at 20:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.