0

Disclaimer: I know similar questions have been posted a lot of times, but after a lot of research I wasn't able to find a solution to this.

Hello, on the website I'm building there is a menu with filtering options. These options are composed of "a" tags and an "hr" underneath. The idea here is to increase the size of the before part of the "hr" when an option is pressed.

HTML Code:

<div style="padding-left: 15px; width: 100%">
    <a class="style-filter-item-options" style="color: #000 !important;" id="filter-option-id-latest">Latest</a>
    <a class="style-filter-item-options" id="filter-option-id-most-views">Most Views</a>
    <a class="style-filter-item-options" id="filter-option-id-random">Random</a>
    <hr id="video-index-hr-id" class="style-menus-hr" style="margin-bottom: 1.25rem; width: 100%; margin-left: 0; margin-right: 0; padding-right: 0;">
</div>

Relevant CSS:

.style-menus-hr {
    background-color: #c4c4c4 !important;
    border: none !important;
    display: block !important;
    height: 1px !important;
    overflow: visible !important;
    position: relative !important;
    max-width: 96% !important;
}

.style-menus-hr:before {
    background-color: #ff5c33 !important;
    content: '' !important;
    display: block !important;
    height: 1px !important;
    left: 0 !important;
    position: absolute !important;
    width: 5% !important;
    z-index: 1 !important;
}

JQuery representation example:

<script>
    $("#filter-option-id-latest").click(function(){
        $("#video-index-hr-id before").css('width', '5%');
    });
    
    $("#filter-option-id-most-views").click(function(){
        $("#video-index-hr-id before").css('width', '15%');
    });
</script>

Image representation:

When latest is pressed

When most-views is pressed

RaulRohjans
  • 57
  • 6
  • 1
    Why are all of your properties marked `!important`? Certainly there's a way of increasing the specificity of those selectors instead? – Heretic Monkey Aug 20 '21 at 20:35
  • Does this answer your question? [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) – Heretic Monkey Aug 20 '21 at 20:35
  • jquery does not work with pseudo-classes :before and :after in the selector. – s.kuznetsov Aug 20 '21 at 20:39
  • What is `$("#video-index-hr-id before")` a selector for? I am not aware of a `` element or tag. – Twisty Aug 20 '21 at 21:47
  • @HereticMonkey Im using css from a template and sometimes the attributes I create are not applied because of this other css. Long story, but it works like this. – RaulRohjans Aug 20 '21 at 21:53
  • @HereticMonkey I read that answer before posting this and if I understood correctly he is changing the content of the span on the after, through an attribute which can be "accessed" through JQuery. What I want to do is change the value of a specific attribute, not the value of the element. – RaulRohjans Aug 20 '21 at 21:58
  • @Twisty That is just an example to help explain what I want. Sorry if this made it more confusing, but the idea is basically changing the css attributes of the
    on the :before pseudo-class     – RaulRohjans Aug 20 '21 at 22:00
  • @RaulRohjans that cannot be done with jQuery. – Twisty Aug 20 '21 at 22:01
  • There are multiple answers on that question. I encourage you to read all of them before discounting the duplicate. [This answer](https://stackoverflow.com/a/49618941/215552) gives the example of using CSS variables in the CSS for the `::before` pseudo element, then changing the CSS variable instead. [This answer](https://stackoverflow.com/a/5335771/215552) suggests using classes on an ancestor, which seems ready-made for your example, where you want to have a set width for each of the different menu items. – Heretic Monkey Aug 21 '21 at 01:42

1 Answers1

0

Consider just using DIV elements. See example:

$(function() {
  $(".style-filter-item-options").click(function() {
    var percent = Math.round( $(this).position().left / $(document).width() * 100);
    console.log(percent);
    $("#video-index-hr-id .style-menus-bar").css("width", percent + "%");
  });
});
.style-menus-hr {
  background-color: #c4c4c4;
  border: none;
  display: block;
  height: 2px;
  overflow: visible;
  position: relative;
  max-width: 96%;
}

.style-menus-bar {
  background-color: #ff5c33;
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  width: 5%;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="padding-left: 15px; width: 100%">
  <a class="style-filter-item-options" style="color: #000 !important;" id="filter-option-id-latest">Latest</a>
  <a class="style-filter-item-options" id="filter-option-id-most-views">Most Views</a>
  <a class="style-filter-item-options" id="filter-option-id-random">Random</a>
  <div id="video-index-hr-id" class="style-menus-hr" style="margin-bottom: 1.25rem; width: 100%; margin-left: 0; margin-right: 0; padding-right: 0;">
    <div class="style-menus-bar">
    </div>
  </div>
</div>

This has the same effect or a progress bar. Can also calculate the percentage based on the document and the position.

Twisty
  • 30,304
  • 2
  • 26
  • 45