"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.

https://i.sstatic.net/yBgKI.png

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

`How can I extract HTMLElements from slots in vue3?`

Analyzing exif data during the process of uploading a batch of images

Refresh the div element's HTML and content using AJAX

A method for utilizing history.goBack in linked tabs while preventing the user from reverting to the previously selected tab

Should I utilize a single form or one for each table row in asp.net mvc?

Exploring the dynamics of parent and child components in Angular

What are the steps to integrate dynamic data into chartjs?

React frontend unable to retrieve JSON data from Rails API

Issue with updating state in SideBar.js following button click in Layout.js

What is the process for loading views without relying on the site.master file?

Bootstrap failing to enclose columns that do not have a specified size

Loop through each JSON object and insert it into an HTML element

How can I send a Vue.js object to a Laravel controller?

What is the significance of using single quotation marks to enclose the 'raw' key in Tailwind?

Tips for Excluding Content Retrieved Through file_get_contents?

can you explain the concept of a backing instance in react?

jQuery efficiently handles large amounts of text data transfer (gradual loading)

The modal popup is getting lost behind the slider

How does Backbone.js tackle error handling when receiving messages from Rails?

My React application is not showing the CSS styles as intended