Category: javascript

Category Added in a WPeMatico Campaign

Sticky topbar not “sticking” to the top

So this is my code… it’s my first time trying to create a code for a website, so I’m sorry if the code is a little bit of a mess, but I’m only worried about the section “section#TOP_BAR_SECTION” as it was supposed to stick to the top of the page but it does not

<!DOCTYPE html>
<html>
<head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
      @import url('https://fonts.googleapis.com/css?family=Monoton');

      html, body {
        margin: 0px;
        border: 0px;
        padding: 0px;

        width: fit-content;
        height: fit-content;

    overflow-x: hidden;
        overflow-y: auto;

        background-color: #191919;
        background-image: url('img_tree.gif');
        background-image: url('imagens/pagina_inicial/congresso_nacional_escurecido_70.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;

        color: white;
        font-family: Arial, Helvetica, sans-serif;
      }

      section#WHOLE_PAGE{
        margin: 0px;
        border: 0px;
        padding: 0px;
        
        top: 0px;
        left: 0px;
        
        width: fit-content;
        height: fit-content;
        
        overflow: auto;
      }

      section#SIDE_MENU_SECTION {
        margin: 0px;
        border: 0px;
        padding: 0px;
        padding-top: 10vw; 
        
        height: 100%;
        width: 0px;
        
        position: fixed; 
        z-index: 1; 
        top: 0px; 
        left: 0px;
        
        display: block;
        
        background-color: lightgray; 
        overflow-x: hidden; 
        
        transition: 0.75s; 
        
        .side_menu_div1{
          height: 100%;
          width: 0px;
          
          transition: 0.75s;
        }
        
        .side_menu_close_btn{
          margin: 0px;
          border: 0px;
          padding: 0px;
          
          font-size: max(50px,10vw);
          text-decoration: none;
          color: white;
          
          position: absolute;
          top: 0px;
          right: 1vw;
        }
        
        .side_menu_text {
          margin: 0px;
          border: 0px;
          padding: 0px;
          
          
          display: block;
          
          font-size: max(25px,2.5vw);
          text-decoration: none;
          color: white;
          
          transition: 0.5s;
        }
        
        .side_menu_text:hover {
          border: 0.5vw dashed white;
          
          cursor: pointer;
          
          font-size: 3vw;
          font-weight: bold;
          text-decoration: none;
          color: black;
        }
      }
      
      section#MAIN_CONTENT_SECTION {
        margin: 0px;
        margin-left: 0px;
        border: 0px;
        padding: 0px;
        
        width: fit-content;
        height: fit-content;
        
        overflow-x: hidden;
        overflow-y: auto;
        
        transition: margin-left .75s;
        transition-delay: 0s;
        list-style-type: none;   
      }
      
      section#TOP_BAR_SECTION {

        background-color: black;
        color: black;

        height: fit-content;
    width: fit-content;

    transition: width 0.75s;

        overflow: hidden;

        position: sticky;
        top: 0%;
        left: 0%;
    z-index: 10;

    .top_bar_div1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          height: max(50px,10vh);

          position: relative;
          top: 0px;
          left: 0px;
        }

        .top_bar_div1_logo1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          font-family: 'Monoton', cursive;
          font-size: max(15px,3vh);
          font-weight: 400;
          
          text-align: center;

          width: fit-content;

          position: absolute;
          justify-content: left;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        
        .top_bar_div1_logo1:hover{
          cursor: pointer;  
        }

        .top_bar_div1_menu1{
          margin: 0px;
          border-left: 0px;
          border-right: 0px;
          border-top: max(75px,10vh);
          border-bottom: max(75px,10vh);
          border-color: #FBFFA0;
          border-style:solid;
          padding: 0px;

          background-color: #FBFFA0;
          color: black;
          font-family: Arial, Helvetica, sans-serif;
          font-size: max(22.5px,3vh);
          font-weight: 400;
          
          text-align: center;

          width: fit-content;

          position: absolute;
          justify-content: center;
          top: 50%;
          left: 0%;
          z-index: 10;
          transform: translate(0%, -50%);
        }

        .top_bar_div1_menu1:hover{
          background-color: #F4FF00;
          border-color: #F4FF00;
          
          cursor: pointer; 
          
          color: black;
          font-weight: bold;
        }
      }

      section#CONTENT_SECTION {

        background-color: transparent;

        height: fit-content;
        width: fit-content;

        transition: width 0.75s;
        
        .content_div1{
          width: fit-content;
          
          position: relative;
          justify-content: center;
          top: 0px;
          left: 0px;
        }
        
        .content_div1_div1{
          margin: 0px;
          border: 0px;
          padding: 0px;
          padding-top: 5vh;
          padding-bottom: 2.5vw;
          
          display: inline-block;
          
          width: fit-content;
          
          position: relative;
          justify-content: center;
          top: 0px;
          left: 0px;
          
          justify-content: center;
          left: 50%;
          transform: translate(-50%, 0);
        }
        
        .content_div1_div1_text1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          color: white;
          font-family: Arial, Helvetica, sans-serif;
          font-size: max(50px, 7vw); 
          -webkit-text-stroke-width: max(1px, 0.14vw);
          -webkit-text-stroke-color: black;

          text-align: center;

          justify-content: center;
        }
        
        .content_div1_div1_logo1{
          margin: 0px;
          border: 0px;
          padding: 0px;

          font-family: 'Monoton', cursive;
          font-size: max(50px, 7.5vw);
          font-weight: 400;

          text-align: center;

          justify-content: center;
        }
        
        .content_div1_div2_p{
          margin: 0px;
          border: 0px;
          padding: 10%;
          padding-top: 2.5vw;
          padding-bottom: 2.5vw;
          
          text-indent: 3vw;
          text-align: justify;
          font-size: max(21.42px,3vw);
          -webkit-text-stroke-width: max(0.42px, 0.06vw);
          -webkit-text-stroke-color: black;
        }
      }

      /* Efeito de Neon na logo do POLITICAGEM */
      @-webkit-keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}

    </style>
