What methods can I use to prevent duplicate elements from being shown on the screen?

My timeline page showcases dates based on time stamps from activities I've created using the Public Activity Rails gem. Here's an example:

https://i.sstatic.net/8qAOw.jpg

In the example, you can see multiple dates displayed on the left in green. These dates are extracted from the created_at timestamps of the activities and presented in a user-friendly format.

I want to prevent duplicates from appearing. For instance, if there are multiple June 3rd dates, I only want to display it once.

Here is the HTML for date elements (displayed in a loop): 

<li class="time-label">
  <span class="bg-red">
   <%= activity_date(activity) %>
  </span>
</li>

Ruby Method used to format the date:

def activity_date(activity)
  local_date(activity.created_at)
end

I was considering using a conditional statement either in Ruby or JavaScript to prevent duplicate dates from being displayed. Any suggestions?

cssruby-on-railsruby

Answer №1

This could potentially offer a solution.

By analyzing the code utilized for creating this initially, it may be feasible to implement a loop that generates only one style instead of one for each element group.

<style>.time-label[data-actdate="<%= activity_date(activity) %>"] ~ .time-label[data-actdate="<%= activity_date(activity) %>"] { display: none; }</style>
<li class="time-label" data-actdate="<%= activity_date(activity) %>">
  <span class="bg-red">
   <%= activity_date(activity) %>
  </span>
</li>

Example snippet

<style>.time-label[data-actdate="3 June"] ~ .time-label[data-actdate="3 June"] { display: none; }</style>
<li class="time-label" data-actdate="3 June">
  <span class="bg-red">
   3 June
  </span>
</li>

<style>.time-label[data-actdate="3 June"] ~ .time-label[data-actdate="3 June"] { display: none; }</style>
<li class="time-label" data-actdate="3 June">
  <span class="bg-red">
   3 June
  </span>
</li>

<style>.time-label[data-actdate="3 June"] ~ .time-label[data-actdate="3 June"] { display: none; }</style>
<li class="time-label" data-actdate="3 June">
  <span class="bg-red">
   3 June
  </span>
</li>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I receive an [object HTMLCollection] as the output

I am currently working on recreating a login page and I want it so that when the button is clicked, it displays the name you entered, but instead, it returns [object HTMLCollection]. My expectation was to have the name displayed as entered. var nombre ...

javascripthtmlcssbutton

Tips for resolving the issue of CSS blocks disappearing when designing a webpage

When creating a responsive web page, the child block "overflows" from the parent block. This causes the entire page to shift to the left and an empty bar appears on the right side, moving all the content. I need to ensure that all content is positioned cor ...

cssbootstrap-4frontend

Navigate through information within designated boundaries

In order to achieve vertical scrolling of a sidebar div and its content (3 links) between two points, I have utilized the CSS property position:fixed; top: 100px. While this setup works well initially by positioning the sidebar 100px down from the top and ...

htmlcss

The visual content I have does not fill up the entire screen, which results in some empty spaces in the layout

Whenever I insert an image, I strive to have it fill the entire space but end up with white gaps. This is my code: <div style="background-image: url('../assets/img/food-with-ingredients.jpg'); -webkit-background-size: cover; -moz-back ...

cssbootstrap-5

How can data be partitioned into individual td elements in Rails after a specific number of records?

Revamped solution: I made some changes to the original answer that guided me in the right direction. Here is my updated code snippet: <table class="fixed"> <tr> ...

htmlruby-on-railsruby-on-rails-3

Issue with the datepicker's previous and next buttons not displaying images correctly

I'm currently working with a simple datepicker, but I'm encountering an issue where the previous and next button images are not being displayed. https://jqueryui.com/datepicker/ Everything works fine when using the following link: <link rel ...

cssdatepicker

What are the steps to include a scrollable tooltip in HTML?

Is there a way to implement a scrollable tooltip without using an iframe? Any existing jquery or css scripts that can help achieve this? If so, how can it be done? ...

