New answers tagged html
0 votes
Accepted
How can I place text boxes on the same line while allowing responsive widths longer than the browser default?
For anyone reading this question in the future, here is the solution I went with, as well as additional caveats to be aware of. .flex-container { display: flex; align-items: end; } .input-wrapper ...
- 239
-1 votes
How to align logo.svg, Website name and menu icon on the same level?
<style> .content { /* the nav bar css */ display: flex; margin-top: auto; margin-bottom: auto; background-color: gray; padding: 10px; } ...
- 64
Best practices
1 vote
0 replies
0 views
Advice for beginner who is learning js
There is not enough information about your situation for anyone to give any meaningful advice. Please explain what it is you think you need help with, precisely. You can edit your post. Thanks.
- 63.1k
Advice
0 votes
0 replies
0 views
After change an option in parent select the child select is not refresh automaticaly
I would create two different select elements. Notice that they have the same name. If a form field is disabled it will not be included in a submit request. When check changes, disable all select ...
- 14.4k
1 vote
:focus-visible not triggered on parent :has() selector when focus is applied programmatically
document.querySelector('#trigger').addEventListener('click', () => { document.querySelector('#target').focus({focusVisible: true}); }); div:has(:focus-visible) { border: 2px solid red; } <...
- 1,204
2 votes
:focus-visible not triggered on parent :has() selector when focus is applied programmatically
If you set the focusvisible option on focus() it works. This is an experimental feature. document.querySelector('#trigger').addEventListener('click', e => { document.querySelector('#target')....
- 14.4k
Advice
0 votes
0 replies
0 views
After change an option in parent select the child select is not refresh automaticaly
Which line of code are you expecting to change the value of the 2nd selector?
- 1,520
Advice
0 votes
0 replies
0 views
After change an option in parent select the child select is not refresh automaticaly
What debugging steps have you tried to solve this?
- 1,520
1 vote
How to control execution of multiple scripts on page load?
Answer has been found while discussion in comments. Due to const { httpConstants, some more } = (await axios.get('/some-data')).data; The event listener for DOMContentLoaded was added after the event ...
- 60.7k
0 votes
Accepted
Can i use scrollbar-gutter to force overlay scrollbars?
No. scrollbar-gutter cannot be used to force overlay scrollbars. It solves a different problem. scrollbar-gutter controls whether space is reserved for a scrollbar gutter, but whether a browser uses ...
3 votes
Accepted
CSS media query problems
The media queries themselves are not the main issue. The actual problem is that the layout still uses fixed pixel widths, so on small screens the content cannot shrink to fit the viewport. In your ...
-1 votes
Navigation bar positioning
<!DOCTYPE html> <html> <head> <title>Homepage</title> <style type="text/css"> html, body { margin: 0; padding: 0; } #container { margin: 0 auto; background:...
0 votes
Navigating to page fragment with Javascript
Each of the undermentioned perform this function: #!/usr/bin/env xdg-open location.hash = "fragment"; This is the most equivalent. #!/usr/bin/env xdg-open history.pushState(null, "&...
1 vote
How can I place text boxes on the same line while allowing responsive widths longer than the browser default?
If I understand your question correctly, then by placing input in a flex container with flex-direction: column and adding max-width: 100% to it - you will get the desired result: * { box-sizing: ...
- 11.8k
-2 votes
Simple javascript html image game
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Minimal Dodge</title> <style> canvas { background: #...
0 votes
Update <selectedcontent> from DOM change
Try to use a MutationObserver in your content script to detect DOM changes. When a change occurs, dispatch a custom event that your native wrapper can hook into to re-query the AXSelectedText or ...
- 1,068
0 votes
How can I place text boxes on the same line while allowing responsive widths longer than the browser default?
I think you might be looking for something like this: First, set the widths of the input boxes to 5rem and 20rem, rather than the max-width. That will stop the widths regressing to their default sizes....
- 84.6k
Advice
0 votes
0 replies
0 views
How to take in different button values as a single string
Hm. Just out of curiosity, why is using Event.target considered bad? I've done that for years in projects that didn't use jQuery. I see in the answer you linked to that event.target is used to ...
- 19.3k
Advice
1 vote
0 replies
0 views
When selecting data from a database, how would I put it into a HTML table with a PHP PDO connection?
Also just to note, that once you've done the fetchAll(), the result of that is you've got a standard PHP associative array to work with (as per the documentation). Therefore the fact that you used PDO ...
- 63.1k
Advice
0 votes
0 replies
0 views
When selecting data from a database, how would I put it into a HTML table with a PHP PDO connection?
Also have a look at Show values from a MySQL database table inside a HTML table on a webpage
- 57.3k
Advice
3 votes
0 replies
0 views
When selecting data from a database, how would I put it into a HTML table with a PHP PDO connection?
Where did you get stuck in your research so far? This is not a new problem
- 63.1k
0 votes
What error is occurring with the freeCodeCamp lesson 'Building a Travel Agency Website'?
All a tags should be closed ie <a></a>
1 vote
What error is occurring with the freeCodeCamp lesson 'Building a Travel Agency Website'?
You didn't correctly close the <a> tag. <h2>Top Itineraries</h2> <figure> <a href="https://www.freecodecamp.org/learn " target="_blank"><a>...
- 1
-1 votes
File chooser dialog can only be shown with a user activation
Honestly, this is the kind of edge-case understanding that separates average frontend devs from strong ones :-) Your solution is minimal and correct, well done. But going forward, when dealing with ...
1 vote
File chooser dialog can only be shown with a user activation
OK, figured it out: Both approaches (fileInput.showPicker() and fileInput.click()), were attempting to open the file picker twice, but with the first approach, the display of the picker was suppressed ...
- 10.2k
0 votes
Next.js server-side rendering
That error means the HTML rendered on the server is different from what React renders on the client, so hydration fails. It usually happens when you use things like "window", "document&...
- 1
2 votes
Accepted
Override browser's built in 'jump/scroll to id in hashtag' functionality
You can override the default scroll behavior by using the window.onload event to detect when the page has loaded and then manipulate the scroll position. Here’s a concise solution: window.onload = ...
- 101
0 votes
How to include html file in another html file and then alert result via JavaScript and jQuery
Instead of using jQuery, you could make use of JavaScript's fetch() Having a b.html file like requested: b.html <p>Included HTML</p> inside any other page you could use: index.html <...
- 209k
0 votes
What is the difference of margin-top and -webkit-margin-before
They are old vendor prefix of CSS Logical Properties being supported since Chrome 8, and the latter standard is supported by Chrome 69 https://github.com/postcss/autoprefixer/issues/324#issuecomment-...
- 1,701
1 vote
Scroll-based text color animation - how to animate line-by-line instead of entire block?
Have a look at their HTML. They have the visible text with each word in its own in <div> tag. Check the CSS styles too. I bet JavaScript is detecting if each DIV element is in the viewport, and ...
- 19.3k
Advice
0 votes
0 replies
0 views
How to take in different button values as a single string
Thanks, I've corrected this by changing elements to element, since you're right, the way you suggest implementing the method requires applying “3” listeners, whereas I only use one, so I don't think ...
- 1,200
Advice
0 votes
0 replies
0 views
How to take in different button values as a single string
You have several serious issues in your code. let elements; should be let element;. Also, NEVER use Event.target (on its own) for delegation: Read more about proper Event delegation here therefore you ...
- 209k
Advice
0 votes
0 replies
0 views
How to add an image to HTML email, and show absolutely nothing if that image is not available
I changed td to div, changed thd image url, left no content inside div - and it showed nothing when image was available. Quite new here
- 911
2 votes
Accepted
UnicodeEncodeError: 'charmap' codec can't encode characters when writing to HTML
For posterity, I will create an answer for this question summarizing the comments. The first issue was solved by updating the InjectHTML function to use the built-in WRITE function rather than ...
- 511
Advice
2 votes
0 replies
0 views
How to take in different button values as a single string
You can learn Javascript for free online. MDN is a very good resource with well written guides: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide You don't have to know everything, just ...
- 4,314
-2 votes
AJAX POST Browser History
I'd suggest using HTMX, which significantly facilitates using AJAX. It provides a hx-push-url attribute which would solve your problem. See https://htmx.org/attributes/hx-push-url/ for more ...
-1 votes
CSS keyframe animation with translation transform snaps to whole pixels in IE 10 and Firefox
@keyframes glitchMove { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-3px, 2px) scale(1.02); } 50% { transform: translate(3px, -2px) scale(0.98); } 75% { transform: ...
1 vote
Horizontal scrollbar for long Matjax equations in HTML
A know that this is old, but the mathjax allows to do this by adding displayOverflow: 'scroll' to output. So, in your example, just change the declaration of MathJax to MathJax = { tex: { ...
Best practices
1 vote
0 replies
0 views
I worked on a CRUD app for my learning and I wanna know what are the best practices to write the code
Checked your code. And I would like to suggest something based on javascript code. #1 problem getSaveData(); if (getSaveData() == false) {.... } #1 solve if (!getSaveData()) {...} #2 problem const ...
Advice
2 votes
0 replies
0 views
How to take in different button values as a single string
Although you've managed to solve your problem, I'd like to remind you that using onclick="buttoninput( this )" within html is considered a bad practice and should not be used in production ...
- 1,200
0 votes
How I can place + on places where borders meet like the ones shown in terminal apps?
If you really want to have the same effect as a terminal character outlined table, you have to use characters for the dotted and vertical lines as well as for the + characters. This snippet does this ...
- 37.7k
Advice
4 votes
0 replies
0 views
How to take in different button values as a single string
It could be a regular technical question. It does not belong to the Advice category.
- 1,934
Advice
0 votes
0 replies
0 views
Advice
3 votes
0 replies
0 views
How to take in different button values as a single string
I think you're looking for inputvalue += button.value;, which is the same as inputvalue = inputvalue + button.value;. In other words, you want to add to the existing string instead of just ...
- 46.7k
0 votes
How to add animation to input placeholder
I guess you want to animate the text. I tried something like: input::placeholder { transform: translateY(-50%); } input:hover::placeholder { transform: translateY(0%); } It works also with color ...
0 votes
How to edit text style with Javascript
For highlighting CSS (:hover) should be sufficient. // bonus: create a new li on click document.addEventListener(`click`, handle); function handle(evt) { if (evt.target.classList.contains(`...
- 124k
Best practices
0 votes
0 replies
0 views
Required/Aria-required for a form where all fields but one are required
Is this an accessibility violation? Yes. Not visually indicating that a field is required is definitely an accessibility violation. Would the easy fix be to avoid adding the "required" ...
0 votes
Can I create links with 'target="_blank"' in Markdown?
In the TAGS define the link like this: 'external-link': { selfClosing: true, attributes: { href: { type: String }, }, render: ({ href, children }) => ( <a href={href} ...
Best practices
2 votes
0 replies
0 views
I worked on a CRUD app for my learning and I wanna know what are the best practices to write the code
Have you checked whether your code works? The code in your question doesn't, it's incomplete. A description of what the code is supposed to do would also be helpful. Just saying: "CRUD app", ...
- 17.5k
Top 50 recent answers are included