Ensure that a div remains active even after it has been selected through AJAX using jQuery

Question

Ensure that a div remains active even after it has been selected through AJAX using jQuery

I am currently utilizing ajax to display information from a database. The application I am working on is a chat app, where clicking on a specific conversation will append the data to a view.

The structure of my conversation div is as follows:

<div class="kt-widget__item">
  <span class="kt-media kt-media--circle">
      <img src="{{ asset('media/users/100_4.jpg') }}" alt="image">
  </span>
  <div class="kt-widget__info">
    <div class="kt-widget__section">
      <a href="#" class="kt-widget__username">Teresa Fox</a>
    </div>
    <span class="kt-widget__desc">
      PR Executive
    </span>
  </div>
  <div class="kt-widget__action">
    <span class="kt-widget__date">4 Days</span>
  </div>
</div>

Additionally, here is a demo CSS for this particular div:

   .kt-widget__item {
        cursor: pointer;
        background: darkgrey;
        border-radius: 8px;
        font-size: 15px;
        color: black;
        height: 100px;
        width: 100%;a
        display: flex;
        align-items: center;
}
    .kt-widget__item:hover {
        cursor: pointer;
        border-radius: 10px;
        border: 1px solid darkgrey;
        background:  rgb(187, 184, 184);
        font-size: 15px;
        color: black;
        height: 100px;
        width: 100%;
        margin: auto;
}
    .kt-widget__item:active {
        border-radius: 10px;
        border: 1px solid rgb(156, 155, 155);
        background: rgb(156, 155, 155);
        
}

My current goal is to highlight and make the selected div active when clicked. What would be the best approach to achieve this?

Best Regards Saad

javascript html css

Answer 1

Answer №1

Key Note: Javascript cannot change the :active pseudo-class of an element. The active state is triggered by user interaction, such as a mouse click.

To give the impression that a div is active, you can assign it a tabindex attribute to make it focusable.

For more information: tabindex

Next, create a CSS rule for div:focus that matches the appearance of div:active.

Toggle the "active" look using HTMLElement.focus() and remove it with HTMLElement.blur().

Example:

const fdiv = document.getElementById('focusable');
const btn = document.getElementById("addfocus");
btn.onclick = function() {
  fdiv.focus();
};
const btn2 = document.getElementById("removefocus");
btn2.onclick = function() {
  fdiv.blur();
};

div {
  border: 1px solid black;
  background-color: #ccc;
  width: 50%;
  height: 30px;
  margin: 12px 0;
}

div:active,
div:focus {
  background-color: dodgerblue;
  outline: none;
}

<div id="not-focusable">I'm clickable but not focusable, click me</div>
<div id="focusable" tabindex="0">I'm focusable, click me</div>
<button id="addfocus">Focus the div</button>
<button id="removefocus">Blur the div</button><br/>

Answer 2

Key Note: Javascript cannot change the :active pseudo-class of an element. The active state is triggered by user interaction, such as a mouse click.

To give the impression that a div is active, you can assign it a tabindex attribute to make it focusable.

For more information: tabindex

Next, create a CSS rule for div:focus that matches the appearance of div:active.

Toggle the "active" look using HTMLElement.focus() and remove it with HTMLElement.blur().

Example:

const fdiv = document.getElementById('focusable');
const btn = document.getElementById("addfocus");
btn.onclick = function() {
  fdiv.focus();
};
const btn2 = document.getElementById("removefocus");
btn2.onclick = function() {
  fdiv.blur();
};

div {
  border: 1px solid black;
  background-color: #ccc;
  width: 50%;
  height: 30px;
  margin: 12px 0;
}

div:active,
div:focus {
  background-color: dodgerblue;
  outline: none;
}

<div id="not-focusable">I'm clickable but not focusable, click me</div>
<div id="focusable" tabindex="0">I'm focusable, click me</div>
<button id="addfocus">Focus the div</button>
<button id="removefocus">Blur the div</button><br/>

Ensure that a div remains active even after it has been selected through AJAX using jQuery

Answer №1

Similar questions

Continuously transmitting PNG files to a server. I intend to instruct the receiving browser to automatically refresh at set intervals

The process of initializing the Angular "Hello World" app

Encountering issues with integrating interactjs 1.7.2 into Angular 8 renderings

What is the most elegant way to retrieve a new item from Firebase and read it?

Python Selenium - The Select method can only be used with <select> tags, not <div> tags

Guide on merging the root route with child routes using react router v6

In React Js, the state is being updated correctly when console logging, however, the user interface is not reflecting

Column-oriented and Slim-fit packaging

Is there a way to extract an ID from a URL using PHP?

Exploring the data-* attribute in jQuery

Exploring the process of web scraping from dynamic websites using C#

Using the not operator in Selenium IDE XPath for waitForElementNotPresent seems to be ineffective

Tips on transitioning from Modal1 to Modal2 in Ionic after a successful submit button press?

Set up an array data by extracting values from an array prop within a Vue component

Updating the text of an element will occur only when the specified condition has been met

The peculiar effect of a CSS element's border on surrounding elements is quite unusual

React 18 doesn't trigger component re-rendering with redux

Increasing an element in an array of objects using MongoDB and Mongoose

Issues with jQuery autocomplete functionality on certain elements are not uncommon

Filtering dynamically generated table rows using Jquery