Category: javascript

I have searched Google for weeks – using almost every conceivable arrangement of keywords, but I am stumped. What I am trying to accomplish- is a whole-page transition effect. If a user is on a page, and clicks an image that links to say, a blog post – I would like to produce a downward spiral effect like the entire page is going down a drain, or spiraling down a tunnel (before transitioning to the target page). I know this is very complex – and I can figure out (for the most part) how to use whatever catalyst for making it happen – I just do not know what to use to make this effect a reality. just looking for tips or perhaps an existing example I can reverse engineer. Any help would be greatly appreciated.

I’m getting this error when I try to run gatsby develop, so far I’ve tried:

1. npm install –ignore-scripts=false –verbose sharp
2. npm install –platform=win32 –arch=x64 sharp
3. npm clean cache –force
4. gatsby clean
5. deleting node_modules, package-lock.json and then npm install
6. updating to the latest node, npm and gatsby version

this is the specific error:

Error: Something went wrong installing the “sharp” module
The specified module could not be found.
node_modulessharpbuildReleasesharp-win32-x64.node

I checked for that specific module in that specific folder and it’s there… Any ideas? No errors or whatsoever when I tried all the above solutions.

The phrasing of my title might seem strange so let me elaborate. I am trying to use Array.find() to find an object based on weather it has a matching array within it.
Example:

let arr = [
    {
        innerArray: ["A", "B", "C"]
    },
    {
        innerArray: ["G", "D", "B"]
    }
]

arr.find(obj => obj.innerArray === ["A", "B", "C"])

When ran it returns undefined. If this is not possible are there any alternatives?

Im not very well versed in html or js. I have scoured google and it doesnt seeem like anyone is having this problem or is asking.

Its almost like the Inspect Element area is being “overloaded” and flooded with the video attempting to connect. Almost like a DDoS. The video becomes unresponsive and its very hard to navigate and use the console. It really only happens when JW Player is involved so Im assuming its on purpose from the devs.

Wondering if there is a fix for this, or its possible to stop this flooding BESIDES deleting the video element?

Example Video

I have a form where it requires people to enter information, after they click on the next button it will move to second page of the form. Now the problem I’m facing after reaching at the end of the form when we click on submit button I cannot make the form to show the first page again. Can anyone help me to redirect the form to first page after click submit button. I will attach my fiddle link below

Sample Code

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    
    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
    
    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
    
    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    
    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    return false;
})

I am using the slick slider, and I am using it with the code below.

<div class="slideshow">
                        <div class="slide">
                            <a href="#">
                                <div id="slide00"></div>
                                <div id="slide01"></div>
                                <div id="slide02"></div>
                                <div id="slide03"></div>
                                <div id="slide04"></div>
                            </a>
                        </div>
                        <div class="slide">
                            <a href="#">
                                <div id="slide00"></div>
                                <div id="slide01"></div>
                                <div id="slide02"></div>
                                <div id="slide03"></div>
                                <div id="slide04"></div>
                            </a>
                        </div>
                        <div class="slide">
                            <a href="#">
                                <div id="slide00"></div>
                                <div id="slide01"></div>
                                <div id="slide02"></div>
                                <div id="slide03"></div>
                                <div id="slide04"></div>
                            </a>
                        </div>
                        <div class="slide">
                            <a href="#">
                                <div id="slide00"></div>
                                <div id="slide01"></div>
                                <div id="slide02"></div>
                                <div id="slide03"></div>
                                <div id="slide04"></div>
                            </a>
                        </div>
                    </div>

<script>
$('.slideshow').slick({
  slidesToShow: 2,
  slidesToScroll: 2,
  autoplay: true,
  autoplaySpeed: 2000,
  dots:true
});
</script>

I want to make it output randomly…
There is no random output no matter what method you use.

What code do I need to modify for random output?

Now, the plus button should be auto clicked, and display new row after selecting amount, time.

<i class="fas fa-plus safeplus safeplus_<?php echo $i;?>" id="safeplus_<?php echo $i;?>" aria-hidden="true" style="display: none;"></i>

I made a horizontal scrolling element as displayed from the example given here:
https://css-tricks.com/pure-css-horizontal-scrolling/

