Stack Overflow | css
1,000 FOLLOWERS
Stack Overflow is the largest, most trusted online community for developers to learn, share their programming knowledge and build their career.
Stack Overflow | css
2h ago
$(document).keydown(function(event){ $("h1").innerHTML = event.key })
Expected that the h1 text gets changed to the key pressed but there's no change. I know the correct solution is $("h1").text(event.key) .
But still why is the above one wrong??
Calling the jQuery function with a selector returns a "jQuery object" that holds the elements selected by the selector in an array. It then has methods to replace equivalent DOM methods, plus more methods to set or return element properties (or sometimes attributes).
I found this in an old post but I didn't understand it. Please help so that's it's cl ..read more
Stack Overflow | css
2h ago
Please first note that this isn't my code so I don't know what the author was doing with it. Some messages were added at the bottom of the div class container to tell the status of the battery. Then the author used CSS to make the messages show up at different times. (when the battery was at certain percentages) like when the battery was full, a message written in #3ff511 that said "Battery fully charged" would show up. 15% to 5% as "Low Battery" and 5% to 0% displays "Battery Critically Low". But none of them show up. Maybe you can't have more than 2 greater than signs in a selector in CSS?
C ..read more
Stack Overflow | css
2h ago
I have the following snippet:
//Skills Animation On View
document.addEventListener("DOMContentLoaded", function(event) {
function callback(observations, observer) {
observations.forEach(observation => {
if (observation.isIntersecting) { //IF IT'S IN VIEW
observation.target.classList.add('animated');
observation.target.classList.add('animated1');
} else {
observation.target.classList.remove('animated');
observation.target.classList.remove('animated1');
}
});
}
// CREATE AN INTERSECTION OBSERVER
let options = {
root: nu ..read more
Stack Overflow | css
2h ago
I'm learning css positioning and I have a rotated image that goes behind another section on desktop size, but I want to make it take up the whole screen and straighten when the viewport becomes tablet size and mobile.
The problem is, at the breakpoint of 1020px, the photo only straightens but stays in the same line and just becomes smaller. It only takes up its own line when it reaches the mobile breakpoint.
How can I fix this?
This is the code I used to try and get this result:
@media screen and (max-width: 1020px){
.title-img{
width: 60% !important;
position:static !important ..read more
Stack Overflow | css
2h ago
I am a student who is still in school and new to coding and programming. I have recently worked on building the Tic Tac Toe gameboard using HTML, JS, and CSS. I am intrigued and want to know how I can implement an AI opponent in my Tic Tac toe gameboard. I watched some tutorial videos and got some codes from there. However, only the gameboard appears.
Here are the codes I used:
HTML Code
`<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<link href="style.css">
</head>
<body>
<h1>Tic Tac Toe</h1>
<div id="board"> ..read more
Stack Overflow | css
2h ago
I fade in the body of my website, and every once in a while, when I load my website, the animation gets stuck with the opacity somewhere between 0 and 1, and it sucks. I have no idea where this is coming from and can't reproduce it predictably. Is there anything I can do?
Maybe a workaround for now? Short of telling the user to refresh.
As a clue: If it's stuck with low opacity as stated, if I open the developer tools, that fixes it. Is there a repaint that happens perhaps?
I really am clueless on how to fix this. Help very much appreciated.
Here's the animation code (in stylus):
.fadeone
a ..read more
Stack Overflow | css
2h ago
I'm trying to create a table with a sticky header and left column that will allow for both horizontal and vertical scrolling. Additionally, I need to ensure that the 4th row remains fixed horizontally in place, meaning that while the table is scrolled horizontally, that row should always maintain its position.
I have managed to make the table header fixed and the left column fixed as required, but I am unable to make the row with the fixed-cell class stay in place. Is there a pure CSS solution for this? If not how would I go about doing this in JavaScript.
https://codepen.io/khalid-mohamed/pen ..read more
Stack Overflow | css
2h ago
My CSS is not getting applied to my any of new divs that I add even after using !important or /deep/ and checking syntax and class name 10 times still no result I guess its some problem that I have no idea
function isvalid() {
var user = document.form.user.value;
var pass = document.form.pass.value;
if (user.length == "" && pass.length == "") {
alert(" Username and password field is empty");
return false;
} else if (user.length == "") {
alert(" Username field is empty");
return false;
} else if (pass.length == "") {
alert(" Password field is empty ..read more
Stack Overflow | css
2h ago
Is there any way to change the font-family of the prompt-text in a AMP Web Stories quiz? I tried so many things in CSS and it does work... I could make it with colors and other atributtes, but not this...
Screenshot of the quiz part where I want to change the font to match our style guide
And I took most of the code here.
This is the HTML file. How will you try it just with CSS?
<!-- Slide 3 question-->
<amp-story-page id="page3">
<amp-story-grid-layer template="fill">
<amp-img
layout="fixed" width="1600" height="1200 ..read more
Stack Overflow | css
2h ago
I need two divs to be at the top of body and one div (blue one) at the bottom of body. All of them must be centered horizontally. I need to do it using grid. What am I doing wrong? Please help.
body {
display: grid;
height: 500px;
align-content: start;
justify-content: center;
background: gray;
}
div {
width: 50px;
height: 50px;
background: red;
}
div:nth-of-type(3) {
align-self: end;
background: blue;
}
<div></div>
<div></div>
<div></div> ..read more