Category: javascript

Category Added in a WPeMatico Campaign

Add “Load More” functionality for long text

I would like to modify the following

SCRIPT:

* {
  margin: 0px;
  padding: 0px;
  font-family: poppins;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

#testimonials {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.testimonial-heading {
  letter-spacing: 1px;
  margin: 30px 0px;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.testimonial-heading span {
  font-size: 1.3rem;
  color: #252525;
  margin-bottom: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.testimonial-box-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.testimonial-box {
  width: 500px;
  box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding: 20px;
  margin: 15px;
  cursor: pointer;
}

.profile-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.profile {
  display: flex;
  align-items: center;
}

.name-user {
  display: flex;
  flex-direction: column;
}

.name-user strong {
  color: #3d3d3d;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}

.name-user span {
  color: #979797;
  font-size: 0.8rem;
}

.reviews {
  color: #f9d71c;
}

.box-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.client-comment p {
  font-size: 0.9rem;
  color: #4b4b4b;
}

.client-comment {
  height: 100px;
  overflow-y: scroll;
}

.testimonial-box:hover {
  transform: translateY(-10px);
  transition: all ease 0.3s;
}

@media(max-width:1060px) {
  .testimonial-box {
    width: 45%;
    padding: 10px;
  }
}

@media(max-width:790px) {
  .testimonial-box {
    width: 100%;
  }
  .testimonial-heading h1 {
    font-size: 1.4rem;
  }
}

@media(max-width:340px) {
  .box-top {
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .reviews {
    margin-top: 10px;
  }
}

::selection {
  color: #ffffff;
  background-color: #252525;
}
<body>
  <section id="testimonials">
    <!--heading--->
    <div class="testimonial-heading">
    </div>
    <!--testimonials-box-container------>
    <div class="testimonial-box-container">
      <!--BOX-1-------------->
      <div class="testimonial-box">
        <!--top------------------------->
        <div class="box-top">
          <!--profile----->
          <div class="profile">
            <!--img---->
            <div class="profile-img">
              <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" />
            </div>
            <!--name-and-username-->
            <div class="name-user">
              <strong>Liam mendes</strong>
              <span>@liammendes</span>
            </div>
          </div>
          <!--reviews------>
          <div class="reviews">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="far fa-star"></i>
            <!--Empty star-->
          </div>
        </div>
        <!--Comments---------------------------------------->
        <div class="client-comment">
          <p>dsdsa sakldlka asld slkskldsdlks ewekesdsdjkdj skskssk skssksk skssksks sksksks sksksjs sksks kassaksk skdksk skdskdj askdasj asdkasjd asldksa lasd askla dasl asldaksd lad askdal adslkaskd lads askaldka alsdkaslda adkalsdk adsdkasl adklasdl
            kaldakd aas dasdklasdask asldkaslsdk asldsakdl kassaksk skdksk skdskdjff askdasj asdkasjd asldksa lasd askla dasl asldaksd lad askdal adslkaskd lads askaldka alsdsdkaslda adkalsdk adsdkasl adklasdl kaldakd aas dasdklasdask asldkaslsdk asldsakdl
            sad kassaksk skdksk skdskdj askdasj asdkasjd asldksa lasd askla dasl asldaksd lad askdal adslkaskd lads askaldka alsdkaslda ff adkalsdk fffadsdkasl adklasdl kaldakd aas dasdklasdask asldkaslsdk asldsakdl fddfkassaksk skdfdfksk skdskdj askdasj
            asdkasjd asldksa lasd askla dasl asldaksd lad askdal adslkaskd lads askaldka alsdkaslda adkalsdk adsdkasl adklasdl kaldakd aas dasdklasdask asldkaslsdk asldsakdl</p>
        </div>
      </div>
      <!--BOX-2-------------->
      <div class="testimonial-box">
        <!--top------------------------->
        <div class="box-top">
          <!--profile----->
          <div class="profile">
            <!--img---->
            <div class="profile-img">
              <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" />
            </div>
            <!--name-and-username-->
            <div class="name-user">
              <strong>Noah Wood</strong>
              <span>@noahwood</span>
            </div>
          </div>
          <!--reviews------>
          <div class="reviews">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <!--Empty star-->
          </div>
        </div>
        <!--Comments---------------------------------------->
        <div class="client-comment">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quaerat quis? Provident temporibus architecto asperiores nobis maiores nisi a. Quae doloribus ipsum aliquam tenetur voluptates incidunt blanditiis sed atque cumque.</p>
        </div>
      </div>
      <!--BOX-3-------------->
      <div class="testimonial-box">
        <!--top------------------------->
        <div class="box-top">
          <!--profile----->
          <div class="profile">
            <!--img---->
            <div class="profile-img">
              <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" />
            </div>
            <!--name-and-username-->
            <div class="name-user">
              <strong>Oliver Queen</strong>
              <span>@oliverqueen</span>
            </div>
          </div>
          <!--reviews------>
          <div class="reviews">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="far fa-star"></i>
            <!--Empty star-->
          </div>
        </div>
        <!--Comments---------------------------------------->
        <div class="client-comment">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quaerat quis? Provident temporibus architecto asperiores nobis maiores nisi a. Quae doloribus ipsum aliquam tenetur voluptates incidunt blanditiis sed atque cumque.</p>
        </div>
      </div>
      <!--BOX-4-------------->
      <div class="testimonial-box">
        <!--top------------------------->
        <div class="box-top">
          <!--profile----->
          <div class="profile">
            <!--img---->
            <div class="profile-img">
              <img src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png" />
            </div>
            <!--name-and-username-->
            <div class="name-user">
              <strong>Barry Allen</strong>
              <span>@barryallen</span>
            </div>
          </div>
          <!--reviews------>
          <div class="reviews">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="far fa-star"></i>
            <!--Empty star-->
          </div>
        </div>
        <!--Comments---------------------------------------->
        <div class="client-comment">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quaerat quis? Provident temporibus architecto asperiores nobis maiores nisi a. Quae doloribus ipsum aliquam tenetur voluptates incidunt blanditiis sed atque cumque.</p>
        </div>
      </div>
    </div>
  </section>
</body>

, so that if the text is very long, add a “Load more” button. When “Load more” is pressed, show the entire text, when pressed again, hide that section.

I added scrollbar and added fixed height:

.client-comment
{
  height:100px;
  overflow-y:scroll;
}

,
but on mobile is a bit weird.

How can I add the “Load more” button and functionality?

Broadcasting a transaction to bitcoin testnet using Javascript

how can I broadcast my transaction to the bitcoin testnet(blockstream.com). I already have the signed transaction object but I keep getting an error that says, “BigInt can’t be serialized to json”
My problem is how am supposed to pass the transaction object to the axios request body.
Any help will be much appreciated.

Am trying to broadcast a bitcoin transaction to a bitcoin testnet (blockstream.com) but I keep getting an error that says, “BigInt can’t be serialized to json”.

Is there a way to disable fontScaling for items listed in the react-native-dropdown-picker?

I have tried everything I could find in relation to this particular problem but nothing seems to work.

Tried wrapping the component in a view(long shot manic attempt atp) and disabling fontScaling, still nothing.

I understand there are accessibility concerns with this approach, but I am having troubles getting them item to maintain its visibility within the component. so I am open to all alternatives you might have.

Here’s my code below:

import DropDownPicker from 'react-native-dropdown-picker';

 return (
        <View style={{}} allowFontScaling={false}>
            <DropDownPicker
                placeholder={placeholder}
                open={open}
                value={value}
                items={items}
                style={{
                    backgroundColor: name != 'contactExpert' ? '#EAE3E1' : '#f9fafb',
                    borderColor: 'lightgrey',
                }}
                // textStyle={{ 
                //     allowFontScaling: false,
                // }}
                autoScroll={true}

                dropDownContainerStyle={{
                    borderColor: "lightgrey",

                }}
                allowFontScaling={false}
                onOpen={() => handleFlashScrollIndicator()}
                itemSeparator={true}
                itemSeparatorStyle={{
                    borderBottomWidth: 1,
                    borderColor: "lightgrey",
                    allowFontScaling: false

                }}
                listItemContainerStyle={{
                    alignContent: "center",
                    backgroundColor: name === 'contactExpert' ? 'seashell' : '#fff',
                    allowFontScaling: false

                }}
                listItemLabelStyle={{
                    color: 'black',
                    allowFontScaling: false,
                    adjustsFontSizeToFit: false,

                }}
                dropDownDirection="BOTTOM"
                scrollViewProps={{
                    showsVerticalScrollIndicator: true,
                    ref: scrollViewRef,
                    persistentScrollbar: true,
                    allowFontScaling: false

                }}
                selectedItemLabelStyle={{
                    fontWeight: "bold",
                    allowFontScaling: false


                }}
                selectedItemContainerStyle={{
                    backgroundColor: "lightblue",
                    allowFontScaling: false

                }}

                setOpen={setOpen}
                setValue={setValue}
                setItems={setItems}
                onSelectItem={(item) => { handleDropDownChange(item) }}
                renderSeperator={() => {
                    return (
                        <Text allowFontScaling={false}>{" "}</Text>
                    );
                }}
            />
        </View>
    );

sort chapters javaScript [closed]

let chapters = document.querySelectorAll('ul')
let arraysOfLi = []

chapters.forEach(function(ul) {
  let liArray = Array.from(ul.querySelectorAll('li'))
  arraysOfLi.push(liArray)
})

arraysOfLi.forEach(function(ul) {
  ul.sort(function(a, b) {
    let textA = a.textContent.trim().toUpperCase()
    let textB = b.textContent.trim().toUpperCase()
    return (textA > textB) ? 1 : -1
  })
})

for (let i = 0; i < chapters.length; i++) {
  for (let j = 0; j < arraysOfLi[i].length; j++) {

  }
}

Есть несколько списков ul. Внутри них есть список глав и требуется сортировка.

arraysOfLi список с книгами и главами, после сделал сортировку и не знаю как внести изменения в HTML

Wrap element with another div with class names

So I’ve browsed around a lot looking for an answer, but I couldn’t find anything that meets what I’m looking for.

So I’m editing a forum, that’s very locked in terms of adding new css classes to customize the look. So, I want to set it so, I can add a div class before the fixed class.

Example of the fixed class:

<div class="titlemedium"> </div>

What I’m trying to do using Jquery:

<div class="divthatcomesbefore"> <div class="titlemedium"> </div> </div>

Basically, I want the divthatcomesbefore to auto wrap around the titlemedium using JS, and I have no idea how to do it. Please help.

This is the script I tried to write, needless to say, it didn’t work.

<script> $(".divthatcomesbefore").before('<div class="titlemedium"></div>'); </script>

How to use cellTemplate in calendarOptions of devextreme react DateBox?

It appears that the demo on devextreme-react for cellTemplate is just another use of cellRender.

Although it was mentioned that both cellComponent and cellRender are just:

An alias for the cellTemplate property specified in React.

It does not work when I tried to customize the cells in the calendar for DateBox (for example, as I want to change the color of weekends to red):

import React from 'react';
import DateBox from 'devextreme-react/date-box';
import moment from 'moment';

const CustomDateBox = () => {
  const isWeekend = (date) => [0, 6].includes(moment(date).day());

  const renderCell = (cellData) => (
    <div style={{ color: isWeekend(cellData.date) ? 'red' : 'inherit' }}>
      {cellData.text}
    </div>
  );

  return (
    <DateBox
      labelMode="hidden"
      openOnFieldClick={true}
      hoverStateEnabled={false}
      calendarOptions={{
        cellTemplate: renderCell
      }}
    />
  );
};

export default CustomDateBox;

And it returns a plank calendar with no context in it, even though the “cells” are still clickable.

Edit devextreme-react-datebox-with-celltemplate

I get glitches using time stretching algorithm

I am using an algorithm I’ve found on github to timestretch audio.

The results are fairly correct but not sufficient, glitches can be heard mainly on bass sounds.

The implemtation relies on a specific phase vocoder technic and I’m highly unqualified to see where the problem could come from.

I’ve investigated a bit and found the fft algorithm was used in other projects so the problem may not come from here.I’ll try to provide an example but for the moment here is the repo with the code:

https://github.com/velochy/audio-tempo-changer.js/blob/master/src/audio_tempo_changer.js

Is it possible to swap out React component definition without changing component identity (to maintain state/refs etc)? If so, how?

I’m working on a development tool that lets you create React components.

A user will start off with their component looking like:

function MyComponent() {
  var rand = useRef(Math.random());

  return <div>{rand}</div>;
}

but then might want to modify it like so:

function MyComponent() {
  var rand = useRef(Math.random());

  return <span>{rand}</span>;
}

The only meaningful change here was , so ideally for me, that random number wouldn’t change because the ref would be preserved – but React seems to detect the change in reference to the component definition when considering its identity: MyComponent !== MyComponent (new) and outputs a different random value.

This is similar to implementing HMR (Hot Module Reloading) myself – but constrained to just react component definitions.

Here is a working example to play with: https://jsfiddle.net/83xruyL5/1/

Is there any way of modifying this React behavior with something like a name/id/key attribute on the definition? Or perhaps a more generic JS approach of preserving/reusing a function/component reference while modifying its definition?

I assume this may not be possible, and am just going to be limited by React here, but am asking just in case it is.

ag grid get current column headers

I’m using ag-grid community via plain js. I want to get the column header text for each column on load which i’m currently doing via the onFirstDataRendered event.

I then loop through all columns and get the value of headerName from the colDefs for each column. This works but only if I manually set the headerName in the colDefs when creating my grid. AG grid will auto create a header name based on the field name if headerName is not manually added. So my current solution isn’t actually getting the current column headers but instead the headers that were manually set.

How can i get the actual column headers that ag grid uses?

Here is my current flawed solution.

 onFirstDataRendered: (event) =>{
        event.api.getAllGridColumns().forEach(column => {
            console.log(column);
            console.log(column.colDef.headerName)// only works if I manually set headername 
        });
    }

Providing seperate ref attribute to multiple element in reacJS

I am trying to build a simple to-do list where each task can be edited by clicking on edit button which shows a previously hidden text field in which user can enter new name for the current task, for this I need to assign a ref value to each task so far I have tried

   let refrences = useRef([]);               
   //this is within a array.map method
   <input type='text' ref={refrences.current[index]}  /> 
   //some code here

But refrences.current[index] always shows as undefined and I have no idea why that’s the case but when I try the following(found it online)

   let refrences = useRef([]);  
   //this is within a array.map method                  
   <input type='text' ref={element => refrences.current[index]=element}  /> 
   //some code here

This works perfectly fine but I have no idea why this works. I know this is an arrow function but I can’t tell what the ‘element’ stands for even though it has not been defined anywhere else. Any help would be appreciated

Ho do I remove spacing/padding between series in a Highcharts X-Range chart?

I am trying to remove the extra padding/space added between the series in a Highcharts X-Range chart. Reason being that I need the datapoints to be on the correct Y-axis value but be different series.

Running with just one series seems to show this correctly. However adding a second series seems to shift everything.

Documentation suggests that “pointPlacement: ‘on'” should solve it, but it doesn’t.

Example with two series (incorrect placement on y-axis):
https://jsfiddle.net/63hqgm21/

Highcharts.chart('container', {
    chart: {
        type: 'xrange',
        pointPlacement: 'on'
    },
    title: {
        text: 'Highcharts X-range'
    },
    plotOptions: {
      series: {
        pointPlacement: 'on'
      }
    },
    xAxis: {
        type: 'datetime',
        min: Date.UTC(2014, 10, 21, 0, 0),
        max: Date.UTC(2014, 10, 21, 24, 0),
        gridLineWidth: 1,
        labels: {
            format: '{value:%H}',
            tickInterval: 3600 * 1000
        }
    },
    yAxis: {
          gridLineWidth: 1,
        min: 0,
        title: {
            enabled:false
        }
    },
    series: [{
        name: 'Project 1',
        className: "series_0",
        pointPadding: 0,
        pointWidth: 5,
        groupPadding: 0,
        data: [
            {
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 1
        },{
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 2
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    },
    {
        name: 'Project 2',
        className: "series_1",
        pointPadding: 0,
        pointWidth: 5,
        groupPadding: 0,
        data: [
            {
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 3
        },{
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 4
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    }
    ]
});

Example with one serie (correct placement on y-axis):
https://jsfiddle.net/63hqgm21/1/

Highcharts.chart('container', {
    chart: {
        type: 'xrange',
        pointPlacement: 'on'
    },
    title: {
        text: 'Highcharts X-range'
    },
    plotOptions: {
      series: {
        pointPlacement: 'on'
      }
    },
    xAxis: {
        type: 'datetime',
        min: Date.UTC(2014, 10, 21, 0, 0),
        max: Date.UTC(2014, 10, 21, 24, 0),
        gridLineWidth: 1,
        labels: {
            format: '{value:%H}',
            tickInterval: 3600 * 1000
        }
    },
    yAxis: {
          gridLineWidth: 1,
        min: 0,
        title: {
            enabled:false
        }
    },
    series: [{
        name: 'Project 1',
        className: "series_0",
        pointPadding: 0,
        pointWidth: 5,
        groupPadding: 0,
        data: [
            {
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 1
        },{
            x: Date.UTC(2014, 10, 21, 4, 15),
            x2: Date.UTC(2014, 10, 21, 19, 15),
            y: 2
        }, 
        ],
        dataLabels: {
            enabled: true
        }
    }
    ]
});

Leva: create control that depends on another control

I’m using Leva js to create a simple panel that includes a button that creates an array of random numbers. The length of that array should depends on the property datasetLength of Leva panel but it seems not to work because of:

Uncaught ReferenceError: Cannot access ‘levaConfig’ before initialization

Here my code:

import { useState } from "react";
import { useControls, button } from "leva";

function App() {
  const [dataset, setDataset] = useState<Datum[]>(computeRandomDataset);

  const levaConfig = useControls({
    "update dataset": button(() => setDataset(computeRandomDataset)),
    datasetLength: {
      value: 300,
      min: 0,
      max: 500,
      step: 1,
    },
  });

  function computeRandomDataset() {
    const datasetLength = levaConfig.datasetLength; // <-- ERROR
    return createDataset(datasetLength);
  }

  return <h1>Vite + React</h1>;
}

export default App;

function createDataset(datasetLength: number) {
  const dataset = [];
  for (let i = 0; i < datasetLength; i++) {
    dataset.push(Math.random());
  }
  return dataset;
}

The result should be this:
enter image description here

express post request can not find body and it’s contentes

Here is my javascript code:

 const handleClick = () => {
    const fd = new FormData();
    fd.append("desc", value);
    fetch("http://localhost:5000/notes/create", {
      method: "POST",
      body: fd,
    }).then((res) => {
      alert(result);
    });
  };

The express server code:

app.post("/notes/create", (req, res) => {
  console.log(req.body);
  res.json(req.body);
});

Here is the api request result:

enter image description here

And this is in my terminal:

enter image description here

I had a hope that on calling the function above will log the body object to the console, but this is not happening.

Note: I have already tried adding app.use(express.json()), but it doesn’t work for me either.
If you are reading this without thinking TLDR; Thank you for your patience. Any help is highly appreciated.

Angular nativeElement is Undefined

I’m trying to generate a PDF from HTML content in an Angular application.

Here’s my parent component:

Parent Component HTML:

<div class="container-fluid">
    <!-- ... other HTML content ... -->
    <div class="table-responsive">
        <table class="table" #pdfTable>
            <!-- Table content -->
        </table>
    </div>
    <app-pdf-explosion-insumos-proyecto [tableElement]="pdfTable"></app-pdf-explosion-insumos-proyecto>
</div>

Parent Component TypeScript:

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
// ... other imports ...

@Component({
  selector: 'app-explosion-insumos-concepto',
  templateUrl: './explosion-insumos-concepto.component.html',
  styleUrls: ['./explosion-insumos-concepto.component.css']
})
export class ExplosionInsumosConceptoComponent implements OnInit {
  // ... other properties ...

  @ViewChild('pdfTable', { static: false }) pdfTable: ElementRef;

  // ... constructor and ngOnInit ...
}

And here’s my child component:

Child Component HTML:

<button type="button" mat-raised-button mat-min-fab class="btn btn-error btn-round btn-fab float-right" (click)="downloadPDF()">
    <i class="material-icons">picture_as_pdf</i>
</button>

Child Component TypeScript:

import { Component, ElementRef, OnInit, Input, ViewChild } from '@angular/core';
import 'moment/locale/es'; 
import { jsPDF } from 'jspdf';
import html2canvas from 'html2canvas';


@Component({
  selector: 'app-pdf-explosion-insumos-proyecto',
  templateUrl: './pdf-explosion-insumos-proyecto.component.html',
  styleUrls: ['./pdf-explosion-insumos-proyecto.component.css']
})

export class PdfExplosionInsumosProyectoComponent implements OnInit {
  @Input() tableElement: ElementRef;

  constructor() {}

  ngOnInit(): void {}

  downloadPDF() {
    if (this.tableElement) {
      html2canvas(this.tableElement.nativeElement).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const doc = new jsPDF({
          orientation: 'landscape',
          unit: 'px',
          format: [canvas.width, canvas.height]
        });
        doc.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
        doc.save('tabla-explosion-insumos.pdf');
      });
    }
  }
}

I’m passing the HTML table from the parent component to the child component, and I can successfully obtain the HTML code of the parent in the child. However, when I try to perform operations that require nativeElement, it appears to be undefined.