Category: javascript

So I have a slider, and it’s set to max out at a certain point based on external variables, but if I move the mouse fast towards the max, it stops short and not at the max. How can I avoid this, and have the slider stop at the maximum? Here’s a video of what I mean, and hopefully all the relevant code.

Video: https://clipchamp.com/watch/NNqMIjnL6TW

HTML:

<div class="weight">
            <!-- maybe use ::before for label -->
            <!-- need four of these -->
            <!-- https://www.w3schools.com/howto/howto_js_rangeslider.asp -->
            <div class="sliders">
                <div class="slider" id="streams">
                    <input type="range" min="0" max="100">
                    <p>Streams: <span>50%</span></p>
                </div>
                <div class="slider" id="awards">
                    <input type="range" min="0" max="100">
                    <p>Awards: <span>10%</span></p>
                </div>
                <div class="slider" id="sales">
                    <input type="range" min="0" max="100">
                    <p>Record Sales: <span>20%</span></p>
                </div>
                <div class="slider" id="opinion">
                    <input type="range" min="0" max="100">
                    <p>Public Opinion: <span>20%</span></p>
                </div>
            </div>
            <p class="total">
                Total Percentage: <span id="total">100%</span>
            </p>
        </div>

JavaScript:

let elements = {
    streams: {
        element: document.getElementById("streams"),
        weight: 50,
    },
    awards: {
        element: document.getElementById("awards"),
        weight: 10,
    },
    sales: {
        element: document.getElementById("sales"),
        weight: 20,
    },
    opinion: {
        element: document.getElementById("opinion"),
        weight: 20,
    }
}

//get total slider weights
let getTotalWeight = () => {
    return parseInt(elements.streams.weight) +
    parseInt(elements.awards.weight) +
    parseInt(elements.sales.weight) +
    parseInt(elements.opinion.weight);
}

//initilize slider potions
elements.streams.element.firstChild.nextSibling.value = elements.streams.weight;
elements.awards.element.firstChild.nextSibling.value = elements.awards.weight;
elements.sales.element.firstChild.nextSibling.value = elements.sales.weight;
elements.opinion.element.firstChild.nextSibling.value = elements.opinion.weight;

elements.streams.element.firstChild.nextSibling.oninput = () => {
    const old = elements.streams.weight;
    elements.streams.weight = elements.streams.element.firstChild.nextSibling.value;

    if (getTotalWeight() > 100) {
        elements.streams.weight = old;
        elements.streams.element.firstChild.nextSibling.value = old;
    } else {
        elements.streams.element.lastChild.previousElementSibling.lastChild.innerHTML = elements.streams.weight + "%";
        document.getElementById("total").innerHTML = getTotalWeight() + "%"
    }
}

(i’ve only written the code for the ‘streams’ slider. and also, the intended final effect, if it’s helpful, is for the user to be able to create a custom weight of four categories, that dosen’t exceed 100%)

! Links to all code used (css, html, js etc.) can be found here: https://test.rogersartwork.co.uk/gt/nav.html

Apologies for the amount of detail but all help and those willing to put ideas forward will be greatly appreciated.

I’m running a lightbox image gallery on my website, and I’ve got css files all setup and working so the gallery looks nice. I’ve got the images lined up, animations on hover etc. and when you click on an image, it shows it in big. On the main gallery page, I’ve set the css to make sure the image can be viewed at the right size on all screens. The images are very different in size as they’re irregular images.

However, some of the images are huge and some are just the right size. I’m looking for all of the images to be nicely placed in the middle of the screen and any that are too big to be resized and shown in the correct ratio so the images (especially the rectangular ones) are not stretched or look out of shape.

!! To clarify if that explanation was confusing: The images are fine on the main gallery view altogether. When you click on an image, it shows it in big on its own. Some of the images are huge. When clicked on, I want the image to display a nice size in the middle of the screen, because at the moment, some of the images are so huge you need to scroll to view them all.

On all different screens, I’d like the image to sit nicely without need for scrolling and without the image being stretched or out of proportion.!!

I’ve made a quick navigation page that links to:

The actual page
CSS
More CSS
Jquery and lightbox file
The HTML code
https://test.rogersartwork.co.uk/gt/nav.html

I’ve tried max width, max height, min width, min height, height, width and lots more – I just need the actual images when you click on them, to show nicely to fit the screen size so no scrolling is requried to see the rest of the singular image – and this to adapt for different screen sizes.

ALL OF THE CODE CAN BE FOUND AT THE LINK ABOVE AS WELL AS THE PAGE IN QUESTION

Any questions, I’m here.

Thank you so much!

Oliver

I’m working on a web app builded in Django and React, I’ve a question about to change the width and height of my Lottie img when the screen change Its size.
That’s my Lottie configuration:

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animation,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice"
    }
  }

   <div id='lottie-container'>      
        <Lottie
        id='lottie-icon'
        options={defaultOptions}
        />
   </div>

That’s CSS media query:

/*------|
Desktop |
-------*/

@media screen and (min-width:991px) {
    /* LOTTIE */
    #lottie-icon{
        width: 400px;
        height: 400px;
    }
}

/*-----|
Mobile |
------*/

@media screen and (max-width:991px) {
    /* LOTTIE */
    #lottie-icon{
        width: 200px;
        height: 200px;
    }
}

This is my app.js:

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Navbar } from './components/Navbar';
import  Home  from './pages/Home.js'
import SignUp from './pages/SignUp.js'
import SignIn from './pages/SignIn.js'
function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/signup" exact component={SignUp} />
          <Route path="/signin" exact component={SignIn} />
        </Switch>
      </Router>
    </>
  );
}

export default App;

When I’m using Link-to, it is changing the URL, but isn’t updating the content of the website, unless I reload the page. I am using router v5.2.0. Please help!

first time posting here so sorry if this isn’t as clear or efficient as can be, but I’m trying to write a program to take user inputs for 3 sides of a triangle and see if they are a valid triangle based on these rules:

a + b > c

a + c > b

b + c > a

So far, I’m just trying to prove a + b > c (which I called condition1). But in trying to solve this, it seems that the if statement I have is ignoring the a + b part and just checking a > c. Can anyone tell me what I’m doing wrong?

function isTriangle() {
  var input1 = document.getElementById("a");   // fetch the 3 numbers
  var input2 = document.getElementById("b");
  var input3 = document.getElementById("c");
  var displayAnswer = document.getElementById("display");

  function condition1(){
    if ((input1.value + input2.value) > input3.value)
    {
      return true;
    }
    else
    {
      return false;
    }
  }

  //our goal here is to use triangle inequality theorem
if (condition1(true)) {
  displayAnswer.innerHTML = "These three sides can form a   right triangle!";
}
else {
  displayAnswer.innerHTML = "These three sides cannot form a   right triangle!";
}

  
}

<!DOCTYPE html>
<html>
<head>
    <title>Project 3</title>
    <script src="proj3.js" type="text/javascript"></script>
</head>
  
<body>
<h1>Triangle Tester</h1>

  <p> Please input the length (integer) of the first side of the triangle: </p>
  <input id="a" type="text" size="3" /> 

  <p> Please input the length (integer) of the second side of the triangle: </p>
  <input id="b" type="text" size="3" /> 

  <p> Please input the length (integer) of the third side of the triangle: </p>
  <input id="c" type="text" size="3" /> 
  
  <br />
  <br />
  <span id="display"></span>

  <br />

  <button onclick="isTriangle();">(2)</button>
 
</body>
</html>

I have installed web3 using npm in my project. I now have a web3 folder in my node_modules folder. However, when I run my code on local server, it shows the following error:

Uncaught TypeError: Failed to resolve module specifier “web3”. Relative references must start with either “/”, “./”, or “../”. (network.html:1)

In my networks.js file, I have done “import { Web3 } from ‘web3’;” and in my network.html file, inside script, I have added

type=”module” src=”/js/networks.js”

and

src=”https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js”

I tried to write the import statement in my .js file as a relative location i.e. ./web3 , /web3, ../web3. However, it still shows the same error.

Any help would be appreciated!

Thanks!