</head>
<body>
  <section id="WHOLE_PAGE">
    <section id="SIDE_MENU_SECTION">
      <div id="Side_Menu_Div1" class="side_menu_div1">
        <a id="Side_Menu_Close_Btn" class="side_menu_close_btn" href="javascript:void(0)" onclick="CloseSideMenu()">&times;</a>
        <a id="Side_Menu_Option1" class="side_menu_text" href="#" onclick="location.href = 'sobre.html';">Option1</a>
        <a id="Side_Menu_Option2" class="side_menu_text" href="#">Option2</a>
        <a id="Side_Menu_Option3" class="side_menu_text" href="#">Option3</a>
        <a id="Side_Menu_Option4" class="side_menu_text" href="#">Option4</a>
        <a id="Side_Menu_Option5" class="side_menu_text" href="#">Option5</a>
      </div>
    </section>

    <section id="MAIN_CONTENT_SECTION">
      <section id="TOP_BAR_SECTION">
        <div id="Top_Bar_Div1" class="top_bar_div1">
          <h1 id="Top_Bar_Div1_Menu1" class="top_bar_div1_menu1" onclick="OpenSideMenu();" href="#">&#9776 Menu</h1>
          <h1 id="Top_Bar_Div1_Logo1" class="top_bar_div1_logo1" onclick=";">TEXT</h1>
        </div>
      </section>

      <section id="CONTENT_SECTION">
        <div id="Content_Div1" class="content_div1">
          <div id="Content_Div1_Div1" class="content_div1_div1">
            <h1 id="Content_Div1_Div1_Text1" class="content_div1_div1_text1">Text</h1>
            <h1 id="Content_Div1_Div1_Logo1" class="content_div1_div1_logo1">Text</h1>
          </div>
          <div id="Content_Div1_Div2" class="content_div1_div2">
            <p id="Content_Div1_Div2_P1" class="content_div1_div2_p">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
            <p id="Content_Div1_Div2_P2" class="content_div1_div2_p">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>
          </div>
        </div>
      </section>
    </section>
  </section>
