remove 'px' from number

PHOTO

Tue Jul 02 2024 01:27:00 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #dom #css #inline #getcomputedstyle

let heightStr = '56.54px';

let number = parseFloat(heightStr.replace('px', ''));
console.log(number)

// or on a DOM Element

 const message = document.querySelector('.message-container');
 console.log(getComputedStyle(message).height);
message.style.height =
    Number.parseFloat(getComputedStyle(message).height, 10) + 22.5 + 'px';

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

JS

@davidmchale

If statement with switch delete duplicates from an array loop and find class Nullish with an Object - basic tranverse classes in a list substring capitalize substring text with elipses array.at() js media query Dynamic Filter - buttons advanced flow converted if statement Add an array to a HTML dataset getElement Function Intersection Observer template intersection Observer Basic Example fetch data, display and filter for of loop - get index get random index value from an array fetch with post method get id value from url debounce for scrolling get element or elements check functions return values from functions indexOf explantion sorting basic using for-of loop for getting index value of iteration import json data into a JS module Splide slider with modal JS change active class if url path matches Pagination / array of arrays FIlter array or return full array price formatting ignores wrapping element on click Create a dummy array with numbers Random Generated Number Dummy array - list items dummy id Limits the amount of text Random Number generator function format date function Remove duplicates from JSON array data Filter Posts from state remove duplicates and create object simple ternary remove transition with propertyName sorting in reverse counting items using reduce splice explanation Declaring Variables Get primitive properties on a number / string etc using proto check an array of objects exists / check using regex Destructuring nested function scope IFFE function basic switch Switch with function passing an object check length of object while loops (for when the number we are iterating over is unknown) Ternary with 2 conditions for of loop with index array nested ternary operator callbacks Method Borrowing this keyword and arrow functions rest operator - args functions p1 rest operator - args functions p2 for of loop with index and entries callback functions explained version 1 callback functions explained version 2 Form and value IF Element shorthand function as a callback inside a higher order function Using param for symbol remove 'px' from number scrolling behaviour test 1 clearing event listeners new URL applying css vars scroll behaviours testing intersection observer intersection observer with loop JS docs - writing js docs check is key exists call() nested ternary with function forEach with function and ...args using template literals filter duplicates get class by indexOf returning ternary operator remove children from parent bootstrap rows with cols fetching multple data endpoints Promise.all

A Modern CSS Reset - Piccalilli

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#html #jquery #css #navbar

Underline active navbar link

// in css:
/* Display line under clicked navbar link */
.active {
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  color: rgb(20, 19, 19);
}

//in html: 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
      $(document).ready(function () {
        // Underline to remain in navbar after click using URL
        jQuery(function ($) {
          var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
          $('.nav-link').each(function () {
            if (this.href === path) {
              $(this).addClass('active');
            }
          });
        });
      });
    </script>

//Note class in link should be nav-link

Firefox CSS backdrop-filter workaround

/* slightly transparent fallback */
.backdrop-blur {
  background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
  .backdrop-blur {
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(2em);
    backdrop-filter: blur(2em);
  }
}

Background Image That Doesn't Scroll on Webpage

body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

slick slider dots sliding

#banner .slick-dots {
	display: flex;
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
}

#banner .slick-dots li button {
	font-size: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #fff;
	background: transparent;
	border-radius: 50%;
	margin: 0 5px;
}

#banner .slick-dots li.slick-active button {
	width: 20px;
	height: 20px;
	background: var(--hover);
	border-color: var(--hover);
}

#javascript #eventos #mouse #css #html

mover un elemento junto al mouse, dentro de un div (eventos de mouse)

let hijo = document.querySelector('.hijo');
let etiqueta = document.querySelectorAll('.etiqueta');
//El metodo .getBoundingClientRect() nos da 
//la posicion de un elemento con respecto al viewport(en numeros).
// tomare la posicion constante del elemento .hijo 
const coords = hijo.getBoundingClientRect();
const j = coords.top; // estamos obteniendo la posicion top en numero
const k = coords.left;

// se aplica forEach para obtener posicion de cada movimiento del mouse
etiqueta.forEach(link => {
// se obtiene la posicion del mouse con la funcion  mover(e)
    function mover(e){
// se calcula la posicion top y left del mouse al cual le restamos
// la posicion del elemento "hijo"; resultado: mouse e "hijo" juntos 
	 let m = e.pageY ;
	 let n = e.pageX ;

	 let t = m - j;
	 let l = n - k;
	 hijo.style.top = t + "px"; // agregando px a los numeros
	 hijo.style.left = l + "px";
    };
// mouseover dice que entro en elemento etiqueta
    link.addEventListener("mouseover",() => {
	hijo.classList.add("edd1");// solo agrega un class que le da color red

	 window.addEventListener("mousemove",mover);// agrega el evento junto a la funcion 
    });

    link.addEventListener("mouseleave",() => {// mouseleave dice que salio del elemento etiqueta
	hijo.classList.remove("edd1"); // le quita un class, que le quita color red
	 window.removeEventListener("mousemove", mover);// remuev el evento
    });
});

/* Simples estilos para delimitar los div*/
.box{
width: 300px;
height: 300px;
border: solid 1px black;
}
.etiqueta{
width:100px;
height:100px;
position: absolute;
left:50px;
top:50px;
background: green;
overflow: hidden;
position:relative;
}
.hijo{
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: blue;
transform: scale(0); /*desaparece el elemento hijo*/
}
.edd1{
background-color: red;
transform: scale(1); /*reaparece el elemento hijo con el mause al centro*/
} 

// un ejemplo con html
<div class="box">
  <div class="etiqueta">
  <div class="hijo"></div>
  </div>
</div>

Header JavaScript

const header = document.querySelector('header');
let lastScroll = 0;
const scrollThreshold = 10; 

window.addEventListener('scroll', () => {
    const currentScroll = window.scrollY;

    if (currentScroll > lastScroll && currentScroll > scrollThreshold) {
        header.classList.add('small');
    } else if (currentScroll === 0) {
        header.classList.remove('small');
    }

    lastScroll = currentScroll;
});

const hamburger = document.querySelector(".hamburger");
const navmenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active");
    navmenu.classList.toggle("active");
});

document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navmenu.classList.remove("active");
}));

Add a Mask in CSS

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
}

Make a circle with just CSS

<style>

 .circle:before {
                    content: ' \25CF';
                    font-size: 50px;
                    color: black;
                }
</style>

<span class="circle"></span>

CSS Grid Layout - CSS: Cascading Style Sheets | MDN

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

.c-hero__title {
  max-width: 36rem;
  text-wrap: balance;
}

#css #webdev #text

How to "truncate" long strings with an ellipsis (...) for text that overflows its container

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Text Rotation in CSS

 .rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don

Centering Things with CSS Auto Margin

.box-one {
	width: 100px;
	margin: 0 auto;
}

.box-two {
	width: 100px;
	margin-left: auto;
    margin-right: auto;
}

Browse more snippets >>