Emphasize a passage by clicking on a different section of text

Seeking Assistance

I am currently customizing this template which incorporates the MixItUp plugin. My query pertains to highlighting the "filter tab" upon clicking on the corresponding text when hovering over each image, a task I find challenging as a newcomer to web development.

Snippet

$(document).ready(function() {

    /* ========================================================================= */
    /*Filtering
    /* ========================================================================= */

    $(".project-wrapper").mixItUp();

});
/*=========================================
Basic Style
==========================================*/

body {
    line-height: 21px;
    font-size: 13px;
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a, a:focus, a:hover {
    text-decoration: none;
}

body>section, .footer {
    padding: 70px 0;
}


/*=========================================
Mix
==========================================*/
...

<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <!-- meta charec set -->
    <meta charset="utf-8">
    <!-- Page Title -->
    <title>MixItUp</title>

    <!--=========================================
        CSS
        =========================================-->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="css/main.css">


    <!--=========================================
        Essential jQuery Plugins
        =========================================-->
    <!-- Main jQuery -->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- jquery.mixitup.min -->
    <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
    <!-- Custom Functions -->
    <script src="js/custom.js"></script>
</head>

<body id="body">

    <section>
        <div class="container">
            <div class="row">

                <div class="work-filter">
                    <ul class="text-center">
                        <li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
                        <li><a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a></li>
                        <li><a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a></li>
                        <li><a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a></li>
                        <li><a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a></li>
                        <li><a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a></li>
                        <li><a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a></li>
                    </ul>
                </div>

            </div>
        </div>

        <div class="project-wrapper">
            
            ...
            
        </div>

    </section>

</body>

</html>

Your assistance is greatly appreciated,
Luiz.

javascriptjqueryhtmlcss

Answer №1

To achieve your desired outcome, follow the steps below.

Start by adding the event on the filter class and then check for the element with the same data-filter attribute in the tab context.

$(document).ready(function() {

    /* ========================================================================= */
    /*Filtering
    /* ========================================================================= */

    $(".project-wrapper").mixItUp();
  
    $(".filter").on("click",function()
    {
      var dFilter = $(this).attr("data-filter");
      
      var tabContext = $(".work-filter");
    
      $( "a[data-filter='"+dFilter+"']",tabContext ).addClass("active");

      
    })

});
/*=========================================
Basic Style
==========================================*/

body {
    line-height: 21px;
    font-size: 13px;
}

ol, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a, a:focus, a:hover {
    text-decoration: none;
}

body>section, .footer {
    padding: 70px 0;
}


/*=========================================
Mix
==========================================*/

.work-filter {
    margin-bottom: 35px;
}

.work-filter ul li {
    display: inline-block;
}

.work-filter ul li a {
    color: #062033;
    display: block;
    padding: 5px 17px;
}

.work-filter ul li a:hover, .work-filter ul li a.active {
    background-color: rgba(31, 107, 76, 1);
    color: #fff;

}

.mix {
    display: none;
}

.project-wrapper {
    text-align: center;
}

.work-item {
    float: none;
    width: 30%;
    position: relative;
}

.work-item>img {
    display: block;
    height: 100%;
    width: 100%;
}

.overlay {
    background-color: rgba(31, 107, 76, .9);
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    opacity: 0;
}

.work-item:hover .overlay {
    opacity: 1;
}

.work-item .overlay a {
    font-size: 30px;
    display: inline-block;
    margin-top: 34%
}

.work-item .overlay a:hover {
    color: #fff;
}



/*=========================================
Media Queries
==========================================*/



/*============================================================
For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {

/* work */

}


/*============================================================
Tablet (Portrait) Design for a width of 768px
==============================================================*/

@media (min-width: 768px) and (max-width: 979px) {

/* work */

.work-item {
  float: left;
  width: 33%;
}

}


/*============================================================
Mobile (Portrait) Design for a width of 320px
==============================================================*/