<script defer>
  const SIDE_MENU_SECTION = window.document.getElementById("SIDE_MENU_SECTION");
  const SIDE_MENU_DIV1 = window.document.getElementById("Side_Menu_Div1");
  
  const MAIN_CONTENT_SECTION = window.document.getElementById("MAIN_CONTENT_SECTION");
  const TOP_BAR_SECTION = window.document.getElementById("TOP_BAR_SECTION");
  const TOP_BAR_DIV1 = window.document.getElementById("Top_Bar_Div1");
  const CONTENT_SECTION = window.document.getElementById("CONTENT_SECTION");
  const CONTENT_DIV1 = window.document.getElementById("Content_Div1");

  var Client_width;
  var Client_height;
  
  var Side_menu_section_width;
  var Max_width_for_side_menu;
  
  var Loaded = false;

  UpdateVariables1();
  ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  
  /* Quando a pagina terminar o Load, muda o estado da variável Loaded, para garantir que a página está carregada*/
  window.onload = PageLoaded;

  function PageLoaded(){
    Loaded = true;
  }

  function MainTransitions(New_Time = "0.75s"){
    SIDE_MENU_SECTION.style.transitionDuration = New_Time;
    SIDE_MENU_DIV1.style.transitionDuration = New_Time;
    
    MAIN_CONTENT_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_DIV1.style.transitionDuration = New_Time;
    CONTENT_SECTION.style.transitionDuration = New_Time;
    CONTENT_DIV1.style.transitionDuration = New_Time;
  }
  
  function UpdateVariables1(){
    Client_width = document.documentElement.clientWidth;
    Client_height = document.documentElement.clientHeight;
    
    Side_menu_section_width = SIDE_MENU_SECTION.offsetWidth;
    Max_width_for_side_menu = Math.max(540,Client_width/3.0);
  }
  
  function SideMenuResize(New_Width = 0){
    SIDE_MENU_SECTION.style.width = New_Width + "px";
    SIDE_MENU_DIV1.style.width = New_Width + "px";

    MAIN_CONTENT_SECTION.style.marginLeft = New_Width + "px";
  }
  
  function ContentResize(Page_Width = 0,Front_Page_Height = 0){
    TOP_BAR_DIV1.style.width = Page_Width + "px";
    
    CONTENT_DIV1.style.width = Page_Width + "px";
  }
  
  function ResizeAllContent(Side_Menu_New_Size = 0,Main_New_Width = 0,Main_New_Height = 0){
    SideMenuResize(Side_Menu_New_Size);
    
    ContentResize(Main_New_Width,Main_New_Height);
  }

  window.addEventListener("resize",debounce(function(e){  
    UpdateVariables1();
    if (Side_menu_section_width === undefined || Side_menu_section_width === null) {
      
    }else {
      if (Loaded) {       
        if (Side_menu_section_width === 0) {
          MainTransitions("0s");
      
          UpdateVariables1();
          
          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
    
          UpdateVariables1();

          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }else {
          MainTransitions("0s");
      
          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));

          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }
      }else {
   
      }
    }
  }));

  function debounce(func){
    var timer;
    return function(event){
      if(timer) clearTimeout(timer);
      timer = setTimeout(func,100,event);
    };
  }

  function OpenSideMenu() {
    MainTransitions("0.75s");
    
    UpdateVariables1();
    
    ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

  function CloseSideMenu() {
    MainTransitions("0.75s");
    
    UpdateVariables1();
    
    ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

/* Efeitos de neon para a Top_Bar_Logo1*/
  const Top_Bar_Logo1_Target = window.document.getElementById("Top_Bar_Div1_Logo1");

  const Top_Bar_Logo1_FlickerLetter = letter => `<span style="animation: text-flicker-in-glow ${Math.random()*4}s linear both ">${letter}</span>`
  const Top_Bar_Logo1_ColorLetter = letter => `<span style="color: hsla(${Math.random()*600}, 100%, 80%, 1);">${letter}</span>`;
  const Top_Bar_Logo1_FlickerAndColorText = text => 
    text
      .split('')
      .map(Top_Bar_Logo1_FlickerLetter)
      .map(Top_Bar_Logo1_ColorLetter)
      .join('');
  const Top_Bar_Logo1_NeonGlory = Top_Bar_Logo1_Target => Top_Bar_Logo1_Target.innerHTML = Top_Bar_Logo1_FlickerAndColorText(Top_Bar_Logo1_Target.textContent);
  Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Target);

  const Top_Bar_Logo1_Letters = Top_Bar_Logo1_Target.querySelectorAll('span');
  for (let i = 0; i < Top_Bar_Logo1_Letters.length; i++) {
    Top_Bar_Logo1_Letters[i].addEventListener('click', () => Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Letters[i]));
  }