I try make button to change color using hover and animation. But, when animation loops, color of button comes back to basic version. How can I fix it? Is there any css property to do it? Or bundle of rules? Or maybe I have to go to JS and write some code?

#launch-button {
    width: 440px;
    height: 100px;
    margin-top: 75%;
    margin-left: 15%;
    border-radius: 45px;
    border-color: rgb(255, 255, 255);
}

#launch-button:hover {
    animation-name: change-background;
    animation-duration: 0.75s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
}

@keyframes change-background {
    to {background-color: rgba(26, 198, 250, 0.5);}
}

For some reason, when I am reading a CSV file with React, I am getting undefined as the values, and I am not sure why this is happening. Below is the general format of my .csv file.

Date,Site,Depth (m),Temp (degC),SpeCond(uS/cm),Chla (ug/L),Turb (FTU),DO (mg/L)
Mar-18-2019,UA01,-0.518,10.9387,233.3824,4.2043,11.118,10.7842
Mar-18-2019,UA01,-0.585,10.9352,233.4042,4.4753,11.272,10.7935
Mar-18-2019,UA01,-0.651,10.9335,233.3973,4.641,11.26,10.7987
Mar-18-2019,UA01,-0.717,10.9319,233.4335,4.7184,10.985,10.796
Mar-18-2019,UA01,-0.785,10.9292,233.4137,4.8404,10.985,10.7938
Mar-18-2019,UA01,-0.85,10.9268,233.4009,5.0127,11.158,10.7885
Mar-18-2019,UA01,-0.909,10.9257,233.4585,5.1674,11.662,10.78
Mar-18-2019,UA01,-0.969,10.9248,233.4452,5.3253,11.249,10.7753
Mar-18-2019,UA01,-1.04,10.9241,233.3777,5.5321,10.852,10.7706
...

This is my App.js:

import React,{useState} from "react";
import * as $ from 'jquery';
import ReactDOM from 'react-dom'
import Highcharts from 'highcharts';
export default function App() {
  const [selects, setSelects] = useState();
  return (
    <div className="App">
      <h1>{selects}</h1>
      <h3 className = "form-labels"> Visuals: </h3>
      <select value = {selects} onChange = {e=>printSelected(e.target.value) }>
        <option>Temperature</option>
        <option>Special Conductivity</option>
        <option>Chlorophyll</option>
        <option>Turbosity</option>
        <option>Dissolved Oxygen</option>
      </select>
      <select value = {selects} onChange = {e=>printSelected1(e.target.value) }>
        <option>UA01</option>
        <option>UA01_SB19</option>
        <option>UA01_SB25</option>
        <option>UA06</option>
        <option>UA06_SB19</option>
        <option>UA06_SB25</option>
        <option>UA07</option>
        <option>UA07_SB19</option>
        <option>UA07_SB25</option>
        <option>UA08</option>
        <option>UA08_SB19</option>
        <option>UA08_SB25</option>
        <option>LA03</option>
        <option>LA03_SB19</option>
        <option>LA03_SB25</option>
        <option>NR02</option>
        <option>NR02_SB19</option>
        <option>NR02_SB25</option>
        <option>OA04</option>
        <option>OA04_SB19</option>
        <option>OA04_SB25</option>
      </select>
    </div>
  );

}
const x = [];
const y = [];
var tab = [];
var tab1 = [];
var tab2 = [];
var tab3 = [];
var tab4 = [];
var response = "";
var data = "";
var sortedD = [];
var sortedD1 = [];
var sortedD2 = [];
var sortedD3 = [];
var sortedD4 = [];

var fileName = "UA01";
var visuals = "Temp";

function printSelected(e) {
  sortedD.length = 0;
  tab.length = 0;
  sortedD1.length = 0;
  tab1.length = 0;
  sortedD2.length = 0;
  tab2.length = 0;
  sortedD3.length = 0;
  tab3.length = 0;
  sortedD4.length = 0;
  tab4.length = 0;
  visuals = e;
  getChart();
}

function printSelected1(e) {
  sortedD.length = 0;
  tab.length = 0;
  sortedD1.length = 0;
  tab1.length = 0;
  sortedD2.length = 0;
  tab2.length = 0;
  sortedD3.length = 0;
  tab3.length = 0;
  sortedD4.length = 0;
  tab4.length = 0;
  fileName = e;
  getChart();
}