@media only screen and (max-width: 767px) {

/* work */

.work-item {
  float: left;
  left: 5% !important;
  width: 90%;
}

}


/*============================================================
Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {

/* work */

.work-item {
  left: inherit !important;
  width: 50%;
}

}
<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
    <!-- meta charec set -->
    <meta charset="utf-8">
    <!-- Page Title -->
    <title>MixItUp</title>

    <!--=========================================
        CSS
        =========================================-->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="css/main.css">


    <!--=========================================
        Essential jQuery Plugins
        =========================================-->
    <!-- Main jQuery -->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- jquery.mixitup.min -->
    <script src="https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
    <!-- Custom Functions -->
    <script src="js/custom.js"></script>
</head>

<body id="body">

    <section>
        <div class="container">
            <div class="row">

                <div class="work-filter">
                    <ul class="text-center">
                        <li><a href="javascript:;" data-filter="all" class="active filter">All</a></li>
                        <li><a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a></li>
                        <li><a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a></li>
                        <li><a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a></li>
                        <li><a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a></li>
                        <li><a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a></li>
                        <li><a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a></li>
                    </ul>
                </div>

            </div>
        </div>

        <div class="project-wrapper">

            <figure class="mix work-item mix1">
                <img src="http://imgur.com/KZfjrVT.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix1" class="filter">Mix1</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix2">
                <img src="http://imgur.com/GB54YZR.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix2" class="filter">Mix2</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix3">
                <img src="http://imgur.com/afatbzS.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix3" class="filter">Mix3</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix4">
                <img src="http://imgur.com/GvjT75d.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix4" class="filter">Mix4</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix5">
                <img src="http://imgur.com/KJ9MaK6.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix5" class="filter">Mix5</a>
                </figcaption>
            </figure>

            <figure class="mix work-item mix6">
                <img src="http://imgur.com/w3ZFVnq.jpg" alt="">
                <figcaption class="overlay">
                    <a href="javascript:;" data-filter=".mix6" class="filter">Mix6</a>
                </figcaption>
            </figure>

        </div>

    </section>

</body>

</html>

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

td having no line breaks causing text to extend beyond the cell

I have a challenge with using the nowrap property on td elements to ensure proper formatting of my tables. In the first table, everything wraps nicely, but in the second table, the content in the first "td" exceeds its designated space due to length. How c ...

htmlcsshtml-tableword-wrap

A guide to accessing a property value in Angular 6 from an object using a string key

In my Angular application, I am receiving an object with multiple arrays from a REST service. I need to access the value from the incoming object based on the property name. Here is what the object looks like: data{ array1:{}, array2:{}, array3:{} } Th ...

javascriptangulartypescript

Unable to retain the textbox value upon the initial button click in ReactJS

Can you please assist me? I am trying to save textbox data to hooks, but when I click the save button, the data is not immediately saved to my useState. I have to click the save button again in order to save it to the hooks. Here are the relevant code sni ...

javascriptreactjs

Selecting the initial and final elements in a list without utilizing pseudo-classes

Currently, I am in the process of designing a custom MUI styled component and I have encountered a challenge. I want to apply extra styles specifically for the first and last child elements. The issue arises because MUI utilizes the emotion styled library, ...

cssreactjsmaterial-uistyled-components

Having trouble with Vue.js implementation of Bootstrap tab navigation?

I am currently working on a vue.js application that consists of 2 routed components. I recently attempted to integrate a bootstrap tab navigation into the first component, but unfortunately, the tab contents are not being properly displayed. <templat ...

javascripthtmlcsstwitter-bootstrapvue.js

Collapsed Bootstrap 5 select drop-down featuring the multiple attribute

I am facing a challenge with using the select element along with the 'multiple' attribute. My aim is to have it collapsed by default and expand only when the user clicks on it. Unfortunately, Bootstrap 5 no longer supports the multiselect feature ...

jquerycssbootstrap-5bootstrap-selectbootstrap-selectpicker

Arranging a dropdown list of options in alphabetical order using Javascript

