How to write javascript on Drupal with drupal.behaviours

Question

I have a grid that contains two rows and three columns. Each column has a picture, a title, and a subtitle. All the pictures have the same class, let's say "image".I want the picture to change during hover. I have a div with the other image (the one that I want to show on hover) with the property display: none;

This is the HTML code:

<div class="row-1">
    <div class="col-1">
        <div class="view-field-image">
            <div class="field-content">
               <img class="image" src="../.." al="">
            </div>
        </div>
        <div class="view-field-collapsed">
            <div class="field-content">
               <img class="collapsed" src="../.." al="">
            </div>
        </div>
     </div>
     <div class="col-2">
     </div>
     <div class="col-3">
     </div>
</div>

This is the js code:

(function ($, Drupal) {

  'use strict';

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

      $('.view-field-image .field-content', context)
        .once()
        .each( function () {
          $(this, context)
          .mouseenter( function () {
            console.log('enter');
            $('image', context).css('display', 'none');
            $('.collapsed', context).css('display', 'block');
          })
          .mouseleave( function () {
            console.log('leave');
            $('image', context).css('display', 'block');
            $('.collapsed', context).css('display', 'none');
          });
        });
    }
  };

})(jQuery, Drupal);

I don't have the excepted result. When I hover over the picture all the pictures show the hidden picture with the collapsed class. Furthermore the picture with the class= "image" doesn't disappear.

2pha · Answer 1 · 2019-08-28T23:52:26.463

After playing around with the javascript for a while, I realised you could simple do this with CSS, no Javascript needed.

You will just have to add a class to the columns, in the case of this example it is image-col.

.image-col {
  width: 200px;
  height: 100px;
  position: relative;
}
.image-col > div {
  position: absolute;
  width: 100%;
  height: 100%;
}
.image-col img {
  width: 100%;
  height: 100%;
}
.image-col .view-field-image {
  z-index: 10;
}
.image-col .view-field-collapsed {
  z-index: 1;
}
.image-col:hover .view-field-image {
  display: none;
}

<div class="row-1">
    <div class="col-1 image-col">
        <div class="view-field-image">
            <div class="field-content">
               <img class="image" src="https://searchengineland.com/figz/wp-content/seloads/2015/09/google-logo-green2-1920.jpg" al="">
            </div>
        </div>
        <div class="view-field-collapsed">
            <div class="field-content">
               <img class="collapsed" src="https://searchengineland.com/figz/wp-content/seloads/2015/11/google-stars-reviews-rankings5-ss-1920.png" al="">
            </div>
        </div>
     </div>
     <div class="col-2 image-col">
     </div>
     <div class="col-3 image-col">
     </div>
</div>

After posting this I saw that the problem is probably more than the way the context variable is being used.

But I am leaving the answer here on request of the OP.

Original (wrong) answer

You are using the context variable wrong.
context will be what jquery looks into to find an element.
eg.
$('.something', context)
jquery will search for ".something" inside of context.

Your code uses: $('image', context).css('display', 'none'); but, as this is in a loop, you really only want the context to be the current element in the loop.
So your each loop should loop more like:

.each( function (index, element) {
  let $this = $(this);
  .mouseenter( function () {
    // Search for image in the current looping element.
    $('image', $this).css('display', 'none');
    // Search for all collapsed
    $('.collapsed', context).css('display', 'block');
  })

Wasim Khan · Answer 2 · 2019-09-01T06:27:15.113

-2

       (function ($, Drupal, drupalSettings) {

            Drupal.behaviors.YOURBEHAVIOR = {

                attach: function (context, settings) {

                    $('.YOURCLASS', context).on('YOUREVENT', function () {

                alert('TEST STRING...');  //Your javascript code...
                $('.YOURCLASS').addClass('ADD THE CLASSES HERE...');

                });

                }
            };
        })(jQuery, Drupal, drupalSettings);

edited Sep 01 '19 at 06:27

answered Aug 28 '19 at 08:34

Wasim Khan

1,177
12
13

How exactly is this an answer to the question? – 2pha Aug 28 '19 at 10:12
@2pha why I can't see your answer anymore? It was very helpful! – sstavridis Aug 28 '19 at 11:44
sorry, I deleted it as I saw that the problem was more than what I had put in my answer. I will undelete it. – 2pha Aug 28 '19 at 22:56
@2pha, i have given just a template about how the javascript will work with drupal behaviors where in alert section you can write your specific code. – Wasim Khan Aug 29 '19 at 05:49
@WasimKhan Your "template" adds nothing to what the OP already has. – 2pha Aug 29 '19 at 13:20
@2pha, I added the code to make it easier how to use javascript inside drupal behaviors – Wasim Khan Sep 01 '19 at 06:28

How to write javascript on Drupal with drupal.behaviours

This is the HTML code:

This is the js code:

2 Answers2