Category: javascript

Category Added in a WPeMatico Campaign

CSS putting a long line through the middle of my website

I am making a website on Weebly and I put the CSS in my header code, and then embedded the words/content using html as an element on the bottom of my page. For some reason this snippet of the CSS which is supposed to create the line for my vertical timeline, extends through the whole page rather than just being for my Vertical Timeline element on the bottom of my site.

.container:before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: #CCD1D9;
   z-index: 1

What can I edit in my CSS to stop this from happening?

Here is the full CSS:

<style type="text/css">

     * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   outline: none;
}

body {
   margin: 0;
   padding: 30px 0;
   font-family: 'Roboto', sans-serif;
   background: #F1F2F6;
}

h1 {
   text-align: center;
   font-weight: 300;
   color: #777
}

h1 span {
   font-weight: 600;
}

.bolded { font-weight: bold; 
}

.container {
   width: 80%;
   padding: 50px 0;
   margin: 50px auto;
   position: relative;
   overflow: hidden;
}

.container:before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -1px;
   width: 2px;
   height: 100%;
   background: #CCD1D9;
   z-index: 1
}

.timeline-block {
   width: -webkit-calc(50% + 8px);
   width: -moz-calc(50% + 8px);
   width: calc(50% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
}

.timeline-block-right {
   float: right;
}

.timeline-block-left {
   float: left;
   direction: rtl
}

.marker {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid #F5F7FA;
   background: #4FC1E9;
   margin-top: 10px;
   z-index: 9999
}

.timeline-content {
   width: 95%;
   padding: 0 15px;
   color: #666
}

.timeline-content h3 {
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 25px;
   font-weight: 500
}

.timeline-content span {
   font-size: 15px;
   color: #a4a4a4;
}

.timeline-content p {
   font-size: 14px;
   line-height: 1.5em;
   word-spacing: 1px;
   color: #888;
    margin-right: 30px;

}


@media screen and (max-width: 768px) {
   .container:before {
      left: 8px;
      width: 2px;
   }
   .timeline-block {
      width: 100%;
      margin-bottom: 30px;
    margin-right: 30px;
   }
   .timeline-block-right {
      float: none;
   }

   .timeline-block-left {
      float: none;
      direction: ltr;
   }
}


     </style>

How to get list of map values in Javascript? [duplicate]

I have the following object:

var people = [
    {
        "name": "James",
        "work": "Shake Shack"
    },
    {
        "name": "Stanley Hudson",
        "work": "IBM"
    }
]

Is there an easy way built into Javascript to allow me to get a list of values by their key?

For exemple if I want a list like ["Shake Shack", "IBM"], which is all the values in the array associated with the work key, how can I do?

I know how to do this manually with a loop but I’d really like to know if there’s some built-in functionality in Javascript that could do this for me.

jQuery detect mouseup on top of an element when the click started on a different element

I’m trying to detect when the mouse is released over a certain html element. I would like the mouseup event to fire no matter where the dragging started initially. Here is my attempt, which behaves very weirdly (sometimes it fires, sometimes not, sometimes I get two alerts):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        .box{
            background: rgb(255, 0, 0);
            width: 200px;
            aspect-ratio: 1;
        }

        .cube{
            background: #222;
            width: 200px;
            aspect-ratio: 1;
        }

    </style>

</head>
<body>

    <div class="box"></div>

    <div class="cube"></div>

    <script src="jquery-3.6.0.min.js"></script>
    <script src="jquery-ui.min.js"></script>

    <script>

        $( "body" ).click(function() {
          $( ".cube").mouseup(function(){
            alert('mouseup')
          });
        });


    </script>

    
</body>
</html>

Using the response of a Axios/NodeJS API call function as a parameter to make another API call

General concept: I am accessing two API endpoints. One responds with general information, and the other with specific information.

I have called the first endpoint and with the response, I return an object in the format that the second endpoint requires as a parameter.

Problem: I keep getting “Data after transformation must be a string, an ArrayBuffer, a Buffer, or a Stream”

I want to learn to use functions across controllers, so as not having to REPEAT myself.

Code:

This returns the object that I need to use in the second API call:

const axios = require("axios");
const getSpecials = async (req, res) => {
  try {
    const response = await axios.get(`${apiURL}/categories`);
    let specials = [];
    let skus = [];
    response.data.forEach((element, index) => {
      if (response.data[index].is_special == true) {
        specials.push({
          name: response.data[index].name,
          product_skus: response.data[index].product_skus,
          _id: response.data[index]._id,
        });
        skus.push(response.data[index].product_skus);
      }
    });
    return { product_skus: skus.flat() };
  } catch (error) {
    console.log(error.message);
  }
};

module.exports = {getSpecials}

This returns the product details if I post the return from the first API call as a parameter:

const axios = require("axios");
const { getSpecials } = require("./categoriesControllers");
const specialProducts = async (req, res) => {
  try {
    const response = await axios.post(`${apiURL}/products`, getSpecials);
    res.status(200).json(response.data);
  } catch (error) {
    console.log(error.message);
  }
};

Any suggestions on how best to do this would be great. I want learn to let the backend to do all the heavy lifting and I want to serve the data as cleanly as possible to the front end.

How to access a method within a async function within a same class in Javascript

I am trying to access MethodA within an async function inside MethodB, which is not accessible. But if i am trying outside async function it is working as expected. Below is the example.

class A{
constructor(){
}

async methodA(){
//Do something here
}

async methodB(){
await methodA(); //methodA is accessible in this line
await browser.getCurrentUrl().then(async function(){
await methodA(); //methodA is NOT accessible in this line
});
}
}

module.exports = new A(); //Using this to make the methods available in other places

Sharing a folder between react & node typescript

I’m working on a React & Nodejs smart-mirror, both using TypeScript and using a shared directory to store the mirror’s modules.
The project structure is as follows;

└── root
   ├── api (node)
      ├── node_modules
   ├── client
      ├── node_modules
   ├── modules
      ├── moduleName
         ├── index.tsx
         ├── helper.ts
         ├── types.ts

The helper file contains an express route, which is dynamically loaded, the index is the react component and the types is shared.
The api works works fine but the react app throws errors when the helper file contains the express router, or references the api code at all.

The react application then throws errors requiring modules inside the node_modules from the api when the helper code isn’t referenced in the react app at all, only the index file.
I have created this already without typescript but as soon as I added typescript the errors started to happen.

I have tried many different methods to exclude the helper files and even setting the react app to only load .tsx but I am still receiving the same errors.

Errors

Any help is much appreciated.

How to prevent scrollbar horizontally from displaying?

Problem

I was asked to do a task that is: Copy and align the same text besides (left and right) on hover

I’m facing an issue that is scrollbar is showing horizontally. I want to get rid of this. How can I fix this? Here is my code:

<div className="flex gap-x-10 w-auto h-auto text-primary font-bebas-neue text-5xl tablet:text-16xl laptop:text-20xl leading-10 cursor-pointer">
   <div onMouseEnter={() => setShowMQfor("cNd")}>
      <span>Devopssss</span>
   </div>
   {showMQfor === "cNd" && (
   <div>
      <span className="text-white">Devopsss</span>
      <span onMouseLeave={() => setShowMQfor("")}>Devopssss</span>
      <span className="text-white">Devopsss</span>
   </div>
   )}
</div>
{showMQfor === "cNd" && (
<Marquee gradient={false}>
   <ul className="flex gap-x-5 text-base tablet:text-5xl laptop:text-6xl font-bebas-neue uppercase opacity-60">
      <li>Lorem Ipsum</li>
      <li>&bull;</li>
      <li>Lorem Ipsum</li>
      <li>&bull;</li>
      <li>Lorem Ipsum</li>
      <li>&bull;</li>
   </ul>
</Marquee>
)}

Note: In addition, the text DEVOPSSSS right now placed three times hard coded. I want something dynamically, i mean calculate based on the screen width size and the text size. Don’t have any clue how to achieve this goal. If anyone could help this problem to solve.

How to get the shiny input id of current screen focus?

I defined my own rhansontable right-click event.

I have two rhandsontables on screen. Both are wrapped in uiOutput.

Now I right click a table cell “Action A”, and cusslct is assigned a new value.

The question is I want to know the right click from which table on the screen.

Any idea ?

insert_slct_vct_cus <- function(target_table) {
  rhandsontable::hot_context_menu(
    hot = target_table,
    # allowRowEdit = FALSE,
    # allowColEdit = FALSE,
    customOpts = list(
      schedule_editor_menu = list(
        name = "Select vector",
        callback = htmlwidgets::JS(
          "function(key, options) {
              var val = Math.random();
              Shiny.setInputValue(
                'body_ui_1-assumptions_ui_1-cusslct',
                val,
                {priority: 'event'});
          }"
        )
      )
    )
  )
}

