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/>
Related
I have the firstname, lastname and a pencil icon beside them on my web page. I need to press to pencil and can change text to another one. Please assist to solve this problem
Here is html
<a class="nav-link left-panel-txt" id="left-panel-txt" href="/profile">
<div class="sb-nav-link-icon"></div>
<span class="dashboard">Firstname Lastname</span><img src="/static/img/pencil.svg" style="width: 5%; height: 5%; margin-left: 10px;">
</a>
Thank you.
This is a demo of what you asked.
There's a label displaying static text Firstname Lastname and when you click on the pencil next to it, you have the opportunity to edit that value until you click again the pencil and the value becomes read only.
I slightly changed your html and added jQuery (since you listed it in your question tags) and Fontawesome to add an icon of a pencil (since otherwise your pencil image wasn't available).
function onToggleClick(event){
if ( $(event.target).hasClass('editing') ){
$(event.target).removeClass('editing');
$(event.target).prev('.dashboard').removeClass('editing');
$('.dashboard').attr('contenteditable', false);
}
else{
$(event.target).addClass('editing');
$(event.target).prev('.dashboard').addClass('editing');
$('.dashboard').attr('contenteditable', true);
}
}
$(document).ready(()=>{
$('.edit_toggle').click(onToggleClick);
});
.dashboard{
display: inline-block;
border: solid 1px lightgray;
padding: 2px 5px;
}
.dashboard.editing{
border: solid 1px black;
}
.edit_toggle i{
pointer-events: none;
}
.edit_toggle{
display: inline-block;
width: 5%;
height: 5%;
margin-left: 10px;
border: solid 1px lightgray;
text-align: center;
padding: 2px 2px;
cursor: pointer;
}
.edit_toggle.editing{
background: lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dashboard">Firstname Lastname</div>
<div class="edit_toggle">
<i class="fa-solid fa-pencil"></i>
</div>
I have multiple list items. I want active blue border on clicked or selected item. I am creating a image card layouts. It will active while selecting. It will be a single item selection.
Here is the below code
template code
<div class="container">
<div
v-for="(obj, index) in layoutDatas"
:key="index"
class="item"
#click="getLayoutDetails(obj)"
>
<cmp-image-viewer
ref="index"
:style="'width: 250px; height:150px;'"
/>
<div class="column">
<div class="text1">
{{ obj.layoutId }}
</div>
<div class="row">
<div class="col-xs-9 text2 noBorder">
{{ obj.layoutTitle }}
</div>
</div>
</div>
</div>
</div>
style css code
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: auto;
height: 450px;
border-radius: 3px;
margin-top: 50px;
padding: 10px;
}
.item {
width: 250px;
height: 220px;
border: 0.3px solid #eaeaea;
align-self: center;
padding: 5px;
border-radius: 3px;
margin: 10px 10px;
transition: all .15s ease-in-out;
}
.item:hover {
border: 0.3px solid #0071c5;
transform: scale(1.1);
}
.itemClick {
border: 1px solid #0071c5;
}
.text1 {
font-weight: bold;
padding-left: 10px;
font-size: 16px;
}
.text2 {
color: #959595;
}
How to do the active border on selected item or clicked item using css and vue?
If I understand you correctly, you will only have a single card that is displaying a blue border when clicked. You can track which card is clicked by assigning it to a data property. For instance, the function #getLayoutDetails might include a method to set this.selectedObject = obj, the object you've passed in.
Then, you can use that data value to set a CSS class on the selected object. That would look something like:
<div
v-for="(obj, index) in layoutDatas"
:key="index"
class="item"
:class="obj.id === selected.id ? 'active' : 'not-active'"
#click="getLayoutDetails(obj)"
>
And use the active tag in your css:
.active {
border: 1px solid #0071c5;
}
I use CSS to show and hide tooltips when I hover over them. Now I need this to work for mobile devices with a click function. I got the first tooltip running through toggling a class via Javascript. How can I apply that function for all tooltips now? I have around 30 to 40. Any idea how I can achieve my goal?
document.getElementById("website-tooltip-container").addEventListener("click", function() {
var element = document.getElementById("test");
element.classList.toggle("website-tooltiptext-visible");
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
Thanks for your help!
use an extra class.
add this to your css:
.website-tooltiptext-visible {
visibility: visible !important;
}
and replace this class inside your js code:
element.classList.toggle("website-tooltiptext-visible");
PS: NEVER use same id for multiple HTML elements. like ever!
EDIT: use below javascript code to select by class
Array.from(document.getElementsByClassName("website-tooltiptext")).forEach(
(element) => {
element.addEventListener("click", () => {
element.classList.toggle("website-tooltiptext-visible");
});
}
);
I have an add and remove button which selects the complete div and adds a green color to the div. The function only works on the "add this extra" and "remove" button. How do I make it work like clicking anywhere on the div instead of the particular button itself?
I would look to hear someone help from you guys.
Regards,
Bilal
$('.btn_extras').addClass('force-hide');
$('.btn-rmv-item').hide();
// Add btn onClick
$('.btn-add-item').on('click', function(e) {
e.preventDefault();
// Show the Adjacent Remove Button
$(e.currentTarget).next("button.btn-rmv-item").show();
// Apply THE DIV class to SELECTED
$(e.currentTarget).closest("div.card-border").addClass('card-bg');
// Show THE btn_extra button
showHideContinueBtn();
// Hide the Button
$(e.currentTarget).hide();
});
// Remove btn onClick
$('.btn-rmv-item').on('click', function(e) {
e.preventDefault();
// Show the Adjacent Remove Button
$(e.currentTarget).prev("button.btn-add-item").show();
// Apply THE DIV class to SELECTED
$(e.currentTarget).closest("div.card-border").removeClass('card-bg');
// Show THE btn_extra button
showHideContinueBtn();
// Hide the Button
$(e.currentTarget).hide();
});
// function to Show/Hide Continue Button w.r.t SELECTIONS
function showHideContinueBtn() {
$('.btn_extras').addClass('force-hide').removeClass('force-block');
$('.btn_skip').removeClass('force-hide').addClass('force-block');
$('div.card').each(function(index) {
if($(this).hasClass('card-bg')) {
$('.btn_extras').removeClass('force-hide').addClass('force-block');
$('.btn_skip').removeClass('force-block').addClass('force-hide');
}
});
}
.card-border {
border: 1px solid #c7c7c7;
border-radius: .25rem;
padding: 15px 18px 10px 18px;
margin-bottom: 30px;
}
div.ho-border:hover {
border: 1px solid #59d389;
}
.upsell-pricing {
float: right;
font-size: 18px;
font-weight: 600;
}
.upsell-text {
font-size: 15px;
margin-top: 10px;
color: #333333;
}
.btn-add-item {
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 10px 3px 10px;
margin-left: 20px;
margin-top: 1px;
color: #c7c7c7;
opacity: 0.65;
}
.btn-add-item:focus {
outline: none;
box-shadow: none;
}
.btn-rmv-item {
background-color: transparent;
color: #59d389;
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 8px 3px 8px;
margin-left: 20px;
margin-top: 1px;
}
.btn-rmv-item:focus {
outline: none;
box-shadow: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button class="btn btn-add-item">Add this extra</button>
<button class="btn btn-rmv-item">Remove</button>
</div>
<div class="clearfix"></div>
</div>
You can have the click handler directly on the div (I assume it is .card-border here).
And you need only one button which you toggle the classes and change the text.
I added a .card-bg CSS rule that seemed to be missing in the question...
I also added type="button" to prevent form submission if the button is clicked.
Have a look at the comments in the code below. It replaces the two click handlers you had... And the showHideContinueBtn() function.
$(".card-border").on("click",function(){
// Toggle the div background color
$(this).toggleClass("card-bg");
// Find the button
var btn = $(this).find(".btn");
// Toggle classes for ONE button
btn.toggleClass('btn-add-item btn-rmv-item');
// Depending on a button's class, change it's text
(btn.hasClass("btn-rmv-item"))?btn.text("Remove"):btn.text("Add this extra");
});
.card-border {
border: 1px solid #c7c7c7;
border-radius: .25rem;
padding: 15px 18px 10px 18px;
margin-bottom: 30px;
}
div.ho-border:hover {
border: 1px solid #59d389;
}
.upsell-pricing {
float: right;
font-size: 18px;
font-weight: 600;
}
.upsell-text {
font-size: 15px;
margin-top: 10px;
color: #333333;
}
.btn-add-item {
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 10px 3px 10px;
margin-left: 20px;
margin-top: 1px;
color: #c7c7c7;
opacity: 0.65;
}
.btn-add-item:focus {
outline: none;
box-shadow: none;
}
.btn-rmv-item {
background-color: transparent;
color: #59d389;
font-weight: 600;
letter-spacing: -0.02px;
text-transform: none;
padding: 3px 8px 3px 8px;
margin-left: 20px;
margin-top: 1px;
}
.btn-rmv-item:focus {
outline: none;
box-shadow: none;
}
/* This class was not posted in question... So I improvised one */
.card-bg{
background-color:#44bb44;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
<h4 class="float-left">Fuel replacement</h4>
<div class="upsell-pricing">£49/trip</div>
<div class="clearfix"></div>
<div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
<div class="mt-3 float-right">
<button type="button" class="btn btn-add-item">Add this extra</button>
<!--button class="btn btn-rmv-item">Remove</button-->
</div>
<div class="clearfix"></div>
</div>
Change
$('.btn-add-item').on('click', function(e) {
to
$(e.currentTarget).closest("div.card-border").on('click', function(e) {
If you want a toggle functionality, also add a variable that holds the crt state:
var state="default";
...on('click',function(){
if(state=='default'){
state='checked';
....
} else {
state='default';
....
}
});
If I understood you question right then this is answer you are looking for.
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()" style="width:200px; height:100px; border: 1px solid black;">
This Div's background color will change.
</p>
<script>
var color=0;
function myFunction() {
// Just Specify The Id you need
var myDiv = document.getElementById("demo");
if(color == 0)
{
myDiv.style.backgroundColor = "red"; color=1;
}
else
{
myDiv.style.backgroundColor = "white"; color=0;
}
}
</script>
</body>
</html>
Hope This Solves the Issue.
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;
}