Category "css"

Pop up on hover <area> tag, HTML

I'm mapping some coordinates on an image map and I want to display a pop-up message, containing a description and an image on hover, but I can't figure out how

Moving Slide Buttons in Bootstrap Carousel not Working

I'm trying to vertically center the buttons for my bootstrap carousel using react. using inline styling I was able to change the height of the button itself, bu

Trust badges html css and script

I am trying to do custom badges on my store. I want to have 4 objects with info like "fast shipping". When clicking on one of them, a small descriptive text wil

Search bar won't stay at top with CSS position: sticky property

I am trying to make a search bar stay at the top of a div with position: sticky but the property doesnt seem to work. Googling it, I see that overflow: hidden a

How can I get the iOS Safari address bar to minimize on scroll with a flexbox sticky footer in a container?

I have a typical flexbox sticky footer solution that looks something like this: <body> <div class="wrapper"> <div class="header">P

Browser address bar displays #[object%20Object] when clicking the menubar

I found that if I click one of the sections in menubar, the browser address bar displays #[object%20Object]. But it didn't influence scroll-to-section. Partial

Is there a way to having loading animation show until the page is fully loaded?

I have deployed my website on netlify but, the website displays only HTML until it finishes loading... Any tips on a way to make the website only show once it h

Change header background colour when page scrolls on sticky header

i have a sticky transparent header using the following css code on my website www.obviagency.com CSS CODE: #site-header-inner { height:0px; z-index:170; margin

Video autoplay (HTML/CSS) not always working on phone, but sometimes it is

I'm trying to create a simple website and want to just have some videos autoplay. Now I'm aware there are some changes that make this a little bit harder than i

Dropdown menu remain open after click and refresh

I have a problem on how to make my dropdown remain open after clicking and avoid closing after refresh. Here's what I've done. <button class="dropdown_btn"&g

Front End First Timer: How do I modify Javascript to accomadate multiple image slides within multiple slides?

I have 0 experience in front end, but going for it anyway. I currently have this Javascript: <script> function openCity(evt, cityName) { //

Getting image from input file and then add it as a background to a div

I am making a whack the mole game with Vanilla JS and I am trying to make the person whack whatever he wants by letting them upload an image by input file but

Highlight corresponding table <TD> cell based on row name and cell value

How would I go about highlighting a cell based on the row name and column value from the first column? I have included a fiddle. $('tr').each(function() {

How to apply classes to dynamically generated content?

In tailwind, there is a feature (which I find very annoying at times) called preflight that turns most of the HTML elements to appear like normal text. And the

How to scale TextArea content in JavaFx?

I try to wite a Windows notepad applicatino with javafx. In windows notepad, you can scale the text edit area, not to increase or decrease the font size. I trye

How to scale TextArea content in JavaFx?

I try to wite a Windows notepad applicatino with javafx. In windows notepad, you can scale the text edit area, not to increase or decrease the font size. I trye

Not able to move the button to the right of the page and the text to the center of the page

Not able to move the button to the right of the page and the text to the center of the page even though I have added the necessary CSS ( float right etc.,)

Not able to move the button to the right of the page and the text to the center of the page

Not able to move the button to the right of the page and the text to the center of the page even though I have added the necessary CSS ( float right etc.,)

How to create a vertical line on top of the text when it is active?

I want my active element to have a vertical line on top of it and I was given a hint to use either :before or :after in CSS to make this line. However, I'm not

unable to apply different CSS classes to 2 svg images( both are clones of each other)

I have 2 svg images in my html in 2 different divs. On performing some action I am trying to hide one and display another by adding different css classes dynami