/* Efeitos de neon para a Front_Page_Logo1*/
  const Front_Page_Logo1_Target = window.document.getElementById("Content_Div1_Div1_Logo1");

  const Front_Page_Logo1_FlickerLetter = letter => `<span style="animation: text-flicker-in-glow ${Math.random()*4}s linear both ">${letter}</span>`
  const Front_Page_Logo1_ColorLetter = letter => `<span style="color: hsla(${Math.random()*600}, 100%, 80%, 1);">${letter}</span>`;
  const Front_Page_Logo1_FlickerAndColorText = text => 
    text
      .split('')
      .map(Front_Page_Logo1_FlickerLetter)
      .map(Front_Page_Logo1_ColorLetter)
      .join('');
  const Front_Page_Logo1_NeonGlory = Front_Page_Logo1_Target => Front_Page_Logo1_Target.innerHTML = Front_Page_Logo1_FlickerAndColorText(Front_Page_Logo1_Target.textContent);
  Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Target);

  const Front_Page_Logo1_Letters = Front_Page_Logo1_Target.querySelectorAll('span');
  for (let i = 0; i < Front_Page_Logo1_Letters.length; i++) {
    Front_Page_Logo1_Letters[i].addEventListener('click', () => Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Letters[i]));
  }

</script>

</body>
</html>

I’m not sure what I did wrong but the TOPBAR “section#TOP_BAR_SECTION” was supposed to stay on top because its position is sticky, but it does not keep itself on top of the page.

How to add Image in React? Image won’t show on localhost

I am trying to add an image within React. But my image won’t load.

This is the div I created for the image:

<div>
<Image src={devsimone} />
</div>

My imports:

import { BsFillMoonStarsFill } from "react-icons/bs";
import { AiFillLinkedin, AiFillGithub, AiOutlineMail } from "react-icons/ai";
import Image from "next/image";
import devsimone from "../public/public/portphoto.png";

Here is where my image is located in my directory:

Image in directory

Steps I’ve tried:

  • removing the image and adding it back
  • directly copying and pasting the images path from the directory.
  • moving the image around within the directory.

Unable to set state even when checking for mount

I am trying to set a state value using the useState method setCurrentBreakpoint so that I can use it in a if statement.

But I end up with following error.

index.js:1 Warning: Can’t perform a React state update on an unmounted
component. This is a no-op, but it indicates a memory leak in your
application. To fix, cancel all subscriptions and asynchronous tasks
in the componentWillUnmount method. in Media (at src/index.tsx:180)

It seems to be more an issue with the library as stated here.

https://github.com/ReactTraining/react-media/issues/139

I need this value to use it in the if statement shown below.

Anyway to get around this? Checking for mount doesn’t matter.

Tried with useRef just in case and same outcome.

Pls advice. Maybe a workaround without using state?

Checked the lib and seems quite stale thus not much use in trying to make any change to the lib.

I tried with the latest v2 of this react-media lib and same outcome.

import React, { useEffect } from "react";
import Media from "react-media";

const [isMounted, setIsMounted] = React.useState(false);
const [currentBreakpoint, setCurrentBreakpoint] = React.useState("sm");

React.useEffect(() => {
  setIsMounted(true);
  return () => {
    console.log(`unmount. This never prints so actually there is no dismount`);
    setIsMounted(false);
  };
}, []);

if ("some logic") {
  return externalFunc(currentBreakpoint);
  // return this instead
  // I need to store currentBreakpoint so that I can use it in this if statement
}

return (
    <Media
      queries={{
        sm: "(max-width: 767px)",
        md: "(min-width: 768px) and (max-width: 1023px)",
        lg: "(min-width: 1024px)"
      }}
    >
      {(result: MediaResult) => {
        if (currentBreakpoint !== currentResult.current) {
          setCurrentBreakpoint(currentResult.current); {/* this line is causing the error. */}
        }
        return children(currentResult);
      }}
    </Media>
  );

How to sync wireframe/physics with dragged objects using three.js dragControls and ammo in aframe setup?

i am currently using the three js drag Controls in my a-frame setup and it is working well. I am also using ammo for physics and have attached to test object like so:

    <a-box  color="blue" click-drag  ammo-body="type: dynamic" ammo-shape="type: box;"  visible="true" scale="0.3 0.3 0.3" position="-1.422 0.658 -2"></a-box>