async function getChart() {
  await getData();
  var data1 = [];
  var name1 = "";
  if (visuals.localeCompare("Temp") === 0) {
      data1 = sortedD;
      name1 = "Temperature (deg Celsius) ";
  } else if (visuals.localeCompare("Special Conductivity") === 0) {
      data1 = sortedD1;
      name1 = "Special Conductivity (uS/cm) ";
  } else if (visuals.localeCompare("Chlorophyll") === 0) {
      data1 = sortedD2;
      name1 = "Chlorophyll (ug/L) ";
  } else if (visuals.localeCompare("Turbosity") === 0) {
      data1 = sortedD3;
      name1 = "Turbosity (FTU) ";
  } else {
      data1  = sortedD4;
      name1 = "Dissolved Oxygen (mg/L)";
  }

}
async function getData() {
  response = await fetch(fileName + ".csv");
  data = await response.text();
  const table = data.split('n').slice(1);
table.forEach(row => {
  const col = row.split(',');
  const depth = col[2];
  var ele = [];
  var ele1 = [];
  var ele2 = [];
  var ele3 = [];
  var ele4 = [];
  console.log("Depth: " + depth);
  console.log("Val: " + col[3]);
  ele.push(parseFloat(col[3]));
  ele.push(parseFloat(depth));
  ele1.push(parseFloat(col[4]));
  ele1.push(parseFloat(depth));
  ele2.push(parseFloat(col[5]));
  ele2.push(parseFloat(depth));
  ele3.push(parseFloat(col[6]));
  ele3.push(parseFloat(depth));
  ele4.push(parseFloat(col[7]));
  ele4.push(parseFloat(depth));
  tab.push(ele);
  tab1.push(ele1);
  tab2.push(ele2);
  tab3.push(ele3);
  tab4.push(ele4);
})
sortedD = tab.sort((a,b) => b[0]-a[0]);
sortedD1 = tab1.sort((a,b) => b[0]-a[0]);
sortedD2 = tab2.sort((a,b) => b[0]-a[0]);
sortedD3 = tab3.sort((a,b) => b[0]-a[0]);
sortedD4 = tab4.sort((a,b) => b[0]-a[0]);
}

getChart();

I am trying to build a dropdown menu to display different line graphs depending on what dropdown is selected, but for some reason when I try to print values of my variables I am trying to plot, I get undefined. And the length of the arrays I have made are always 43 for some reason…

Depth: undefined
Val: undefined
Depth: undefined
Val: undefined
Depth: undefined
Val: undefined
Depth: undefined
Val: undefined
Depth: undefined
Val: undefined
Depth: undefined

I have a feeling that it might be the await fetch and await response, but I am not 100% sure. Any tips on this would be greatly appreciated!

When I start VS Code Editor, a window appears frequently and shows:

C:UsersAdminAppDataLocalProgramsMicrosoft VS Codeunins000.exe

An error occurred while trying to create a file in the destination directory. Access is denied.

How do I fix this error?enter image description here

I cannot load files users select in a HTML input because the loader expects a URL linux style URL I guess. I have tried feeding it a blob as a URL object, feeding the raw data to the FBX loader, and most recently feeding the mozilla path to it on my system, but nothing works. How can this be achieved without physically uploading the file to the site and passing an actual URL?

This is my latest attempt:

    $(document).ready(function() {
        
        $('#file').change(function () {
                
            if ( this.value == '' ) {
                console.log( "No valid file selected." );
            }

            var filePath = this.files[0].mozFullPath,
                loader = new THREE.FBXLoader();
                    
            loader.load( filePath, function( object ) {

                object.traverse( function( c ) {

                    if ( c instanceof THREE.Camera ) {              

                        // Debug log
                        console.log( c );

                    }

                } );

            });
            
        });
        
    });

I have a code like this. In this code, a user wants to change the current name. The current name is also displayed on top of the page.

<div>{{ currentUser.name }}</div>
<v-text-field
   required
   v-model="currentUser.name"
   class="mb-3"
