1

After a pause, I've been working on my Drupal 7 site again, and I have stumbled upon a minor problem regarding JavaScript and Ajax.

Thanks to this great website, I've learned of Drupal.behaviors, and I tried implementing my JavaScript code with it, so it shows up after an Ajax refresh within a view.

(function ($) {
Drupal.behaviors.borderfarba = {
    attach: function (context, settings) {

        var nmbr = 1;

        $(".moviescreenss",context).each(function () {

            var clrclass = "clr" + nmbr.toString();
            $(this).addClass(clrclass);
            addborder(clrclass);
            nmbr++;
        });


        function addborder(clrclass) {
            $("." + clrclass + " img").insetBorder({
            borderColor: get_random_color(),
            inset: 5
            });
        }

        function rand(min, max) {
            return parseInt(Math.random() * (max - min + 1), 10) + min;
        }

        function get_random_color() {
            var h = rand(40, 130);
            var s = rand(30, 75);
            var l = rand(40, 60);
            return 'hsl(' + h + ',' + s + '%,' + l + '%)';
        }
    }
};

})(jQuery);

I'm not that experienced with JavaScript, and I'm sure there are many possible improvements with the core code itself (e.g. the way functions are called).

What it does is add the jQuery inset border effect to every image link generated by the Views module, and color them with a random color within a specified range from reddish to green. (I somehow implemented this with a for-loop that adds a new "class+1" to each image, and the random HSL generator I found somewhere online.)

After adding the Drupal behaviors, the inset borders are still there after the AJAX action, but they are static and the hover effect is gone.

* UPDATE * I have noticed this only happens afte clicking on a submit button. For example when using the VIEWS pager in ajax mode, the javascript applies fine

Any help would be greatly appreciated, as I'm certain it will help me understand JavaScript scripting better, besides new Drupal techniques

  • What hover effect are you talking about? – googletorp Mar 18 '12 at 20:43
  • The disappearing inset border as seen here css-tricks.com/examples/InsetBorderEffect once you hover over the images the border will retract. This doesn't happen with my code if it goes through Ajax (only the static inset border is there on the images) – Lux Delux Mar 18 '12 at 21:08
0

Well it seems I have found a solution :-)

I needed to add 'context' to the function of border adding itself

so this

 $(".moviescreenss").each(function () {

becomes this

 $(".moviescreenss",context).each(function () {

and now it seems to work fine :-)

Still need to see if I can make the whole code more efficient, I'll go to stackoverflow with this and update here if I get anything better

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.