We Keep Coding

Change text by pressing to it

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>

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/>

ton>Hover over an <a> tag to change a button color inside the <a> tag

My webpage is constructed as:
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor"></button>
</div>
</div>
</div>
</a>
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor"></button>
</div>
</div>
</div>
</a>
I want to be able to change the color of the button inside the particular <a> </a> that's being hovered over. How should I write the javascript to do it? Thanks so much for the help!

First at all, you only need a button to fire an JS onclick event. In every other case you use a div to style a "button". Also a button is not an empty tag and therefor needs a closing tag <button>Text</button>
Just like this:
a {
text-decoration: none;
color: black;
}
a div {
border: 1px solid black;
width: min-content;
white-space: nowrap;
padding: 5px;
}
<div>I'm a Link-Button</div>
to change the color during hover, you dont need JS. You can simply use the :hover pseudo selector like this:
a {
text-decoration: none;
color: black;
}
a div {
border: 1px solid black;
width: min-content;
white-space: nowrap;
padding: 5px;
}
a:hover div {
background-color: red;
}
<div>I'm a Link-Button</div>
As you insist on using your invalid HTML and seem not to understand the use of :hover the same for your code:
.hoverMe:hover .changeColor {
background-color: red;
}
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor">Button 1</button>
</div>
</div>
</div>
</a>
<a class="hoverMe" href="">
<div class="somediv1">
<div class="somediv2">
<div class="somediv3">
<button class="changeColor">Button 2</button>
</div>
</div>
</div>
</a>

This is a pretty basic question checking docs usually can help you. Check this out
The use of :hover pseudo selector will help you achieve what you want. In our example we see the a:hover action which enables the hover color change.
a:hover {
background-color: yellow;
}
a {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}
w3schools.com
wikipedia.org
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>

onclick event inside a button

I have this HTML structure:
<button onclick="console.log('blih');">
<div style="padding:20px; border: 1px solid black" onclick="console.log('blah');">Test</div>
Test 2
</button>
This always only fires the button onclick when clicked, even inside the "Test" zone. How can I get it to fire the div's onclick ?
I have the problem on Firefox, this works fine on Chrome and Safari.
JSFiddle: https://jsfiddle.net/ovr0w9w4/

That won't work consistently, because it's not valid to have a <div> in a <button>.
You can fake a button though.
.btn {
border: 1px solid black;
border-radius: 2px;
display:inline-block;
padding: 0.2em;
background-color: #dddddd;
}
.btn:active {
background-color: #aaaaaa;
}
.btn > div {
padding:20px;
border: 1px solid black;
}
<div class="btn" onclick="console.log('blih');">
<div onclick="console.log('blah');">Test</div>
Test 2
</div>

Instead of invalid html you could simply use Bootstrap and add btn class to your first <div>.
<div id="div1" class="btn btn-default">
<div id="div2">
</div>
</div>
See example: https://jsfiddle.net/ddan/co5sm0d6/

Can I make a short cut for a button?

I have links on my web page that are called like this:
<a href="/xxx/" >
<button >xxx</button>
</a>
I have several like this and I would like to make it easy for a user to click them without the user having to go to the button and click. Is it possible for me to give the user a shortcut such as ALT M or something like that assigned to a button? Also can I make a button be the default if the user clicks enter?

You should use the accesskey property
<a href="/xxx/" >
<button accesskey="M" >xxx</button>
</a>

Give the element an "accesskey" using accesskey="1". When a user presses 1 that will activate the link.
EDIT
For a javascript (jQuery) solution see this SO post

I would recommend styling a div to look like a button as they do for the tags here on stackoverflow.com as an example
<div class="post-taglist">
<a class="post-tag" rel="tag" title="" href="/questions/tagged/javascript">javascript</a>
<a class="post-tag" rel="tag" title="" href="/questions/tagged/html">html</a>
<a class="post-tag" rel="tag" title="" href="/questions/tagged/css">css</a>
</div>
CSS used by stackoverflow.com (needs a bit of work!)
.post-taglist {
clear: both;
margin-bottom: 10px;
}
.edit-tags-wrapper > a.post-tag {
margin-right: 6px;
}
.post-tag, .post-text .post-tag, #wmd-preview a.post-tag {
background-color: #E0EAF1;
border-bottom: 1px solid #3E6D8E;
border-right: 1px solid #7F9FB6;
color: #3E6D8E;
font-size: 90%;
line-height: 2.4;
margin: 2px 2px 2px 0;
padding: 3px 4px;
text-decoration: none;
white-space: nowrap;
}
post-tag:hover, .post-text .post-tag:hover, #wmd-preview a.post-tag:hover {
background-color: #3E6D8E;
border-bottom: 1px solid #37607D;
border-right: 1px solid #37607D;
color: #E0EAF1;
text-decoration: none;
}
Alternatively you can wrap your button in a form element like
<form method="post" action="nextPage.html" >
<button>Press me</button>
</form>