"Delve into the art of utilizing negative space between elements with

Question

"Delve into the art of utilizing negative space between elements with

Looking to implement hover detection between rows in a grid container, rather than on individual items. The number of items in the container and per row may vary.

It's important to note that the item count in the container and rows is dynamic.

The current structure of my item container is as follows:

<div class="container">
    <div class="hover-placeholder"></div>
    <div class="row">
        <!-- Start : Items -->
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            ...
            <div class="col-md-3">...</div>
        <!-- End : Items -->
    </div>
</div>

I am aiming to avoid adding a placeholder element every 4th item due to varying screen sizes reducing the items per row. Instead, I have placed a single placeholder outside the grid which I plan to transform: translateY(..) between hovered rows.

Current progress can be viewed here: https://jsfiddle.net/0t8c0h4m/

Despite my efforts so far, I seem to be getting stuck due to overthinking. Any assistance would be appreciated!

UPDATE

The aim is for the .hover-placeholder to translate to the position between the rows upon hovering over the negative space. Clicking will create a permanent separator between the rows.

SUCCESS!

After working through the issue, I have managed to solve it. Thanks to everyone who offered their support.

Here is the finalized solution: https://jsfiddle.net/0t8c0h4m/9/

javascript jquery html css hover

Answer 1

Answer №1

I believe that simplicity is key when it comes to achieving the hover effect between elements without overcomplicating things.

Latest Update:

var offsets;

function get_offsets() {
  offsets = {};
  $('.card').each(function() {
    var $this = $(this);
    var card_offset = $this.offset().top;
    offsets[card_offset] = {
      ele: $this
    };
  })
}
get_offsets();

function get_last_ele(mouse_location) {
  var element;
  var previous_key;
  $.each(offsets, function(key, obj) {
    if (key > mouse_location && previous_key > 0) {
      element = offsets[previous_key].ele;
      return false;
    }
    previous_key = key;
  })
  return element;
}

$('.container').mousemove(function(e) {
  if ($(e.target).parents('.row').length == 0) {
    var last_item_row = get_last_ele(e.pageY)
    console.log(last_item_row.text())
  }
});

JSFiddle: https://jsfiddle.net/0t8c0h4m/6/

I have shared the code snippet for obtaining the last item on the row before the hovered space. You can proceed to customize the appearance or transition of the placeholder according to your preferences.

Answer 2

I believe that simplicity is key when it comes to achieving the hover effect between elements without overcomplicating things.

Latest Update:

var offsets;

function get_offsets() {
  offsets = {};
  $('.card').each(function() {
    var $this = $(this);
    var card_offset = $this.offset().top;
    offsets[card_offset] = {
      ele: $this
    };
  })
}
get_offsets();

function get_last_ele(mouse_location) {
  var element;
  var previous_key;
  $.each(offsets, function(key, obj) {
    if (key > mouse_location && previous_key > 0) {
      element = offsets[previous_key].ele;
      return false;
    }
    previous_key = key;
  })
  return element;
}

$('.container').mousemove(function(e) {
  if ($(e.target).parents('.row').length == 0) {
    var last_item_row = get_last_ele(e.pageY)
    console.log(last_item_row.text())
  }
});

JSFiddle: https://jsfiddle.net/0t8c0h4m/6/

I have shared the code snippet for obtaining the last item on the row before the hovered space. You can proceed to customize the appearance or transition of the placeholder according to your preferences.

Answer 3

Answer №2

Please use the following script for your task

(function($) {
    'use strict';

  // Function to calculate number of items per row
  function items_per_row($collection) {
    var count = 0;

    $collection.each(function() {
      var $this = $(this);

      if ($this.prev().length > 0) {
        if ($this.position().top !== $this.prev().position().top) {
          return false;
        } else {
          count++;
        }
      } else {
        count++;
      }
    });

    var last = count ? $collection.length % count : 0,
        rows = count ? Math.round($collection.length / count) : 0;
    if (last == 0) {
      last = count;
    }

    return {
      count: count,
      last: last,
      rows: rows
    }
  };

  // Show the current row when hovering over a card
  $('.card').mouseenter(function() {
    var $card       = $(this);

    var item_count  = items_per_row( $('.card') ),
        index       = $(this).index(),
        current_row = Math.floor(index / item_count.count) + 1;

        $('pre').text( $card.find('.inner').text() + ' is in row '+ current_row );
  });
   $('.card').mouseout(function(){
  $('pre').text('');

  });


})(jQuery);

Answer 4

Please use the following script for your task

(function($) {
    'use strict';

  // Function to calculate number of items per row
  function items_per_row($collection) {
    var count = 0;

    $collection.each(function() {
      var $this = $(this);

      if ($this.prev().length > 0) {
        if ($this.position().top !== $this.prev().position().top) {
          return false;
        } else {
          count++;
        }
      } else {
        count++;
      }
    });

    var last = count ? $collection.length % count : 0,
        rows = count ? Math.round($collection.length / count) : 0;
    if (last == 0) {
      last = count;
    }

    return {
      count: count,
      last: last,
      rows: rows
    }
  };

  // Show the current row when hovering over a card
  $('.card').mouseenter(function() {
    var $card       = $(this);

    var item_count  = items_per_row( $('.card') ),
        index       = $(this).index(),
        current_row = Math.floor(index / item_count.count) + 1;

        $('pre').text( $card.find('.inner').text() + ' is in row '+ current_row );
  });
   $('.card').mouseout(function(){
  $('pre').text('');

  });


})(jQuery);

Answer 5

Answer №3

After some thoughtful consideration, I have devised a clever CSS solution to display dividers between each row. It turns out, I was simply overcomplicating the issue.

By inserting a separator element after each item and utilizing the nth-child() property in CSS, I can effectively showcase specific dividers at every interval.

In addition, I have successfully implemented the grouping feature that I had initially set out to achieve.

Here is the updated code example for reference: https://jsfiddle.net/0t8c0h4m/9/

Answer 6

After some thoughtful consideration, I have devised a clever CSS solution to display dividers between each row. It turns out, I was simply overcomplicating the issue.

By inserting a separator element after each item and utilizing the nth-child() property in CSS, I can effectively showcase specific dividers at every interval.

In addition, I have successfully implemented the grouping feature that I had initially set out to achieve.

Here is the updated code example for reference: https://jsfiddle.net/0t8c0h4m/9/

"Delve into the art of utilizing negative space between elements with

Answer №1

Answer №2

Answer №3

Similar questions

Access a webpage outside of your domain using htaccess and PHP functionality

Implementing promises when updating data in Firestore with JavaScript on Firebase

Permit users to access downloads upon authorization

What is the best way to implement loading a script after an AJAX request has

Error encountered while trying to retrieve JSON data

Is there a way to utilize the child component's method?

Chained module incorporating a specialized Angular form validation directive

Exploring the distinctions between Django template variables and JavaScript variables

Establish a pathway based on an item on the list

Accessing a specific child div within a parent div using JavaScript and CSS

Encountering issue while starting npm: expressjs server facing problem with MongoDB

There seems to be an issue with the next-sitemap image location showing as undefined in the sitemap

Using Vue.js to handle asynchronous functions with undefined variables

The code in the head section is not running as expected

Having trouble sending an array from Flask to a JavaScript function

Leverage the Google Maps JavaScript API v3 to retrieve details for multiple locations using the getDetails(request, callback

Inject a jQuery form submission using .html() into a div element

Ways to prevent a background image from centering at a designated width

Is it possible for Cypress to execute test files that are imported from outside of the Cypress folder

Javascript in Chrome can be used to initiate and conclude profiling