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

React SlideMenu will not close when a link is clicked

Get the value of a CSS property in Python by parsing the rendered HTML

How come the CSS for my angular ngx-mat-datetime-picker and mat-datepicker collide when they are both present on the same page?

Unable to host Express and React application on port 80

What is the functionality of this.$eval in Vue.js?

Set a restriction on the Bootstrap DatePicker to only show dates within a

Establishing a connection between the socket and the currently authenticated user through socket.io

Attempting to modify the audio tag's src attribute with JavaScript

Having a problem with file uploads in node.js using multer. The variables req.file and req.files are always coming

Creating input fields similar to the Mail app on OSX

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

Guide on implementing hover effects in React components

Having trouble sending data from AJAX to PHP

Calendar complete: ActiveRecord::RecordNotFound (Event with 'id' = update not found)

Adding several entries into mysql with the assistance of php

Struggling to achieve proper alignment for a series of div tags

Issue encountered: Trying to deploy firebase functions and hosting with vue-cli v3 and node.js leads to an error "No npm package found in functions source directory

The illumination in three.js failed to display properly when viewed on Chrome through an Apache server

Is it possible to center content with Bootstrap?

Running into difficulties while attempting to sort through an object utilizing an array