the issue is, when dragging objects, they drag fine but the wireframe/physics is not moving at all so not in sync with objects. I would like to be able to add to objects and have them interact with other physics enabled objects in my scene such like these examples: https://jesstelford.github.io/aframe-click-drag-component/physics-2/

Not sure what to do as have tried numerous codes such as :

 var draggable = document.querySelector('[click-drag]');
    draggable.addEventListener('dragstart', function(dragInfo) {
    draggable.components['dynamic-body'].pause();
    });
    draggable.addEventListener('dragend', function(dragInfo) {
      var x = dragInfo.detail.velocity.x;

var y = dragInfo.detail.velocity.y;
var z = dragInfo.detail.velocity.z;

draggable.components['dynamic-body'].play();
    draggable.body.velocity.set(x, y, z);

console.log(‘drag end’, dragInfo.detail.velocity);
}); `

but no success. Would be happy to get some help. Thanks

How to download an Excel File with PhpSpreadsheet using javascript

I’m using PhpSpreadsheet to create an Xlsx spreadsheet and download directly. Until now to call the php function that create and download the file I’m using the method “”. Now I’m trying to call the function with javascript but no download is started and I get only “funny” characters like:

PKk��VG�D�Z�[Content_Types].xml���N�0E�|E�-J��@5��*Q>�'�UǶl���L����@�nbE�gr=��tW�d�>(k 6�r��V*�,���)�cI�$hk�`{l:�/�CBb V���9��Bf�RZ_C�W��� ��o���k”�………

The testing function that is working with the method:

$filename = "2023 - Export Transactions.xlsx";

// make a new spreadsheet object
$spreadsheet = new Spreadsheet();
// get cuttent active sheet (first sheet)
$activeWorksheet = $spreadsheet->getActiveSheet();

// Set the value of the selected cell
$activeWorksheet->setCellValue('A1', "test Cell A1");           
$activeWorksheet->setCellValue('B2', "test Cell B2");           


$writer = IOFactory::createWriter($spreadsheet, 'Xlsx');

header('Content-type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
header('Content-disposition: attachment; filename='.$filename);

ob_end_clean();

$writer->save('php://output');
exit();

What should I do to make working also by calling the testing function with javascript?

How can I change the background color of a element using JavaScript?

How would I change the color of the tag

I’m trying to make a dark mode bookmarklet to cover all of the html elements change

document.body.style.background = 'black';

This changes the color of the body so what would I do for

I tried

document.body.style.background = 'black';
document.body.style.color = 'white';
document.div.style.background = 'black';
document.div.style.color = 'white';

but I cant seem to get change the color of the div

Access PrismaClient instance in multiple files

I have a node.js/express app with the Prisma ORM. I would like to access my PrismaClient instance in multiple files, not just index.ts.

Tutorials I have seen all only access the PrismaClient instance inside index.ts, which makes that file bloated.

For example, I have folders for routes and controllers. I would like to access the PrismaClient in each of the files within the controllers folder.

Current code:

index.ts


    import express from "express"; 
    import { PrismaClient } from '@prisma/client';
    import userRoutes from "./routes/users";
    
    
    const app = express(); 
    
    // best not to have multiple instances of PrismaClient
    export const prisma = new PrismaClient();
    
    app.get("/", (req, res) => {
        res.send("helloBAA")
    })
    
    // routes 
    app.use('/api/users', userRoutes)
    
    app.listen(3500, () => {
        console.log("listening on port 3500")
    })

routes/users.ts


    import { Router } from 'express'; 
    import { createUser, getUsers, getUser } from '../controllers/users';
    const router = Router(); 
    
    
    // whole route: /api/users...
    router.post('/create', createUser); 
    router.get('/all', getUsers);
    router.get('/:userId', getUser); 
    
    
    export default router;

controllers/users.ts


    import { RequestHandler } from 'express'; 
    // import prisma from './index.ts';
    import dotenv  from "dotenv"
    import axios from 'axios'; 
    
    
    export const createUser:RequestHandler = async (req, res, next) => {
      let newObj = {
          username: req.body.username,
          email: req.body.email, 
          password: req.body.password
        }   
      
        res.status(200).json({ "test": "createUser" });
    }
    
    export const getUsers: RequestHandler = async (req, res, next) => {
    
      res.status(200).json({ "test": "getUsers" });
    }
    
    export const getUser: RequestHandler = async (req, res, next) => {
    
      res.status(200).json({ "test": "getUser" });
    }

If I try to import prisma from index.ts into controllers/users.ts, I get errors. How should I fix this?

NodeJs returned array from database query is undefined

An NodeJs app we are wrting has a problem with the query data returned as an array being undefined. I cannot find an exact match for our issue.

The following test case reproduces the problem. It is something to do with the calling function not waiting for the called function to finish? I’m not a JavaScript expert, and this behaviour does not make sense to me.

themod.js

module.exports = {

   getData: () => {
      let dbc = require('./mods/db.js');
      dbc.query(`

         SELECT 1 rn, 'One' rt UNION
         SELECT 2 rn, 'Two' rt UNION
         SELECT 3 rn, 'Three' rt ;

         `,
         function (err, rows) {
            if (err) {
              console.log ( ' Error 1: ' , err );
            } else {
               arows =  module.exports.getSubData();
               console.log ( 'arows.length: ', arows.length );
            }
          })
   },

   getSubData: () => {
         let dbc = require('./mods/db.js');
         dbc.query(`

         SELECT 10 rn, 'Ten' rt UNION
         SELECT 20 rn, 'Twenty' rt UNION
         SELECT 30 rn, 'Thirty' rt ;

         `,
         function (err, rows) {
            if (err) {
              console.log ( ' Error 3: ' , err );
            } else {
               console.log ( 'arows: ', rows.length );
               return( rows );
            }
          })
   }

}

theapp.js:

let tm = require('./themod.js');

tm.getData();

When it’s run:

 node theapp.js
/path/node/node_modules/mysql/lib/protocol/Parser.js:437
      throw err; // Rethrow non-MySQL errors
      ^

TypeError: Cannot read property 'length' of undefined
    at Query.<anonymous> (/path/node/themod.js:17:54)
    at Query.<anonymous> (/path/node/node_modules/mysql/lib/Connection.js:526:10)
    at Query._callback (/path/node/node_modules/mysql/lib/Connection.js:488:16)
    at Query.Sequence.end (/path/node/node_modules/mysql/lib/protocol/sequences/Sequence.js:83:24)
    at Query._handleFinalResultPacket (/path/node/node_modules/mysql/lib/protocol/sequences/Query.js:149:8)
    at Query.EofPacket (/path/node/node_modules/mysql/lib/protocol/sequences/Query.js:133:8)
    at Protocol._parsePacket (/path/node/node_modules/mysql/lib/protocol/Protocol.js:291:23)
    at Parser._parsePacket (/path/node/node_modules/mysql/lib/protocol/Parser.js:433:10)
    at Parser.write /path/node/node_modules/mysql/lib/protocol/Parser.js:43:10)
    at Protocol.write (/path/node/node_modules/mysql/lib/protocol/Protocol.js:38:16)
``

New dependency causing errors on build

I am currently getting the following error after I added a new dependency when I run npm run build.

How can I get my project to ignore this error?

[email protected] declaration /Users/name/projects/my-project/packages/pack/componentName
node ../../../build-scripts/typescript/declaration.js

Bundling declaration file...
node_modules/react-responsive/types/index.d.ts(6,1): error TS1128: Declaration or statement expected.
node_modules/react-responsive/types/index.d.ts(6,13): error TS1005: ';' expected.
node_modules/react-responsive/types/index.d.ts(6,118): error TS1005: ';' expected.

lerna ERR! npm run declaration stderr:
child_process.js:866
    throw err;
    ^

Error: Command failed: tsc -p tsconfig.json --declarationDir './lib' --emitDeclarationOnly
    at checkExecSyncError (child_process.js:790:11)
    at execSync (child_process.js:863:15)
    at exec (/Users/name/projects/my-project/packages/pack/componentName/build-scripts/exec.js:4:3)
    at Object.<anonymous> (/Users/my-project/packages/pack/componentName/build-scripts/typescript/declaration.js:4:1)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)
    at internal/main/run_main_module.js:17:47 {
}
npm ERR! [email protected] declaration: `node ../../../build-scripts/typescript/declaration.js`
npm ERR! Failed at the [email protected] declaration script.