angular-in-memory-web-api displays error 404

I done the heroes-tour and I want to do something similar but I have a problem with understand angular-in-memory-web-api. Look at my code:
clients-data.service.ts

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';

@Injectable({
  providedIn: 'root'
})
export class ClientsDataService implements InMemoryDbService{

  createDb(){
    const clients = [
      {id: 1, name: 'Jan Kowalski'},
      {id: 2, name: 'Grzegorz Brzęczyszczykiewicz'},
      {id: 3, name: 'Paweł Nowak'},
    ];
    return clients;
}
  constructor() { }
}

clients.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Client } from './client';

@Injectable({
  providedIn: 'root'
})
export class ClientService {
  private clientsURL = 'api/clients';
  constructor(
    private http: HttpClient,
  ) { }
  getClients(): Observable<Client[]> {
    return this.http.get<Client[]>(this.clientsURL)
  }
}

app.module.ts

//...
    HttpClientInMemoryWebApiModule.forRoot(
      ClientsDataService, { dataEncapsulation: false }
    )
//...

But in console display an error 404 for api/client. Where I make mistake?

How to get value of searchbox input field on bootstrap-select?

Here is my html code:

 <select id="myselect" class="selectpicker" data-live-search="true" placeholder="please type" data-live-Search-Placeholder="search">
   <option value="111">AAAAAAAAAAA</option>
   <option value="222">bbbbbbbbbbb</option>
   <option value="333">cccccccccc</option>
