I’m having trouble understanding whats going on with a grid I created. I made some code for a grid via javascript that changes the cell color when the mousepointer passes over it, however whenever I view this grid in a fullscreen window the view of the grid changes to four separate columns. This only happens when I look at the
Tag: css
How to make content delay using CSS and Jquery
I am attempting to create a page where the content on the screen appears 3 seconds after the page loads. By the other posts I have seen on this website, I attempted the scripting below, though with no success (Everything appears at the same time). First is the section I am attempting to delay, then is the whole pages script.
Solved – Vue dynamically add style to :active pseudo class
HIGHLIGHT: This is a solved problem. Edit: Solved the problem using @Amaarockz’s advice! I haven’t had much experience in CSS variables & complicated :style structures, but turned out they’re great! Original question: I have a menu built with Vue.js (and Vuetify), data passed in from the backend like: Menu looks like: Problem I want to know, how can I dynamically
How to Fade In and Insert Element then Fade Out and Remove Element?
Description I have a <button> that, when clicked once, sets the class of a <div> element to “fade-in” and inserts the <div> element in the DOM. This visually fades in the <div> element after insertion into the DOM. When the button is clicked again, the button sets the class of the <div> element to “fade-out”, waits with setTimeout(), and removes
cant change the backgroud after updating the hook
i have a hook that holds number (as index) and array of images: i made two buttons that hold onClick event that should change the background to another image (by index): and the functions: by this the hook (currentIndex) should change and display the next image but its not working. what am i missing? this is the style for the
Why is window.innerWidth smaller than screen.width even in full screen?
When my browser window is in full screen mode, the inner width of the window still seems to be smaller than my screen width. I am confused because (based on this thread) I thought that, if my inner window took up my entire screen, then it would have the same dimensions as my screen. Instead, I receive the following values
How to add CSS after click through javascript and remove it if not clicked
I have encountered a problem with javascript clicking to change CSS! I hope that the outer frame and text of the clicked option can be thickened after clicking, but the ones that are not selected should not be thickened! I have tried several ways of writing, but I still don’t know how To complete this requirement, I hope to get
How to switch component showing with React and CSS?
I have a composed page with multiple components. Like the picture, I want to show Component B inside Component A. By default, when clicking on A, hide B and show C in the middle. After clicking again, it toggles to show B and hide C. When C has been showing, also change the A’s border color. I tried to use
Js .classList.add() is not working properly
I’m in a procces of creaing simple movie site. cruntly working there home page. in the home page there is a carosol. in CSS I hidden the visibility of all slide. what I’m going do is in JS creat a array for all silds and switch between silds when I clicked the arrow icon. as a first stem I want
After clicking button, alert is not showing up
I am doing a project on paper-rock-scissor that has UI. So, I have four buttons, Start game, rock, paper and scissor. I want if I click on the Start game button, an alert (“Please choose rock, paper, or scissor”) will pop-up. Right now if I click on the Start game. There’s nothing happening. I have no idea why? Below are