Month: August 2022

How to preserve line breaks in textarea with CSS?

Sometimes, we want to preserve line breaks in textarea with CSS.

In this article, we’ll look at how to preserve line breaks in textarea with CSS.

How to preserve line breaks in textarea with CSS?

To preserve line breaks in textarea with CSS, we set the white-space and overflow-wrap properties.

For instance, we write

textarea {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

to add white-space: pre-wrap; to make the content wrap.

And we break the words when the overflow with overflow-wrap: break-word;.

Conclusion

To preserve line breaks in textarea with CSS, we set the white-space and overflow-wrap properties.

How to display a range input slider vertically with CSS?

Sometimes, we want to display a range input slider vertically with CSS.

In this article, we’ll look at how to display a range input slider vertically with CSS.

How to display a range input slider vertically with CSS?

To display a range input slider vertically with CSS, we set the -webkit-appearance property.

For instance, we write

<input type="range" />

to add the range input.

Then we write

input[type="range"] {
  -webkit-appearance: slider-vertical;
  width: 50px;
  height: 200px;
  padding: 0 24px;
  outline: none;
  background: transparent;
}

to make it vertical with -webkit-appearance: slider-vertical;.

Conclusion

To display a range input slider vertically with CSS, we set the -webkit-appearance property.

How to make CSS position absolute element full width?

Sometimes, we want to make CSS position absolute element full width.

In this article, we’ll look at how to make CSS position absolute element full width.

How to make CSS position absolute element full width?

To make CSS position absolute element full width, we make the set left and right properties both to 0.

For instance, we write

#site_nav_global_primary {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

to set left and right properties both to 0 to make the element with ID site_nav_global_primary full width.

Conclusion

To make CSS position absolute element full width, we make the set left and right properties both to 0.

How to add a fixed header, and footer with scrollable content with CSS?

Sometimes, we want to add a fixed header, and footer with scrollable content with CSS.

In this article, we’ll look at how to add a fixed header, and footer with scrollable content with CSS.

How to add a fixed header, and footer with scrollable content with CSS?

To add a fixed header, and footer with scrollable content with CSS, we use flexbox.

For instance, we write

<div class="container">
  <header><h1>Header</h1></header>
  <div class="body">Body</div>
  <footer><h3>Footer</h3></footer>
</div>

to add the elements.

Then we write

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

header {
  flex-shrink: 0;
}
.body {
  flex-grow: 1;
  overflow: auto;
  min-height: 2em;
}
footer {
  flex-shrink: 0;
}

to make the outer div a flex container with display: flex;.

We make the flex direction vertical with flex-direction: column;.

Then we make the inner div fill the height not taken by the header and footer with flex-grow: 1;.

We make the inner div scrollable when there’s overflowing content with overflow: auto;.

We stop the header and footer from filling up extra space with flex-shrink: 0;.

How to reset React file input with JavaScript?

Sometimes, we want to reset React file input with JavaScript.

In this article, we’ll look at how to reset React file input with JavaScript.

How to reset React file input with JavaScript?

To reset React file input with JavaScript, we set the input’s value property to an empty string.

For instance, we write

import React, { useRef } from "react";

export default function App() {
  const ref = useRef();

  const reset = () => {
    ref.current.value = "";
  };

  return (
    <>
      <input type="file" ref={ref} />
      <button onClick={reset}>reset</button>
    </>
  );
}

to add the file input and assign the ref ref to it.

Then in the reset function, we set its value property to an empty string to reset it.

Conclusion

To reset React file input with JavaScript, we set the input’s value property to an empty string.

How to add a fixed footer in Bootstrap with HTML?

Sometimes, we want to add a fixed footer in Bootstrap with HTML.

In this article, we’ll look at how to add a fixed footer in Bootstrap with HTML.

How to add a fixed footer in Bootstrap with HTML?

To add a fixed footer in Bootstrap with HTML, we use the fixed-bottom class.

For instance, we write

<div class="footer fixed-bottom"></div>

to add the fixed-bottom class to the div to make it a fixed footer.

Conclusion

To add a fixed footer in Bootstrap with HTML, we use the fixed-bottom class.

How to change CSS Values with JavaScript?

Sometimes, we want to change CSS Values with JavaScript.

In this article, we’ll look at how to change CSS Values with JavaScript.

How to change CSS Values with JavaScript?

To change CSS Values with JavaScript, we add a new stylesheet with the rules.

For instance, we write

const style = document.createElement("style");
document.head.appendChild(style);
stylesheet = style.sheet;

const css = (selector, property, value) => {
  try {
    stylesheet.insertRule(
      selector + " {" + property + ":" + value + "}",
      stylesheet.cssRules.length
    );
  } catch (err) {}
};

to create a new style element with createElement.

Then we append it to the head element with document.head.appendChild.

Then we get the style sheet with style.sheet.,

Next, in the css function, we call insertRule to insert a new style rule into the stylesheet.

The first argument is the rule and the 2nd argument is the index of the rule.

Conclusion

To change CSS Values with JavaScript, we add a new stylesheet with the rules.

How to refresh part of a page (div) with JavaScript?

Sometimes, we want to refresh part of a page (div) with JavaScript.

In this article, we’ll look at how to refresh part of a page (div) with JavaScript.

How to refresh part of a page (div) with JavaScript?

To refresh part of a page (div) with JavaScript, we set the innerHTML property of the div.

For instance, we write

<div id="staticPart">
  Here is static part of page

  <button id="btn" onclick="refresh()">Click here</button>
</div>

<div id="dynamicPart">Dynamic part</div>

to add the elements.

We make the button call the refresh function when we click it by setting the onclick attribute to refresh().

Then we write

const url = "https://example.com";

async function refresh() {
  btn.disabled = true;
  dynamicPart.innerHTML = "Loading...";
  dynamicPart.innerHTML = await (await fetch(url)).text();
  setTimeout(refresh, 2000);
}

to define the refresh function that sets the innerHTML property to the content returned by the promise returned by fetch and text.

We use await to get the promises’ result.

And we call setTimeout to call refresh again after 2 seconds.

Conclusion

To refresh part of a page (div) with JavaScript, we set the innerHTML property of the div.

How to semantically provide a caption, title, or label for a list in HTML?

Sometimes, we want to semantically provide a caption, title, or label for a list in HTML.

In this article, we’ll look at how to semantically provide a caption, title, or label for a list in HTML.

How to semantically provide a caption, title, or label for a list in HTML?

To semantically provide a caption, title, or label for a list in HTML, we use the figcaption element.

For instance, we write

<figure>
  <figcaption>Fruit</figcaption>
  <ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
  </ul>
</figure>

to put the figcaption element with the caption in the figure element with the ul list.

Conclusion

To semantically provide a caption, title, or label for a list in HTML, we use the figcaption element.

How to add href and onclick to an HTML anchor link?

Sometimes, we want to add href and onclick to an HTML anchor link.

In this article, we’ll look at how to add href and onclick to an HTML anchor link.

How to add href and onclick to an HTML anchor link?

To add href and onclick to an HTML anchor link, we return true in the click event handler.

For instance, we write

<a href="#Foo" onclick="return myFunction();">Do it</a>

to call myFunction on click and return its result.

Then we write

function myFunction() {
  //code
  return true;
}

to define myFunction, and we return true on click.

Conclusion

To add href and onclick to an HTML anchor link, we return true in the click event handler.