></v-text-field>

The data is from an API. Right now, if I change the value in the text field, the div value also changes. How to make it change only when the user already click (let’s say) a submit button and the process succeed?

I want to develop a timeline like Slider Revolutions. for controlling objects sequentially over time. Every object has its own row in the timeline and will move while the player’s vertical scroll is moving over its horizontal bar.

• What is the best technology? (something like Reactjs or vis.js, etc.)
• Do you know any sample code to facilitate the development process?

you can watch the playing live process through these links:
https://www.sliderrevolution.com/wp-content/uploads/2020/07/timelineplay.mp4
https://daybrush.com/scenejs/features.html#timeline

My function is a recursive function to delete the middle element of a stack.
The coding platform has already given it’s implementation of a stack which means I have access to the push() and pop() method.

I want to pop() till I reach the middle ele and then push the popped elements back.

However, if I store the pop, it shows up as undefined.

If I console.log the pop call, it returns undefined.

class Solution 
{
    solve(s,midEle) {
        let self = this;
        if(midEle===1){
            s.pop();
            return;
        }
        let temp = s.pop();
        self.solve(s,midEle-1);
        s.push(temp)
        return
    }
    //Function to delete middle element of a stack.
    deleteMid(s, sizeOfStack)
    {
        // code here
        const mid = Math.ceil((sizeOfStack+1)/2);
        this.solve(s,mid);
    
    }
}

SonarLint identifies these 3 functions as duplicates in some specific lines (39, 55 and 71):

1. Update this function so that its implementation is not identical to the one on line 25.

const { MessageEmbed } = require("discord.js");
const db = require("quick.db");
const config = require("../ayarlar.json");

module.exports = {
  name: "isimler",
  aliases: "isimler",

  execute: async (client, message, args, embed, author, channel, guild) => {
    var member =
      message.mentions.users.first() || guild.members.cache.get(args[0]);
    if (
      !message.member.roles.cache.has(config.registration.staff) &&
      !message.member.permissions.has(8)
    )
      return message
        .reply({
          embeds: [
            embed.setDescription(
              `Komutu kullanmak için geçerli yetkin olmalı!`
            ),
          ],
        })
        .catch((err) => console.log(err), client.tick(message))
        .then((e) =>
          setTimeout(() => {
            e.delete();
          }, 10000)
        );

    if (!member)
      return message
        .reply({
          embeds: [
            embed.setDescription("Geçerli bir kullanıcı belirtmelisin!"),
          ],
        })
        .catch((err) => console.log(err), client.tick(message))
        .then((e) =>
          setTimeout(() => {
            e.delete();
          }, 10000)
        );
    let names = db.get(`isimler_${member.id}`);
    if (!names)
      return message
        .reply({
          embeds: [
            embed.setDescription(
              `${member} kullanıcısının isim geçmişi bulunmamakta.`
            ),
          ],
        })
        .catch((err) => console.log(err), client.ytick(message))
        .then((e) =>
          setTimeout(() => {
            e.delete();
          }, 10000)
        );
    message
      .reply({
        embeds: [
          embed
            .setTitle("Kullanıcının geçmiş isimleri:")
            .setDescription(
              names.map((data, n) => `**${n + 1}.** ${data}`).join("n")
            ),
        ],
      })
      .catch((err) => console.log(err), client.ytick(message))
      .then((e) =>
        setTimeout(() => {
          e.delete();
        }, 10000)
      );
  },
};

What would be the best solution to solve my problem?

I apologize if this sounds like an easy problem, but honestly, I can’t think about how to solve this. I’m new in that language.

Refering to a live codepen demo at here. When you click on the grid, it will display blue arrows. Is there a way to specify the color of arrow displayed using javascript? I only know how to specify the colour using css but i needed the colour specification to be in Javascript so that it can be manipulated by the user 🙂 Thank you for reading and have a nice weekend 🙂

 .red-dot {
      position:absolute; 
      width:55px; 
      height:55px;
      background:blue;
      pointer-events: none;
    clip-path: polygon(57% 0, 58% 48%, 75% 49%, 49% 100%, 22% 49%, 39% 48%, 39% 0);
    
    }