</select>

Here is my javascript code:

$(function(){
   var select1 = $('#myselect').selectpicker();
    //var mysearchkeyword = $('#myselect').selectpicker('search.initiated').val();
    //var mysearchkeyword = $('#myselect').selectpicker('search.input').val();
    var mysearchkeyword = $('#myselect').selectpicker('.bs-searchbox').val();

   select1.on('changed.bs.select', function (e) {
    alert(mysearchkeyword);
    
   });
})

Here is my fiddle: JSFiddle

I want to get the data of searchbox input in bootstrap-select. For example if I type “a” in searchbox I want it to get the “a” as alert message. I read this guide and tried a few ways but it didn’t work. Can you please help me?

Thanks in advance.

Django views with SSE and external scripts

If there is a better way to accomplish this, please let me know. I need to synchronously process data outside of a view, then only after data is processed in an external function redirect or open a new view.

  • File is uploaded from an HTML page, which routes the file to views.
  • Threading in views begins processing data in script outside of views.
  • Views returns a view to display the data as it’s being processed using SSE.
  • External script sends data using send_event('test', 'message',{'text': stuff}

Here’s where I’m stuck: I’ve tried using the Javascript event listener to watch for certain text that then does a window.open('newview'), as I have a view that downloads the CSV the script creates. I’m having a problem going from one view (with an active SSE connection) to another while waiting on the thread that is processing data to finish. I’ve tried a second thread in views.py that returns another response when thread x is finished.

I have to return render from the first view so that the live data shows to the client.

Html for upload:

<form action="/viewFunction/" method="POST" enctype="multipart/form-data" form target="_blank">
    {% csrf_token %}    
    <input type="file" id="fileform" name="filename">
    <input type="submit" id="fileform">

views.py:

def viewFunction(request):

    csv = pd.read_csv(request.FILES['filename'])
    file is uploaded from an html form
    x = threading.Thread(target=external.script, args=[csv])
    x.setDaemon(False)
    x.start()
        
    return render(request, 'html_that_displays_SSE_output.html')

external script.py:

iterate over CSV, making API calls
build CSV based on server responses
send_event('test', 'message', {'text': data}

accessing objects in new array

const lineExampleOne = [{
    weight:150,
    floor: 2,
    },{
    weight:200,
    floor: 3,
    },{
    weight:120,
    floor: 5,
    },{
    weight:80,
    floor: 2,
    },{
    weight:180,
    floor: 4,
    },{
    weight:170,
    floor: 4,
    }];

let newArray = [];

lineExampleOne.forEach((person)=>{
  newArray.push(person);
})

console.log(newArray);

this returns something like this [object Object],[object Object] etc…

How do I correctly add each object to my empty newArray? How do I properly access each objects properties from my newArray? and is there a way to test how many unique values I have for floors and weight of all the objects in my newArray?

document.getElementById(“mydiv”) returning null

I am trying to make a div element draggable in react with typescript, following is the code

function dragElement(elmnt:HTMLElement) {
 var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0
 if (document.getElementById(elmnt.id + "header")) {
   document.getElementById(elmnt.id + "header")!.onmousedown = dragMouseDown
 } else {
   elmnt.onmousedown = dragMouseDown;
 }

 function dragMouseDown(e:MouseEvent) {
   e = e || window.event;
   e.preventDefault();
   pos3 = e.clientX;
   pos4 = e.clientY;
   document.onmouseup = closeDragElement;
   document.onmousemove = elementDrag;
 }

function elementDrag(e:MouseEvent) {
  e = e || window.event;
  e.preventDefault();
  pos1 = pos3 - e.clientX;
  pos2 = pos4 - e.clientY;
  pos3 = e.clientX;
  pos4 = e.clientY;
  elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}

function closeDragElement() {
  document.onmouseup = null;
  document.onmousemove = null;
  }
 }

if (document.getElementById("mydiv") != null) {
dragElement(document.getElementById("mydiv")!);
}

  export const PopUpCommon= () =>{ 
    return(
    <div id="mydiv">
    <div id="mydivheader">Click here to move</div>
    <p>Move</p>
    <p>this</p>
    <p>DIV</p>
  </div> 
  )}

Here I am checking document.getElementById(“mydiv”) is null or not to avoid the console error ‘Cannot read properties of null (reading ‘id’)’, since that is returning null dragElement is not getting called. Why is that returning null even if an element with the id “mydiv” is present ?