We Keep Coding

keep a div active after selecting it using ajax jquery

I am using ajax to to show data from data base.
Basically it's a chat app, and when user clicks on certain conversation it appends the data to a view.
My conversation div is:
<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">
Teresa Fox
</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>
and a demo CSS for this div is:
.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);
}
Now I want to make the selected div active. How can this be done?
Regards
Saad

Important: It is not possible to set the :active pseudo-class of an element with JavaScript. An element becomes active when a user activates it (typically with a mouse click), and becomes inactive when the user de-activates it (typically by un-clicking the mouse).
To ensure that a div looks like it is active, you should first set a tabindex attribute on the div, making it focusable.
Ref: tabindex
Then, to mimic the active appearance, add a div:focus CSS rule that exactly matches the div:active rule.
Finally, simply create the fake "active" appearance by calling HTMLElement.focus().
Remove the fake "active" appearance by calling 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/>

Place content of a Div at the top

I want to create an input that holds an integer value. The input value will be increased by 1 if the caret-up button is clicked and decrease by 1 if the cater-down button is clicked.
My problem is the style of the down-caret is wrong. I would like to place the down-caret at the top of the blue rectangle.
Currently, the down-caret is at the bottom of the div. Below is an image of the currently output.
I tried several things like flex, absolute position, etc. But these are overlapping areas of the Red div and Blue div.
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}
/* style the qty div to display both input and buttons div in the same line*/
.qty {
width: 250px;
height: 50px;
}
/* add the wrapper div to easy styling the element*/
#remind_number_wrapper {
width: 230px;
float: left;
height: 100%;
}
/* adjust the height of the input to fit out the div parent, it easier to see*/
#remind_number_wrapper input {
width: 220px;
height: 100%;
}
/* style the buttons div to display input and caret in the same line*/
#buttons {
width: 20px;
height: 100%;
float: right;
display: block;
}
/* style the action button to fit the height of the div*/
.action_btn {
height: 25px;
}
#plus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid red;
cursor: pointer;
}
#minus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid blue;
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<!-- change the fas to fa for the right class of font-awesome -->
<i class="fa fa-caret-up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="fa fa-caret-down"></i>
</div>
</div>
</div>

Your description is somewhat unclear, if I understood you correctly, check out the example below to see whether it is what you want or not.
* {
box-sizing: border-box;
}
.qty {
position: relative;
}
.new {
position: absolute;
right: 0;
top: 0;
}
#plus_remind, #minus_remind {
margin: 0;
height: 24px;
width: 22px;
font: 33px/1 Arial,sans-serif;
cursor: pointer;
}
#plus_remind {
border: 1px solid blue;
}
#minus_remind {
border: 1px solid red;
}
input {
height: 48px;
font-size: 1.5rem;
margin: 0px;
padding: 0px;
line-height: 1.5rem;
width: 100%;
}
<div class="qty">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="25">
<div class="new">
<div onclick="document.getElementById('remind_number').value-=-1;" class="" id="plus_remind">
<i class="fas fa-caret-up"></i>
</div>
<div onclick="document.getElementById('remind_number').value-=1;" class="" id="minus_remind">
<i class="fas fa-caret-down"></i>
</div>
</div>

For number, there is another solution that uses the input with type number
<input type="number" placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number">
Another way, I remove usage of font-awesome and create triangle by pure CSS
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}
.qty {
width: 200px;
}
#remind_number_wrapper {
float: left;
}
i {
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
cursor: pointer;
}
.up {
border-bottom: 5px solid black;
margin-bottom: 0px;
}
.down {
border-top: 5px solid black;
margin-top: 0px;
}
<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<i class="up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="down"></i>
</div>
</div>
</div>

how to keep the style after click a button

I have 4 buttons and each button have a diferent style when it is pressed, but when I do click in other side I lost the style of the button.
.bar-serv {
padding: 12px 20px;
display: inline-block;
width: 90px;
text-align: center;
}
.bar-opt1:focus {
border-bottom: #7ebf10 solid 2px;
}
.bar-opt2:focus {
border-bottom: #1F589A solid 2px;
}
.bar-opt3:focus {
border-bottom: #73afe7 solid 2px;
}
.bar-opt4:focus {
border-bottom: #e73827 solid 2px;
}
<div id="chooseServ" class="block">
<div class="container">
<p class="p-20" style="display: inline;">options: </p>
<a onClick="method1" class="bar-serv bar-opt1 p_lr_20">option1</a>
<a onClick="method1" class="bar-serv bar-opt2 p_lr_20">option2</a>
<a onClick="method1" class="bar-serv bar-opt3 p_lr_20">option3</a>
<a onClick="method1" class="bar-serv bar-opt4 p_lr_20">option4</a>
</div>
</div>