Basically, I have a static nav bar and static footer, and through bootstrap the width of these elements change as the viewport changes in size (container-fluid). Because my horizontal-scroll-wrapper-inner element is being rotated twice (to give it that horizontal scroll effect), i’m having to use translateY() to adjust it into the right place. The issue i’m having is that when the viewport sizes change, the position of the horizontal-scroll-wrapper-inner is never in the right place.

What I’ve tried:

1. Absolute positioning the horizontal-scroll-wrapper-inner element to stick to the left side of the page (this doesn’t work because after you rotate the element, the positioning never sticks to it’s parent element, i.e. horizontal-scroll-wrapper). Also, even when it does, I have to adjust the width and height of the element and changing one affects the other. (Ex. changing height dynamically changes the width so it sticks out of its parent wrapper and leaks into the nav/footers -> if someone can explain to me why changing the height affects the width and vice versa i’d appreciate that answer as well)
2. Creating a BUNCH of media queries at certain breakpoints but its never completely fixed because when you change the size of the browser on your laptop/desktop, it looks out of place in between breakpoints.

Heres the code:

// HTML
<div class="p-0" id="grid">
      <section id="navsection" class="container-fluid"><Nav /></section>
      <div class="horizontal-scroll-wrapper ">
        <div class="horizontal-scroll-wrapper-inner">
          <div id="mainsection"><Main /></div>
          <div id="projectsection"><Projects /></div>
        </div>
      </div>
      <section id="footersection" class="container-fluid"><Footer /></section>
    </div>


// CSS
.horizontal-scroll-wrapper {
  height: 80vh;
  width: 100vw;
}

.horizontal-scroll-wrapper-inner {
  transform: rotate(-90deg) translateY(-522px);
  transform-origin: right top;
  height: 100vw;
  width: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}


.horizontal-scroll-wrapper-inner > div {
  width: 100px;
  height: 100px;
  margin: 2px;
  transform: rotate(90deg) translateX(100px) ;
  transform-origin: right top;
}

To explain a bit further:
.horizontal-scroll-wrapper has a fixed height and width so that its placed in the middle, between the nav on top and footer on bottom.
.horizontal-scroll-wrapper-inner is the wrapper that contains several divs -> .horizontal-scroll-wrapper-inner > div

The divs are rotated 90deg then the wrapper-inner is rotated -90deg so that I can achieve a horizontal scroll whilst using a vertical scroll on my mouse. In order to get the wrapper-inner placed where I want it to, I’ve been playing with transform: translateY().

Please help me 🙂

I have a utility typescript class with a static function called initTimer(), this function calls setTimeout. However when this static function called from react component the timer is not started!

StyleWrapper.tsx

const StyleWrapper: FC = (props) => {
  const arrangeTiles = () => {
    StyleUtil.initTimer();
  };
  return (
    <Context.Provider value={{ arrangeTiles }}>
      <div id="cnplStyleWrapper">{props.children}</div>
    </Context.Provider>
  );
};

StyleUtil.tsx

export class StyleUtil{
    public static initTimer(){
      const timeoutId = window.setTimeout(() => {
        console.log("Timeout Called!!");        
       }, 100);
    }
}

when I set timeout value to 0 then the console statement is logged in console but any value other than 0 the log statement is not logged in console. Weird, Am I missing something conceptually here?

I need to write a code to do a polynomial interpolation for any number of user determined points to create a curve that goes through all points on p5js. I think I’ve figured out how to go about creating the matrices using a for loop with 2D arrays to fill with data points with respect to a parameter, t. However, to easily solve the arrays to get the polynomial coefficients, I’m not sure how to go about trying to solving for it, as I’m not sure how to put math.js into the p5js editor on browser. I’m not even sure that would be helpful since as far as I’m aware, math.js’ matrix functions only work for n x n, whereas the ones I’m trying to solve would be A = n x 4 matrix. If there’s any code that could be used to solve this problem, I would love to see it, because at this point, I am very lost.

Myself and a team member have followed the ‘Try this sample’ and ‘Use the app in Teams’ instructions for the In-Meeting sample application:
https://github.com/OfficeDev/TeamsFx-Samples/tree/v2/in-meeting-app

We’ve both followed the same steps on different computers and on different OS’s (Mac and PC), and we are getting the same issue:

“An error has occurred. This application may no longer respond until reloaded”.

The instructions have us open Powershell and run commands in two locations. (‘Try this sample’ Step 5)