I tried adding the annotation // @ts-nocheck on top of the component file which makes no diff.

I am using typescript version 3.7.3 and can’t change this version.

I am currently already ignoring node_modules. No other component has this issue less this component with it’s new dependency.

This is a React based typescript project which is essentially a library.

So at the top level there is a tsconfig.json as follows.

{
  "compilerOptions": {
    "outDir": "./lib/",
    "sourceMap": true,
    "module": "commonjs",
    "target": "es2017",
    "jsx": "react",
    "esModuleInterop": true,
    "declaration": true,
    "downlevelIteration": true,
    "skipLibCheck": true,
    "noImplicitAny": true,
    "removeComments": true,
    "diagnostics": false
  },
  "types": ["jest"],
  "include": ["packages/**/*", "global.d.ts"],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "**/*.spec.tsx",
    "**/*.schema.ts",
    "**/*.schema.tsx",
    "**/_*/**/*"
  ]
}

Following that, each component is within its own folder in following structure.

componentName
-- src
---- index.tsx
-- package.json
-- tsconfig.json

The component where I added this new dependency, the package.json looks as follows.

{
    "name": "component-name",
    "version": "2.71.0",
    "main": "./lib/index.js",
    "types": "./lib/index.d.ts",
    "scripts": {
        "clear": "node ../../../build-scripts/clear.js",
        "build": "node ../../../build-scripts/babel/build.js",
        "declaration": "node ../../../build-scripts/typescript/declaration.js"
    },
    "files": [
        "lib"
    ],
    "peerDependencies": {
        "react": "^16.8.0",
        "react-dom": "^16.8.0"
    },
    "dependencies": {
        "react-responsive": "^9.0.2", // new dependency 
    }
}