You are using The :focus CSS pseudo-class that gets triggered when the user clicks or taps on an element. This is usually used on form fields
Try using the :active CSS pseudo-class instead that gets triggered when the user presses down the primary mouse button and ends when it is released.

Try this in CSS!
bar-opt1:hover{
background-color:red;
border:1px solid black;
}

Create Custom List Item HTML, Row With Spacing

I am currently working on a project and I want to display something similar to Apple's stocks app, how a single row has a name followed by a current number and then a +- indicator of how much the stock either went up or down from before. I really like this row design against a black background and think its easily readable, so that's why I want to do it. At the moment I am trying to create a single row of HTML combined with CSS that will give me this kind of look and feel, a custom list item if you will.
I have the positive\negative indicators made but cannot figure out how to space and include text to the left of this element within the same list item row. Ideally, the layout should be something like this:
STOCKNAME PREVTOTAL STOCKPOSORNEG
All of these fields should be in the same list item row. Since I've had some trouble with this approaching using the un-ordered list I could also explore a table option but wanted to see if there was a way it could possibly be done that way first. Below is what I was experimenting with via the TryIt Editor:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 7px;
background: #80ff80;
padding: 20px;
width: 90px;
height: 10px;
color: #FFF;
}
#makeLeft {
float: left;
}
#makeRight {
float: right;
}
#listitem {
list-style: none;
background-color: black;
border: .5px solid #efeff5;
padding: 1px;
}
</style>
</head>
<body>
<ul id="mylist">
<li id="listitem">
<p id="rcorners1">
<span id="makeLeft"><strong>+</strong></span>
<span id="makeRight"><strong>1234.00</strong></span>
</p>
</li>
</ul>
</body>
</html>

How does this work out for you?
I tried to get it as close to the original stocks app as possible. Some of the font sizes might be a bit off, but this is probably as good as you're going to get.
span{
font-family: arial;
font-size: 24px;
color: #fff;
}
.container{
width: 400px;
height: 200px;
background: #040404;
}
.row{
position: relative;
width: calc(100% - 20px);
height: 29px;
padding: 13px 10px 13px;
}
.row.highlighted{
background: #383838;
}
.name{
float: left;
}
.price{
display: inline-block;
margin-right: 3px;
}
.pn{
padding-right: 5px;
}
.pn-con{
position: absolute;
top: 10px;
right: 10px;
}
.main-pn{
display: inline-block;
height: 29px;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-radius: 5px;
background: #FD3C2F;
}
<div class="container">
<div class="row">
<span class="name">DOW J</span>
<div class="pn-con">
<span class="price">18,109.80</span>
<div class="main-pn">
<span class="pn">-</span>
<span class="val">53.19</span>
</div>
</div>
</div>
<div class="row highlighted">
<span class="name">MSFT</span>
<div class="pn-con">
<span class="price">47.58</span>
<div class="main-pn">
<span class="pn">-</span>
<span class="val">0.04</span>
</div>
</div>
</div>
</div>
Here's a working JsFiddle for it!
It's pretty customizable, all you need to do is copy & paste the rows, and alter the values within the spans!
Here's an image of the actual stocks app for reference!
Hope it helps! :-)

I need to change the color of the icon on text input focus

