60 questions from the last 7 days
Advice
0
votes
0
replies
5
views
How to fetch realTime news Data feed
i wanted to know how i can get live news feed data (INDIAN) , without any or like minimal latency(30-40s), i tried using some rss feeds but all they do is provide the data as some latency so what i ...
Advice
0
votes
3
replies
10
views
Is it possible for JavaScript to detect other tabs
Is it possible for JS in Tab A to detect if Tab B is Google, for example, or any other type of tab. And if so , could it close Tab B using JS?
-3
votes
0
answers
33
views
Why is my image not displaying in my web browser? [closed]
I put mypicture.jpg in the same folder as my index.html file, but when I open the page in the browser, the image does not show. Instead, I see a broken image icon.
<!DOCTYPE html>
<html>
&...
-3
votes
1
answer
65
views
How can I add a keyboard to a game like wordle when using html, css and javascript [closed]
I'm looking for a way to code a keyboard in javascript and I've already got the structure using two for loops to create a table that contains 3 rows to simulate an azerty keyboard.
I need a function ...
0
votes
0
answers
42
views
Animate a div between width constrained and a height constrained, also keeping the same aspect ratio as the img
I have a div containing an image. The image is user supplied so it can be tall or wide or square. By default I want to keep the image at a fixed 36px height, its width expanding as needed according to ...
0
votes
0
answers
34
views
Issue With Jsoup Document Selector
I'm using java spring boot and jsoup and recently I upgraded jsoup version to 1.21.1.
My code creates search query and searches for it in the document
Elements targetElements = document.select(...
0
votes
0
answers
70
views
Creating a scrolling diagonal carousel with N images
I have a carousel of images, which I have tilted diagonally, and now I want to scroll through the images. The only problem is that if I add more images to the carousel track than the four I have, the ...
-3
votes
1
answer
94
views
How to move background while scrolling the page? [closed]
I`m just trying to figure out how to do a scroll effect. When background is moving with scroll, while you are on a certain block of the site. I tried something like this, but i feel wrong in here)
...
0
votes
0
answers
22
views
CSS is not being applied correctly in Outlook Classic on macOS
I am experiencing an issue where the CSS of my email template is breaking on MAC devices that use Outlook Classic. I have tried adding some validations such as the following:
<!--[if mso]> ...
Advice
0
votes
7
replies
84
views
Splitting SQL output evenly into 3 HTML columns
I am trying to take the output of a SQL query and split it evenly into 3 HTML columns such as flexbox divs. Obviously the output total won't always be evenly divisible by 3 and the first 2 totals ...
Best practices
0
votes
1
replies
18
views
What would the correct HTML5 elements/aria-roles for a drag-and-drop UI?
I want to implement an interface where some "slots" start out empty and can be filled with "objects". Something roughly like:
My question is, what would the correct aria-role (or ...
1
vote
1
answer
59
views
Applying a filter to all subsequent and previous sibling elements in CSS on mouseover
I have a grid of elements that I want to appear in their unfiltered form when the page loads. When a user mouses over one of them, it should stay highlighted while the other elements fade to grey. I ...
Advice
0
votes
2
replies
43
views
How to obtain HTML DOM from markdown?
I have some markdown text.
I use MarkDig to parse the markdown text and obtain a markdown-document-object-model. (markdown-DOM.)
From that, I want to obtain an HTML-DOM.
As far as I can tell, the only ...
-1
votes
0
answers
31
views
Entire browser glitching/flickering during CSS transform animation [closed]
I have attached a link to a screen recording of my problem, I am asking here as I cannot find examples of this problem elsewhere and I have tried various possible solutions such as wrapping the ...
0
votes
0
answers
27
views
Why range.startContainer gets different results when I click inside or outside the img?
class Editor {
docContainer
text
constructor(posContainer) {
this.posContainer = posContainer
this.genComponets()
this.listen()
}
genComponets() {
...
0
votes
0
answers
42
views
How to add [page] , [topage] in the body of PDF [closed]
I am confused about generating the PDF. I have a case
Table of content
A-1 .......................................................................... 2
B-2 ..............................................
-2
votes
0
answers
42
views
React app only shows the content of index.html [closed]
I'm trying to run a simple React app but when I run npm run start all the app shows is the content of index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset=&...
Advice
0
votes
8
replies
86
views
Image not displaying when running Java Servlet project on server (but works when opened directly in browser)
<img src="images/logo.png">
I created a web project using HTML and Servlets (no JSP).
When I open the HTML file directly using “Open in Browser,” the image displays correctly.
But when ...
2
votes
2
answers
103
views
Is there a way to target a pseudo-element in CSS by its class?
I am looking to construct CSS to target this element...
<input type="button"
pseudo="-webkit-media-controls-play-button"
aria-label="play"
...
0
votes
0
answers
29
views
Should I use both aria-errormessage and aria-describedby with the same value?
Pretty much the title.
I'm learning about accessibility. I want to display an error for my input and make it accessible but I found out that aria-errormessage was not fully supported by some assistive ...
0
votes
2
answers
76
views
Why can't I increase the visual width or height of an <input type="range"> without breaking its layout?
I’m working with an <input type="range"> element, and I’m having trouble customizing its size.
When I try to increase the height, the slider doesn’t actually get thicker, it just moves ...
-2
votes
0
answers
40
views
How can I extract embedded video link from vdo.js? [closed]
I need the method to extract the videos of course i am unable to download from the site as it is embedded and follow restricted process while playing the vdo.
1
vote
1
answer
50
views
TailwindCSS utilities/classes always override static CSS styles
I try to use TailwindCSS and CSS (as static), but TailwindCSS utilities override the static CSS styles. I tried moving TailwindCSS invocation tags after, before static CSS invocation, but it didn't ...
Best practices
0
votes
3
replies
76
views
State of a HTML Checkbox as a Parameter to a new Website
I want to use the state of a checkbox as a parameter to a call of a website.
I.E. there is a checkbox <input type="checkbox" id="myCheck">
and a hyperlink <a href=“/action....
0
votes
1
answer
54
views
pointerover/pointermove events are not triggered in the new elements while swiping on mobile
I use Svelte, and I have code like the following.
<div onpointerover={() => console.log('first')}>first</div> // onpointermove is ok too
<div onpointerover={() => console.log('...
0
votes
0
answers
45
views
Popover circle close animation doesn't work as intended
Click on the yellow to open. The popover opening works (appearing through a circle animation), however there's no close animation. It simply disappears. (It seems to work through this snippet but not ...
0
votes
1
answer
123
views
Is there a way to recolor a white-and-transparent PNG inside an <img> tag to the current text color with HTML and CSS only? [duplicate]
I have some PNG images where all pixels are pure white with opacities ranging from 0% to 100% which are being added to web pages in <img> tags, and I want to recolor the opaque and semi-...
0
votes
0
answers
81
views
Changing a div with a class to a semantic tag seemingly breaks another element's CSS in dark mode [closed]
I wrote a site with Eleventy and want to use less <div> elements. Currently this is what the HTML and CSS for a page look like. [NOTE: You will need to toggle between browser dark and light ...
0
votes
0
answers
17
views
Overlayer on Card is not showing when the element get focus [closed]
I am working on a component made on Bootstrap. It has inheritance of an overlayer to show two buttons when you hover the card, part of this implementation is to comply with WCAG 3.2.1 but when I set ...
Advice
0
votes
3
replies
150
views
How to reset an HTML element to its first/initial value in JavaScript?
I am attempting to reset an element, through JavaScript, to the value that was first specified in the HTML/CSS files, while avoiding "hard-coding" the value. The purpose is making a script ...
1
vote
0
answers
43
views
The navbar is not applying the css property background color of blue with 0.2 opacity. What went wrong?
:root {
--primary: #2563eb;
--dark: #1e40af;
--orange: #f97316;
--bg-rgb: 10, 14, 63;
--text: #feffff;
--card: #f8f9fa;
}
/* Navbar */
.navbar {
position: static; /* scrolls ...
1
vote
2
answers
69
views
Targeting element which is has not a parent with :not(custom-component)
I am trying to target a paragraph only if it is not inside the custom component my-component. like this:
// Style all elements that are NOT inside my-component
:not(my-component) *{
color: red;
}
...
0
votes
0
answers
39
views
PrimeNG p-calendar inside p-table header jumps to (0,0) when using appendTo="body" and misaligns after month navigation
I’m implementing a date filter inside a PrimeNG p-table header using a p-calendar.
Since the table can scroll and uses overflow, I need the calendar popup to appear on top of everything and aligned ...
2
votes
2
answers
77
views
how to use lexbor write html content to a file
How do I use lexbor to write HTML content to a file?
mycore_string_raw_t str_raw;
mycore_string_raw_clean_all(&str_raw);
if(myhtml_serialization_tree_buffer(myhtml_tree_get_document(tree),...
2
votes
0
answers
126
views
HTML <b> tag with custom font causes color change even after the </b> closing tag [closed]
I'm having a baffling issue with some basic HTML. While using a custom font, I noticed that the <b> tag causes the shade of the color to become darker after the closing tag. This appears to ...
-2
votes
0
answers
47
views
Fixed bottom navbar not fixed [closed]
I have a bad problem whith my bottom fixed nav-menu on my website on mobile devices (edge, chrome). When I load the site with the mobile browsers top and bottom address/menu bar visible everything is ...
0
votes
0
answers
19
views
Shopify 3D Logo in header using <model-viewer> not showing and menu broken
I’m trying to replace my Shopify store’s 2D logo with a 3D logo using <model-viewer> in my header.liquid.
Here’s what I want:
The 3D logo should be centered in the header.
The Home and Shop ...
1
vote
1
answer
35
views
How to display date, page count, and id on footer when printing?
I have a page where I am wanting to display the date, page number, and the report id on it. I found in CSS you can use @bottom-left, @bottom-center, and @bottom-right and call content to gather the ...
2
votes
1
answer
45
views
on small resolution added hamburger span stays on screen when resizing the window although it should be removed [duplicate]
I have this js, but it works only with browser refresh.
let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
if(vw < 801){
as = document.getElementById('as');
...
-1
votes
0
answers
48
views
HTML Video player - missing fullscreen button [closed]
I want to show the video player controls INCLUDING full screen button. But I'm only seeing this:
What am I doing wrong?
<video
id="video"
controls
preload="auto" ...
Best practices
1
vote
5
replies
118
views
How can I create a fully custom-styled sorting dropdown in React (instead of the default <select> styling)?
I’m trying to build a sorting dropdown for my product list in a React app.
The sorting options are things like:
Default
A - Z
Z - A
Price: Low - High
Price: High - Low
My first approach was to ...
0
votes
0
answers
52
views
Change SVG background-color only on the viewBox [duplicate]
Having an SVG element with a certain viewBox, is there a way to change the background-color only of the viewBox?
For example:
<svg class="section-divider-svg-stroke" viewBox="0 0 1 1&...
-10
votes
0
answers
57
views
Best practices to identify HTML elements in modern web applications? [closed]
I am writing Playwright E2E tests for a React app that supports multiple languages. Selecting elements by text fails when the language changes. What is the recommended way to select elements in this ...
1
vote
0
answers
29
views
How to get CJK orthography to display well in browsers?
<style>
* {
font-family:
"PingFang SC", "Hiragino Sans GB",
"Noto Sans CJK SC", "Noto Sans SC",
"Microsoft YaHei", "WenQuanYi Micro Hei";
}
#two {
font-variant-...
-1
votes
1
answer
34
views
Navigation Links are not working when published
<div class="nav-links">
<span class="material-symbols-outlined" id="closeMenu">close</span>
<a href="../Welcome/...
1
vote
1
answer
93
views
Changing input from checkbox to button
I have a jsp file which results in this HTML:
<form id="paymentForm" action="submit_payment.form" method="post">
<div class="notvalid">
</...
2
votes
0
answers
62
views
Why does a floated block create an anonymous block box?
In general, there is the next slide from the presentation the life of a pixel:
Quote from spec:
A block container box either contains only block-level boxes or establishes an inline formatting ...
-5
votes
0
answers
53
views
How do i make this code even cleaner? grid, modal, navbar [closed]
I dont know if I can make this any cleaner I want tips because I'm trying to perfect my knowledge about basic HTML
I have all my divs necessary for my tic tac toe game, however I can't seem to find a ...
0
votes
0
answers
36
views
Root node syntax in CSS [closed]
The following is valid CSS in my opinion as per W3 schools and other websites:
:root {
--primary-bg-color: green; /* global scope */
}
However most linters like https://prettier.io/ gives a error ...
-1
votes
0
answers
55
views
Way to open a clicked link of a certain class in a new tab in TamperMonkey
based on this question and answer:
This very helpful method provided by Brock Turner enables this for links (anchor tags) containing the string cars :
// ==UserScript==
// @name NOT an AutoClicker,...