I want to add :active pseudo state/class when I click an element.
<p>Hello</p>
<script>
$('p').click(
function(){
// Here i want to add the active effect manually.
$("div").active();
}
);
</script>
I want to add :active pseudo state/class when I click an element.
<p>Hello</p>
<script>
$('p').click(
function(){
// Here i want to add the active effect manually.
$("div").active();
}
);
</script>
@camperextraordinaire
When i click a div it active so its background color change when it gets active. Now i want to add the same effect when i press a key on the keyboard.
Thatâs not how pseudo classes work. Use .addClass(âactiveâ); on div. In said class add styling you wish âŚ
@codename11
.addClass(âactiveâ) canât solve my problem.
It can change background-color on first time only;
.removeClass('active')
. The active pseudo classes is not for adding/removing via JS
Edit: I edited instead of replying and just wiped this reply out.
You canât really manipulate pseudo classes using JS, thatâs not the.point of them.
For that use setTimeout() with callback.
Add/remove an actual class if you want to use JS or use CSS animation on the :active pseudo class. In this case it sounds like itâs putrely styling so use CSS animation, you shouldnât need JS for that at all
Youâre forgetting the point " i want to active an element (div) when a button is press"
Then yes, you need to use JS. There are ways to do it with CSS but theyâre hacky, itâs very simple to with JS: listen for click then either change class on the div or literally change the background color
Now youâre understanding my situation. But not completely I need to active that element for just 1s
I first recommend simplifying your $(âbodyâ).keypress to the following:
$("body").keypress(event => {
let ch = String.fromCharCode(event.charCode).toUpperCase();
$('#' + ch).click();
});
You notice instead of executing the run function, I simply âclickâ the applicable div.
Next, you can change your pseudo-class selector to a normal class named drum-pad-active
.drum-pad-active{
animation-name: chCol;
animation-duration: 0.1s;
position: relative; top: 3px;
}
An then inside your run function, use setTimeout like:
function run(a, x) {
$(box[x]).addClass('drum-pad-active')
setTimeout(() => $(box[x]).removeClass('drum-pad-active'), 100);
$("#beats").text(str[x]);
a.play();
}
Note the 100ms delay so that your animation finishes properly.
No, I understood, 10sec, or 500ms, or 10min itâs exactly the same, do something for time, just what @camperextraordinaire said
keydown / keyupâŚ
My Similar code that you can be inspired byâŚ
$(document).bind('keydown', function(e) {
$(this).bind('keydown', function(e) {
if(e.keyCode == 13)
alert('testing');
//console.log(e.keyCode)
key = e.keyCode;
value = String.fromCharCode((96 <= key && key <= 105)? key-48 : key)
if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105))
{
// 0-9 only
//console.log(value);
$('#key_'+value).addClass('active').click();
}
}).keyup(function(e){
$('#key_'+value+'').removeClass('active');
})
})