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>
  • Can you post the html of the dom objects your trying to work with? – Jance Jul 8 '15 at 19:41
  • Hi, I added the HTML code. – Optimus Prime Jul 8 '15 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 '15 at 19:58
  • When clicked console gives 'TypeError: $(...).offset(...) is null'. It does exist., I just posted the HTML. – Optimus Prime Jul 8 '15 at 20:00
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);
  • 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 – Optimus Prime Jul 8 '15 at 20:04
  • Nevermind, the issue was the typo. Not calander, but calendar. – Optimus Prime Jul 8 '15 at 20:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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