Could you assist me in sorting my select list alphabetically? Below is the code I currently have:- $.getJSON("php/countryBorders.geo.json", (data) => { $select.html(""); for (let i = 0; i < data["features"].leng ...

javascriptjqueryjsonfor-loop

The setTimeout function within the map function does not output any JSX element

I have been pondering the possibility of creating animated buttons using setTimeout on map elements. As I delve into learning React Transition group, I came up with this code snippet: function NavItemSub(props) { const array1 = props.array1; return ( ...

cssjsxsettimeoutmap-function

Passing a variable into the highcharts function using jquery and pug is proving to be a challenge for me

I am facing an issue while trying to pass a variable into the Highcharts function using jquery and pug. This variable is essential for setting data in series. In order to tackle this problem, I have created a function called getData in my index.js file whi ...

jquerynode.jsexpresshighchartspug

Meteor chat platform now offers the option to create multiple chat rooms

I've been working on an application that features multiple chat rooms. Currently, one of the rooms is functional in terms of sending and receiving messages. However, when I navigate to a different room and try to send a message, the message doesn&apos ...

javascripthtmlmeteorchat

Embrace the presence of null values on the client side

When utilizing the code below, I can determine the location of logged-in users. However, there are some users who do not have a specific location assigned. For example, Administrators are common for all locations. In such cases, how can I set it so that ...

javascriptc#jqueryasp.net-mvc

Tips for showing Japanese characters received through an ajax request on a jsp webpage

I'm facing an issue with my .jsp page where it makes an ajax request to another .jsp page. The query parameter contains Japanese characters and I've confirmed that they are passed correctly in the request. However, the string is not being receive ...

javajqueryajaxjsp

Display an image overlaying a div

I am attempting to position an image outside of its parent div in such a way that it appears to be sitting on top of the div without affecting the height of the parent. However, no matter what I attempt, the image consistently gets clipped by the parent di ...

htmlcssimagecss-floatcss-position

Missing CSS in dynamically loaded content on IE

I have been searching everywhere, but I just can't seem to find a satisfactory answer to this particular question. Whenever I load a few items on the page, they are displayed correctly at first. However, if a user decides to change the language, the ...

htmlcssajaxinternet-explorerdynamic

Changing position with flair in CSS

Is there a way to create a transition effect on an element when it changes position from static to fixed? I attempted using the code: transition: position 2s linear;, however, it does not seem to have any impact. Are there any other methods I could experi ...

htmlcss

Challenge with row identification in Datatables when rowId begins with a number

In compliance with the Datatables specifications, each row in my table can be assigned a unique ID: $('#myTable').DataTable( { ajax: '/api/staff', rowId: 'staffId' } ); However, it is mentioned in the same specificat ...

javascriptjquerydatatables

Is there a way to showcase my information on flash cards using JavaScript?

Currently, I am developing a full stack application that utilizes JavaScript on both the front and back end. This application allows users to create their own flashcards set. Upon clicking "View Cards," the data is fetched and the question-answer pair is d ...

javascripthtmlcssnode.jsasynchronous

Searching through AJAX callback results in PHP for directory files can be achieved by implementing a filtering or finding method

Seeking a way to display photos from a specific directory in a div grouping all portraits first, followed by squares, and then landscapes. The plan is to sort the results of a callback before aligning and styling them. do1.php if($_SERVER["REQUEST_METHOD ...

phpjqueryajax

Stingray Riverbed SteelApp, showcasing an image on a maintenance landing page

We have implemented a feature on riverbed stingray that displays a maintenance page whenever the system administrator needs to update the application. In order to achieve this, we designed a custom HTML page with a logo image and uploaded both the .html an ...

htmlstingray

Incorporating a new text tag

Is there a way to add a text label for every circle that can be rotated and have its color changed? I'm looking for a solution that doesn't involve JSON data, but instead retrieves the necessary information from somewhere else. var w = 3 ...

javascripthtmld3.js