I would like to incorporate a form focus feature where it changes the
color of each icon when you focus on that specific field
<div id="rightside">
<div th:replace="fragments/loginform">
<form method="post" id="login" th:object="${credential}">
<p id="errors" class="warning" role="alert">
<span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
</p>
<p id="block">
<label for="username" class="has-feedback"><i class="fa fa-user" aria-hidden="true"></i></label>
<span th:if="${openIdLocalId}">
<strong>
<span th:utext="${openIdLocalId}"/>
</strong>
<input type="hidden"
id="username"
name="username"
th:value="${openIdLocalId}"/>
</span>
<span th:unless="${openIdLocalId}">
<input class="required textinput has-feedback"
placeholder="UH Username"
id="username"
size="14"
tabindex="1"
type="text"
th:field="*{username}"
th:accesskey="#{screen.welcome.label.netid.accesskey}"
autocomplete="off"
autocapitalize="off"
autocorrect="off"
required="required"
autofocus="autofocus"
/>
</span>
</p>
<p id="block">
<label for="password" class="fontawesome-lock"><i class="fa fa-lock" aria-hidden="true"></i></label>
<input class="required textinput"
placeholder="Password"
type="password"
id="password"
name="password"
size="14"
tabindex="2"
th:accesskey="#{screen.welcome.label.password.accesskey}"
th:field="*{password}"
autocomplete="off"
required="required"
/>
</p>
Here is the CSS
#rightside {
margin-top: 15px;
float: left;
width: 70%;
}
#rightside h3 {
font-size: 110%;
}
#rightside a {
display: block;
}
#rightside input.textinput {
width: 60%;
float: left;
padding-left: 5px;
height: 35px;
border-radius: 7px;
}
#rightside input.textinput:focus {
outline-width: 0;
}
#rightside form label {
background-color: #e1e1e1;
border-radius: 8px 0px 0px 8px;
border: solid 1px #CCC;
border-right: 1px solid #CCC;
color: #000;
display: block;
float: left;
line-height: 50px;
text-align: center;
font-size: 20px;
width: 15%;
height: 50px;
}
#rightside form input[type="text"] {
float: left;
background-color: #fff;
border-radius: 0px 8px 8px 0px;
color: #000;
padding: 0 3%;
width: 77%;
height: 50px;
}
#rightside form input[type="password"] {
float: left;
background-color: #fff;
border-radius: 0px 8px 8px 0px;
color: #000;
padding: 0 3%;
width: 77%;
height: 50px;
}
#rightside form input[type="submit"] {
float: left;
background: #e1e1e1;
width: 99%;
height: 50px;
border-radius: 5px;
border: solid 1px #978257;
margin-bottom: 1.5em;
color: black;
cursor: pointer;
transition: background 0.3s ease-in-out;
font-weight: 600;
}
#rightside form input[type="submit"]:hover {
background: #b6985a;
color: #fff;
}
When the user focuses on either text field, the font-awesome icon pertaining to that input field should change color. Any help would be great! Thanks! CSS only would be preferable, but a js would work too

I went ahead and made a codepen for you to show you the value of the following blog post:
https://css-tricks.com/snippets/jquery/highlight-related-label-when-input-in-focus/
Here's what it offers:
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
The above utilizes jQuery and it works well as a conceptual example.
http://codepen.io/MassDebates/pen/ZBaVJL
If you wanted to do something that leverages CSS's :focus then I would suggest you change your markup to allow something like a sibling (~), adjacent/following sibling (+) or even a descendant selector if you wrap your input in the label.
The key here is to associate your label's icon (<i>) with your input element.

You can play with :focus and :blur pseudo-classes
$(document).ready(function(){
$(".username").focus(function(){
$(".fa-user").css("color","red");
console.log("in");
}).blur(function() {
$(".fa-user").css("color","yellow");
console.log('out');
});
$(".password").focus(function(){
$(".fa-lock").css("color","red");
console.log("in");
}).blur(function() {
$(".fa-lock").css("color","yellow");
console.log('out');
});
});
https://jsfiddle.net/czs3sy0a/2/

I have created a pen that sets a highlighted class on the parent p, and colors the icon using this CSS:
p.highlighted .fa {color: red;}
And this JS:
$(function() {
$('input').focusin(function() {
$(this).parent().parent().addClass('highlighted');
});
$('input').focusout(function() {
$(this).parent().parent().removeClass('highlighted');
});
});
http://codepen.io/anon/pen/pNdqYP

Here is a pure css solution you can use. As we know we dont have any way to select parent element along with css but we can get the next sibling element with the '+' selector. So what i have done is placed the label containing the icon right after the input that will change it's color when focused using the css :focus pseudo element along with the '+' selector of css to get the icon in the label next to the input focused.
In order to set the positions correctly after moving the labels in front of the inputs. I changed the input and label css class from float:left to float:right. This aligned them where label came before input and the width percentage i changed from 77% to 75% just to keep the responsiveness correct on smaller screens. Below is the sample code.
Sample Code: http://codepen.io/Nasir_T/pen/VmrgWw
Hope this helps you and any future coders who do not want work with a JS code solution.