This is the tsconfig.json for this component.

{
    "extends": "../../../tsconfig.json",
    "include": ["src", "../../../global.d.ts"]
}

This is the declaration.js file.

const exec = require("../exec");

console.log("Bundling declaration file...");
exec(
  `tsc -p tsconfig.json --declarationDir './lib' --emitDeclarationOnly`
);

float-left not working for a series of divs

I have the following Javascript code:

{
var x = document.createElement('div'); 
x.setAttribute('class','rowone');
x.setAttribute('id',i);
var move = 4;
x.style.marginLeft = move + "%";
x.addEventListener('click',clickdata,'false');
     } // creating each div block
{ 

  var p = document.createElement('IMG');
  p.style.width = "80%";
  p.style.height="100%";
   p.src = orderone[i];
x.appendChild(p);
   } // creating the text in block, mostly for test
document.body.append(x); // appending x into the document
} // creating first row and adding event listener
for(var j = 0; j < 8; j++){
{
var x = document.createElement('div'); x.setAttribute('class','rowtwo');
x.setAttribute('id',j+8);
var moverow = 4;
x.style.marginLeft = moverow + "%";
x.addEventListener('click',secondclick, 'false');
} // creating each div block
{ 
/*var p = document.createElement('p');
p.innerHTML = ordertwo[j];*/
  var otherp = document.createElement('IMG');
  otherp.style.width = "80%";
  otherp.style.height="100%";
   otherp.src = ordertwo[j];
x.appendChild(otherp);
  } // creating the text in block, mostly for test
document.body.append(x); // appending x into the document
 }

(orderone and ordertwo are just the arrays of images)
What it does is that it creates two rows of divs, all divs having an image (from orderone or ordertwo). This is what it should look like:
Ideal case

However, the rows often just break up randomly (sometimes it works right, other times it just gives some other assortment, like below):
not Ideal case

What do I do?

Docker Javascript connection to localhost websocket problem

I have a Java Spring app running on my host system. It exposes a websocket on port 8080. Websocket works correctly, tested using Postman.

Another part of my app is the PHP web app running in Docker. That website should connect to websocket running on my host machine using Javascript.
JS connection is established like this:

exampleSocket = new WebSocket("ws://192.168.1.113:8080/socket");

The problem is that when I run my docker web app, it fails to connect. On the other side, pinging 192.168.1.113 from within PHP docker container gives proper response. What might be the problem? This is my docker-compose file:

version: '3.8'