1. ‘tabs’ folder, asked to run npm install and npm start
2. ‘bot’ folder, asked to run npm install and npm run start:local

No errors occur when these commands are run initially, but when we open the app up in Teams and click on the button to bring out the side panel, errors show up in both terminals where we ran the commands.

In terminal 1, the tabs folder, we get a ‘proxy error’:

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

Try the new cross-platform PowerShell https://aka.ms/pscore6

PS C:UsersLukeTeamsAppsin-meeting-apptabs> npm install
up to date, audited 1685 packages in 2s

101 packages are looking for funding
  run `npm fund` for details

142 vulnerabilities (125 moderate, 16 high, 1 critical)

To address issues that do not require attention, run:
Compiled successfully!

You can now view microsoft-teams-ext in the browser.

  Local:            https://localhost:3000
  On Your Network:  https://192.168.0.3:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Proxy error: Could not proxy request /getGraphAccessToken?ssoToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik1yNS1BVWliZkJpaTdOZDFqQmViYXhib1hXMCJ9.eyJhdWQiOiI5MzI0MTRiOS04NjM1LTQ3MjYtODlhZS1mYzAzVjOWU2MGMiLCJpc3MiOiJodHRwczovL2xvZ2luLm1pY3Jvc29mdG9ubGluZS5jb20vNTk2ZGYzOWEtNzUyNS00OWU4LWE3ODktYzZhMzY2OGQ5ZWZmL3YyLjAiLCJpYXQiOjE2NDU1NTU2NTYsIm5iZiI6MTY0NTU1NTY1NiwiZXhwIjoxNjQ1NTY0NjQyLCJhaW8iJBVFFBeS84VEFBQUExZTF2NkVIUVpFbkEvSEZ0Q3lkSHp4OEJVU3U0QzR2VlExbFNoWldiMjRBV0JMZWtlbmExOC8wbTlBZzFiajhtIiwiYXpwIjoiMWZlYzhlNzgtYmNlNC00YWFmLWFiMWItNTQ1MWNjMzg3MjY0IiwiYXpwYWNyIjoiMCIsIm5hbWUiOiJMdWtlI6cGllayIsIm9pZCI6ImMyNjdkZDUyLWQ4OTItNDZlZC1iNWMyLWVkMGU5OTdlN2ZmOSIsInByZWZlcnJlZF91c2VybmFtZSI6Ikx1a2VAcDIxcS5vbm1pY3Jvc29mdC5jb20iLCJyaCI6IjAuQVU4QW12TnRXU1YxNkVtbmljYWpabzJlXzdrVUpKTTFoaVpIaWE3OEWEo1Z3hQQUVZLiIsInNjcCI6ImFjY2Vzc19hc191c2VyIiwic3ViIjoiNG01LTlvQ2JKT1ZLb3k1TGduMEtpWnpaNk9YNkU5STR4ZVJsUVMxYjZEbyIsInRpZCI6IjU5NmRmMzlhLTc1MjUtNDllOC1hNzg5LWM2YTM2NjhkOWVmZiIsInV0aSI6IlB0bEs4QnJOcmsVRwTE5Nb0U5QVEiLCJ2ZXIiOiIyLjAifQ.je5zMu4knsZ-NwqSKF1M_n71Ehxgs8WZGsPdIwUu0EBT3qdoHHL2ET4RqoTACqtMC8lDFqxFT2EWwYHcXes02QivXYEvWj8j-MQS-VhAs3FTh1e07qer8jq4cOeaVrLpfBjoCpSnbI_lXYUP-hz77YGWbUZrI6k5rXnij6-Jcn1TmvV9OgD_lrliWGIPHrS28TajvFa1Acu64YJGNAGys-r6uU7U5MrpcEszufRVExx8tDEysNWc55_Wr88Ur5mBIzDgDqiUbEf_RP2ZzlulRlPZC2ZVwI54VZqAWM2LfbCpD5bL9OhT7H9qAml5N8fOXY_WNHlYUWROgtD_iinQ from reflectrdomain.eu.rok.io to http://localhost:5000/.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

In terminal 2, the bot folder, we get a type error:

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

Try the new cross-platform PowerShell https://aka.ms/pscore6

PS C:UsersLukeTeamsAppsin-meeting-appbot> npm install

up to date, audited 188 packages in 1s