javascriptjqueryhtmlcss

Enhance Prime-ng dropdown child elements with customized styling

Currently, I am attempting to apply styles to elements within a PrimeNG dropdown. These particular styles are associated with child elements nested within the p-dropdown tag, and I am unsure of the proper method to target them. Below is a snippet of the co ...

cssprimeng

A CSS class that inherits properties from another class

I have a simple question that I can't seem to find any documentation on the internet for. It's possible that my search terms were not quite right... Let's consider a CSS class called centered, which centers elements and performs other actio ...

htmlcssclass

Is there a way for me to adjust column widths in bootstrap using only CSS, without being able to modify the HTML code?

<div class="col-12 col-md-7">column md-7</div> <div class="col-12 col-md-1">spacer md-1</div> <div class="col-12 col-md-4">column md-4</div> Recently, I took on a volunteering opportunity to revamp a webpage for an upco ...

csstwitter-bootstrapbootstrap-4flexbox

Conceal CSS navigation bar with a single click

Is there a way to hide the dropdown menu after clicking on any item? How can I make it return to its initial state? Primarily, I want it hidden for mobile users. It currently works fine but remains open on mobile devices until another part of the page is c ...

javascriptjqueryhtmlcss

Center two lines of text in a div in a vertical fashion

After going through several articles on this topic, I've picked up some tricks for vertical alignment like using line-height for a single line of text, display:table for multiple divs, and Flexbox in CSS3. However, I'm still struggling to align t ...

htmlcssflexbox

Error occurred during SCSS rendering process: [Internal Error: Unable to locate or read the specified file.]

When trying to create a website using scss, I encounter an error every time I save the scss file. Strangely, after saving it multiple times, the file will render properly. Although this issue is minor, it really bothers me. I have searched for a solution ...

csssass

Firefox experiencing issues with width scaling

I'm having an issue where the main image is not resizing when I adjust the window size, specifically in Firefox. Here is the URL in question: How can I solve this problem? I attempted using width: 100% in .banner_right, but it only made things worse ...

cssfirefoxresponsive-design

Displaying a pop-up message in Rails upon modifying a Model

Would it be feasible to implement the ActiveRecord Callbacks before_create after_create before_save after_save before_destroy after_destroy in order to showcase notifications to the user using jQuery? Could someone possibly share an example?? Appreci ...

jqueryruby-on-railsruby

The media query appears to be ineffective on the footer section when accessed from a mobile device, yet it functions properly when adjusting the browser's screen size

I'm facing an issue with the footer section of my website. It appears very responsive when viewed from a desktop or tablet, but when I open the site on my mobile phone, the footer looks unstyled. Here is how it appears on desktop at 360px: enter ima ...

javascripthtmlcssreactjssass

Heroku: Showcasing a unique page during the application's startup process

Would it be feasible to showcase a static HTML page while the dyno is starting up, just like how a custom page can be shown during errors or maintenance mode? The size of my app's slug is quite significant, leading to a startup time of almost 50 seco ...

htmlcssherokudyno

Firefox seemingly resistant to transitioning between elements

Why is Firefox refusing to transition the element? Any suggestions for a fix? .config:before { content: 'test'; font: 25px/55px serif; -webkit-transition: .6s -webkit-transform ease-in-out; transition: .6s transform ease- ...

cssfirefoxtransition

Having trouble adjusting the H1 size after resetting

Currently facing an unusual bug that has me stumped. In my application, I've implemented Meyers reset. However, when I attempt to modify the h1 font size in my main CSS file, it doesn't take effect. Strangely enough, if I place the change within ...

htmlcsssasshtml-heading

support for browser compatibility in svg animations

Exploring the world of .svg animation has piqued my interest while working on our website. I am eager to create an animated icon that reacts to hover. Although there are numerous tutorials available, I've noticed that there are several methods for ac ...

cssanimationsvgcross-browser