services:
  nginx-cq:
    build:
      context: .
      dockerfile: nginx.dockerfile
    ports:
      - 11096:80
    volumes:
      - .:/var/www/html
    depends_on:
      - php
  php:
    build:
      context: .
      dockerfile: php.dockerfile
    container_name: cq_php_docker
    networks:
      - default
      - dbnetwork
    volumes:
      - .:/var/www/html
      - ./xdebug/docker-xdebug.ini:/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
    ports:
      - 9011:9000
    extra_hosts:
      - "host.docker.internal:192.168.1.113"

networks:
  dbnetwork:
    external: true

how to keep show last content with scrolltrigger

I use a pen with scrolltrigger but it does not show content at first(before scrolling).I mean the bright green area is blank at first but I want to show first content before section pinned and keep the last content after section continue scroll down

here is the pen

and the script I use

        gsap.set('.content',{ autoAlpha: 0 })

        var headlines = gsap.utils.toArray(".text");

        var totalDuration = 8000;
        var singleDuration = totalDuration / headlines.length;

        const lineTimeline = gsap.timeline();

        ScrollTrigger.create({    
        trigger: ".pin-up",
        start: "top top",
        end: "+=" + totalDuration,
        //markers: true,
        pin: true,
        scrub: true,
        animation: lineTimeline,
        });

        headlines.forEach((elem, i) => {    
        
                const smallTimeline = gsap.timeline(); 
                    
                const content = document.querySelector('.content-wrap');
                const relevantContent = content.querySelector('div.content-' + i);  
                
                ScrollTrigger.create({    
                    
                    trigger: "body",                        
                    start: "top -=" + ( singleDuration * i ),
                    end: "+=" + singleDuration,
                    animation: smallTimeline,
                    toggleActions: "play reverse play reverse",
                    
                });   

                smallTimeline
                //.to(elem,{ duration: 0.25, fontSize: "40px", color: "orange"}, 0)  
                .to(elem,{ duration: 0.25, color: "orange"}, 0) 
                .to(elem.firstChild,{ duration: 0.25, backgroundColor: "orange", width: "50px"}, 0)                
                .set(relevantContent,{ autoAlpha: 1 }, 0);
        
        });

browser window.navigator.credentials API to get client certificate header

Is there a way from the front-end to query for a client certificate and use its header in javascript?

For context, I am working on an app that needs to read a smart card X509 certificate header, to pull the user’s name and ID into pre-populated form fields.

I do not need to accomplish the full mutual TLS handshake in any way – I just want to be able to read the header of their client certificate so that I can auto-populate their name and id into form fields.

I am researching the window.navigator.credentials API to be able to accomplish this – since the variables which I need the header for are all on the front-end.
https://developer.mozilla.org/enUS/docs/Web/API/Navigator/credentials

function cert() {
    if (window.navigator.credentials && window.navigator.credentials.get) {
      const challenge = new Uint8Array(32); // Generate a valid challenge value
  
      const credentialPromise = window.navigator.credentials.get({
        publicKey: {
          challenge,
          // Add any other options or filters if necessary
        },
      });
  
      credentialPromise
        .then((credential) => {
          // Access the credential and its client certificate
          if (credential && credential.rawId) {
            // Get the client certificate as an ArrayBuffer
            const certificateBuffer = new Uint8Array(credential.response.clientDataJSON);
            // Convert the ArrayBuffer to a string
            const certificateHeader = btoa(String.fromCharCode.apply(null, certificateBuffer));
  
            // Do something with the client certificate header
            console.log('Client certificate header:', certificateHeader);
          } else {
            console.error('No client certificate found');
          }
        })
        .catch((error) => {
          console.error('Error retrieving client certificate:', error);
        });
    } else {
      console.error('Web Credentials API not supported');
    }
  }

When I run this function in the browser I get:

Error retrieving client certificate: DOMException: This is an invalid domain.

is there any problem with code? as changing image is not working

I am trying to put the image as a logo in my navigation bar but the on webpage the logo is appearing full white, nothing in it.
here is my html code:

    <header>
        <nav id="header-nav" class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a href="index.html" class="">
                        <div id="logo-img" alt="Logo image"></div>
                    </a>
                </div>
            </div>
        </nav>
    </header>

and here is the css code:

#logo-img{
    background: url(../images/logo.png) no-repeat;
    width: 150px;
    height: 150px;
    margin: 10px 15px 10px 0;
}

tried to use different image but nothing is happening