12 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS C:UsersLukeTeamsAppsin-meeting-appbot> npm run start:local

> [email protected] start:local
> cross-env NODE_ENV=development.local node ./index.js

API server is listening on port 5000
C:UsersLukeTeamsAppsin-meeting-appbotnode_modulesbotbuilderlibbotFrameworkAdapter.js:192
            const connectorClient = this.createConnectorClientInternal(reference.serviceUrl, credentials);
                                                                                 ^

TypeError: Cannot read properties of undefined (reading 'serviceUrl')
    at BotFrameworkAdapter.<anonymous> (C:UsersLukeTeamsAppsin-meeting-appbotnode_modulesbotbuilderlibbotFrameworkAdapter.js:192:82)
    at Generator.next (<anonymous>)
    at C:UsersLukeTeamsAppsin-meeting-appbotnode_modulesbotbuilderlibbotFrameworkAdapter.js:15:71
    at new Promise (<anonymous>)
    at __awaiter (C:UsersLukeTeamsAppsin-meeting-appbotnode_modulesbotbuilderlibbotFrameworkAdapter.js:11:12)
    at BotFrameworkAdapter.continueConversation (C:UsersLukeTeamsAppsin-meeting-appbotnode_modulesbotbuilderlibbotFrameworkAdapter.js:165:16)
    at C:UsersLukeTeamsAppsin-meeting-appbotindex.js:144:13
    at Layer.handle [as handle_request] (C:UsersLukeTeamsAppsin-meeting-appbotnode_modulesexpresslibrouterlayer.js:95:5)
    at next (C:UsersLukeTeamsAppsin-meeting-appbotnode_modulesexpresslibrouterroute.js:137:13)
    at Route.dispatch (C:UsersLukeTeamsAppsin-meeting-appbotnode_modulesexpresslibrouterroute.js:112:3)

My team member who is on Mac, instead of getting the error I get above, just gets the message “Could not exchange access token for unknown reasons.”, but his client displays the same behaviour.

These errors repeat each time we open and close the side panel.

What can we do to fix the issue, and get it to show as it’s supposed to?

Steps to reproduce:
Follow steps at https://github.com/OfficeDev/TeamsFx-Samples/tree/v2/in-meeting-app

“An error has occurred. This application may no longer respond until reloaded.”

I’m making a commission website for fun.
I have made a jQuery function which parses for divs with #portfolio ids and then creates a custom bootstrap carousel to populate them.

The issue is the .each function is ignoring my second #portfolio div

My website is actually running right now and you can check out the issue here: https://pinkflamess.com/

here’s the html snippet:

<h3>Pixel Sprite</h3>
    <div id = "portfolio" count = 8 gifs="https://i.imgur.com/S5jceRT.gif,https://i.imgur.com/hsz8u5H.gif,
    https://i.imgur.com/Tv3MJJo.gif,https://i.imgur.com/6jNkVn4.gif,https://i.imgur.com/ifahlQx.gif,
    https://i.imgur.com/I5JrulB.gif,https://i.imgur.com/Q3DAk0f.gif,https://i.imgur.com/aPAa3Hf.gif">
    </div>
    <p><em>An animation in a pixelated style. 80 by 80 pixels, 4 frames, any fps </em><br/>
      Price: $10 to $15
    </p>
  <h3>Simple Chibi</h3>
    <div id = "portfolio" count = 8 gifs="https://i.imgur.com/OeE0lK4.gif,https://i.imgur.com/6VVvchn.gif,
    https://i.imgur.com/tr8lxoL.gif,https://i.imgur.com/SMH69wR.gif,https://i.imgur.com/mSkbr6J.gif,
    https://imgur.com/MILhBUn.gif,https://imgur.com/oLUxK6N.gif,https://imgur.com/dreYSnx.gif">
    </div>

here’s the jQuery snippet:

$(document).ready(function(){
  //BOOTSTRAP CAROUSELS
  $('#portfolio').each(function() {
    var gifs = $(this).attr('gifs').split(",");
    var count = $(this).attr('count');
    console.log($(this).attr("gifs")); 
    var strToAppend = '<div id="portfolioControls" class="carousel slide data-interval="10000" data-ride="carousel"><div class="carousel-inner">';
    //Mobile carousel (one image per slide))
    if($(window).width() < 480){
      strToAppend = strToAppend + '<div class="carousel-item active"><img class="d-block w-100" src="' + gifs[0] + '"></div>';
      for(var i = 1; i < count; i++){
          strToAppend = strToAppend + '<div class="carousel-item"><img class="d-block w-100" src="' + gifs[i] + '"></div>';
        }
    }
    //Tablet carousel (two images per slide))
    else if($(window).width() < 768){
      strToAppend = strToAppend + '<div class="carousel-item active"><img class="d-block w-50" src="' + gifs[0] + '"><img class="d-block w-50" src="' + gifs[1] + '"></div>';
      for(var i = 2; i < count; i = i + 2){ //must be divisble by 2
        strToAppend = strToAppend + '<div class="carousel-item"><img class="d-block w-50" src="' + gifs[i] + '"><img class="d-block w-50" src="' + gifs[i+1] + '"></div>';
      }
    }
    //Desktop carousel (three images per slide))
    else{
      strToAppend = strToAppend + '<div class="carousel-item active"><img class="d-block w-25" src="' + gifs[0] + '"><img class="d-block w-25" src="' + gifs[1] + '"><img class="d-block w-25" src="' + gifs[2] + '"><img class="d-block w-25" src="' + gifs[3] + '"></div>';
      for(var i = 4; i < count; i = i + 4){ //must be divisble by 4
        strToAppend = strToAppend + '<div class="carousel-item"><img class="d-block w-25" src="' + gifs[i] + '"><img class="d-block w-25" src="' + gifs[i+1] + '"><img class="d-block w-25" src="' + gifs[i+2] + '"><img class="d-block w-25" src="' + gifs[i+3] + '"></div>';
      }
    }
    strToAppend = strToAppend + '</div><a class="carousel-control-prev" href="#portfolioControls" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span>' +
      '<span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#portfolioControls" role="button" data-slide="next">' +
      '<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>'
    //Adds arrows to every carousel type
    $(this).append(strToAppend);
  });
  });

The console.log only prints out the gifs=”” of the first div, and not the second. (it also only prints once)

Thanks for reading, hope you have a good day/night!

I would like to draw 2 lines. The first line should be red, and the second one should be green. I assumed this would be accomplished by the following code.

<html>
  <canvas id='c'></canvas>
  <script>
    let canvas = document.getElementById('c');
    let ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'red';
    ctx.moveTo(10, 10);
    ctx.lineTo(200, 200);
    ctx.stroke();

    ctx.strokeStyle = 'green';
    ctx.moveTo(20, 200);
    ctx.lineTo(200, 100);
    ctx.stroke();
  </script>
</html>

After the first ctx.stroke() we get the expected result.

However, the second ctx.stroke() does something odd to the first stroke.

I expect the second line to be green, and the first line to remain red, yet they both are drawn with different shades of green.

Why is this happening, and what can I do to avoid this?

The code is availible at this codepen.

when i click my button, a timer is supposed to display a countdown timer. But the button does not work.

let timerCounter = document.getElementById("timer-counter");
let timer;
let timerCount;



function startTimer (){
timer = setInterval(function(){
    timerCount--;
    timerElement.textContent = "Time; " + timerCount;
    if (timerCount === 0){
        clearInterval(timer);
    }
});

}
startButton.addEventListener(“click”, startTimer);

Using props I was able to effectively pass state upwards from my child component to its parent, but a change in the state does not cause a re-render of the page.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const AddToList = (item) => {
    setText([...text, item]);
  };
  const removeFromList = (item) => {
    const index = text.indexOf(item);
    text.splice(index, 1);
  };
  const [text, setText] = React.useState(["default"]);
  return (
    <div className="App">
      <div>
        <button
          onClick={() => {
            AddToList("hello");
          }}
        >
          Add
        </button>
      </div>
      {text.map((item) => {
        return <ChildComponent text={item} removeText={removeFromList} />;
      })}
    </div>
  );
}

const ChildComponent = ({ text, removeText }) => {
  return (
    <div>
      <p>{text}</p>
      <button
        onClick={() => {
          removeText(text);
        }}
      >
        Remove
      </button>
    </div>
  );
};

In the snippet, each time AddToList is called, a new child component is created and the page is re-rendered reflecting that. However, when i call removeFromList on the child component, nothing happens. The page stays the same, even though I thought this would reduce the number of childComponents present on the page. This is the problem I’m facing.