Category: javascript

So i have a code from codepen.io, here’s the link – https://codepen.io/akshzyx/pen/JjOqbRG

The countdown works perfectly well on codepen.io but when i try to run code on GitHub Pages or VS Code the countdown number doesn’t work or show up. Have attached the images at last.

Here’s the code

HTML

    <main>
    <div class="intro">
        <h1 class="intro__headline">The Unix Epochalypse</h1>
        <p class="intro__subheadline">Happening In</p>
        <div class="cd">
            <div class="cd__unit-group">
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Year(s)</div>
                </div>
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Month(s)</div>
                </div>
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Day(s)</div>
                </div>
            </div>
            <div class="cd__unit-group">
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Hour(s)</div>
                </div>
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Minute(s)</div>
                </div>
                <div class="cd__unit">
                    <div class="cd__digits">
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                        <div class="cd__digit" data-col>
                            <div data-pos="next">-</div>
                            <div data-pos="prev">-</div>
                        </div>
                    </div>
                    <div class="cd__unit-label">Second(s)</div>
                </div>
            </div>
            <div class="cd__progress">
                <span class="cd__unit-label">Seconds Since Unix Epoch</span><br>
                <strong data-progress>-</strong>
            </div>
        </div>
        <button id="info-btn" class="btn" type="button">
            <span class="btn__text">?</span>
        </button>
    </div>
    <div id="info" class="content">
        <div class="content__wrap">
            <h2>What’s the Unix Epochalypse?</h2>
            <p>The Unix Epochalypse (or the <a href="https://en.wikipedia.org/wiki/Year_2038_problem" target="_blank" ref="noopener noreferrer">Year 2038 problem</a>) is the day clocks on a number of systems will flip from <strong><time datetime="2038-01-19 03:14:08">January 19, 2038 3:14:08 AM UTC</time></strong> to <strong><time datetime="1901-12-13 20:45:52">December 13, 1901 8:45:52 PM UTC</time></strong>. This is because of the use of a 32-bit signed integer for the current seconds since midnight UTC on <time datetime="1970-01-01 00:00:00">January 1, 1970</time>, the Unix epoch. Values only from -2,147,483,648 to 2,147,483,647 are stored. When finally reaching the limit, it’ll be the seconds before the epoch starting at the lowest supported integer.</p>
            <p>If you have yet to make the complete shift to 64-bit, expect some strange things to happen later. The age of 32-bit is over. The time of 64-bit has come!</p>
        </div>
    </div>
</main>
<footer>
    Made by <a href="https://github.com/akshzyx" target="_blank">@akshzyx</a>
</footer>

CSS

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --hue: 223;
    --bg1: hsl(var(--hue),10%,90%);
    --bg2: hsl(var(--hue),10%,100%);
    --fg1: hsl(var(--hue),10%,10%);
    --fg2: hsl(var(--hue),10%,30%);
    --primary1: hsl(var(--hue),90%,45%);
    --primary2: hsl(var(--hue),90%,55%);
    --primary3: hsl(var(--hue),90%,65%);
    --primary4: hsl(var(--hue),90%,75%);
    --primary5: hsl(var(--hue),90%,85%);
    font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body, button {
    font: 1em/1.5 Hind, sans-serif;
}
body {
    background: var(--bg1);
    color: var(--fg1);
}
a {
    color: var(--primary2);
}
a:not(:hover) {
    text-decoration: none;
}
a:active {
    color: var(--primary1);
}
a:visited {
    color: var(--primary3);
}
h1 {
    font-size: 2em;
    margin: 0 0 1.5rem;
    text-align: center;
}
h2 {
    font-size: 1.5em;
    line-height: 1;
    margin: 0 0 0.75rem;
    padding-top: 0.75rem;
}
p {
    margin: 0 0 1.5em;
}
footer {
    font-size: 0.75em;
    padding: 1.5em;
    text-align: center;
}
.intro__headline,
.intro__subheadline,
.cd__digits,
.cd__unit-label,
.cd__progress {
    font-family: Inconsolata, monospace;
}
.intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    min-height: 19.5em;
    padding: 1.5em;
}
.intro__headline {
    font-size: 3em;
    line-height: 1;
    text-transform: uppercase;
}
.intro__subheadline {
    color: var(--fg2);
    text-align: center;
}
.cd,
.cd__unit-group,
.cd__digits {
    display: flex;
    justify-content: center;
}
.cd {
    flex-wrap: wrap;
    text-align: center;
}
.cd__unit-group {
    margin-bottom: 1.5em;
}
.cd__unit {
    font-size: 3.75em;
    line-height: 1;
    margin: 0 0.75rem;
    width: 2ch;
}
.cd__digits,
.cd__digit {
    position: relative;
}
.cd__digits {
    box-shadow:
        0 0.1em 0.05em var(--bg1) inset,
        0 -0.1em 0.05em var(--bg1) inset;
    font-weight: bold;
    height: 3.75rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}
.cd__digit {
    width: 1ch;
    z-index: -1;
}
.cd__digit--roll-in {
    animation: rollIn 0.5s ease-in-out;
}
.cd__next-digit-fade {
    animation: fade 0.5s ease-in-out;
}
.cd__prev-digit-fade {
    animation: fade 0.5s ease-in-out reverse;
}
.cd__unit-label {
    color: var(--fg2);
    font-size: 0.75rem;
    line-height: 1;
}
.cd__progress {
    width: 100%;
}
.btn {
    background: var(--primary2);
    border-radius: 50%;
    color: #fff;
    position: fixed;
    right: 1.5em;
    bottom: 1.5em;
    text-align: center;
    width: 2.25em;
    height: 2.25em;
    transition: background-color 0.15s linear;
    -webkit-appearance: none;
    appearance: none;
}
.btn:focus,
.btn:hover {
    background-color: var(--primary1);
}
.btn__text {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    height: 100%;
    padding-top: 0.125rem;
}
.content {
    background: var(--bg2);
}
.content__wrap {
    margin: auto;
    padding: 3em 1.5em 1.5em;
    max-width: 32em;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --bg1: hsl(var(--hue),10%,10%);
        --bg2: hsl(var(--hue),10%,20%);
        --fg1: hsl(var(--hue),10%,90%);
        --fg2: hsl(var(--hue),10%,70%);
    }
    a {
        color: var(--primary3);
    }
    a:active {
        color: var(--primary2);
    }
    a:visited {
        color: var(--primary4);
    }
}

/* Animations */
@keyframes rollIn {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

JS

window.addEventListener("DOMContentLoaded",() => {
    const uec = new UnixEpochalypseCountdown(".cd");
    const infoBtn = document.getElementById("info-btn");

    if (infoBtn)
        infoBtn.addEventListener("click",jumpToHelp);
});

function jumpToHelp() {
    const info = document.getElementById("info");

    if (info) {
        window.scrollTo({
            top: info.offsetTop,
            left: 0,
            behavior: "smooth"
        });
    }
}

class UnixEpochalypseCountdown {
    constructor(qs) {
        this.el = document.querySelector(qs);
        this.time = [];
        this.animTimeout = null;
        this.updateTimeout = null;
        this.update();
    }
    getProgressInSeconds() {
        if (typeof moment === "function") {
            const now = moment();
            const ms = Math.ceil(now.valueOf() / 1e3);

            return ms >> 0;
        } else {
            return 0;
        }
    }
    getTimeLeft() {
        let timeLeft = {
            y: 0,
            mo: 0,
            d: 0,
            h: 0,
            m: 0,
            s: 0
        };

        if (typeof moment === "function") {
            const later = moment((2**31 - 1) * 1e3);
            const now = moment();
            const diff = moment.duration(later.diff(now));

            if (diff.valueOf() >= 0) {
                timeLeft.y += diff.years();
                timeLeft.mo += diff.months();
                timeLeft.d += diff.days();
                timeLeft.h += diff.hours();
                timeLeft.m += diff.minutes();
                timeLeft.s += diff.seconds();
            }
        }

        return timeLeft;
    }
    clearAnimations() {
        if (this.el) {
            const colAnimsToClear = this.el.querySelectorAll("[data-col]");

            Array.from(colAnimsToClear).forEach(a => {
                a.classList.remove("cd__digit--roll-in");
            });

            const posAnimsToClear = this.el.querySelectorAll("[data-pos]");

            Array.from(posAnimsToClear).forEach(a => {
                a.classList.remove("cd__next-digit-fade","cd__prev-digit-fade");
            });
        }
    }
    update(doAnimations = false) {
        // start with all dashes
        if (!this.time.length) {
            let digitCount = 12;

            while (digitCount--)
                this.time.push("-");
        }
        // update data
        const display = this.getTimeLeft();
        const displayDigits = [];

        for (let v in display) {
            const digits = `${display[v]}`.split("");
            // add zero to single digits
            if (digits.length < 2)
                digits.unshift("0");

            displayDigits.push(...digits);
        }
        // update display
        const cols = this.el.querySelectorAll("[data-col]");

        if (cols) {
            Array.from(cols).forEach((c,i) => {
                const digit = displayDigits[i];

                if (digit !== this.time[i]) {
                    const next = c.querySelector(`[data-pos="next"]`);
                    const prev = c.querySelector(`[data-pos="prev"]`);

                    if (doAnimations === true) {
                        c.classList.add("cd__digit--roll-in");
                        next.classList.add("cd__next-digit-fade");
                        prev.classList.add("cd__prev-digit-fade");
                    }

                    next.innerHTML = digit;
                    prev.innerHTML = this.time[i];
                }
            });
        }

        this.time = displayDigits;
        // progress in seconds
        const progress = this.el.querySelector("[data-progress]");

        if (progress)
            progress.innerHTML = this.getProgressInSeconds();
        // loop
        clearTimeout(this.animTimeout);
        this.animTimeout = setTimeout(this.clearAnimations.bind(this),500);

        clearTimeout(this.updateTimeout);
        this.updateTimeout = setTimeout(this.update.bind(this,true),1e3);
    }
}

I’m also attaching images of result from codepen, github pages/vs code

codepen.io result – vs code result(same as github pages hosting)

I’m using flatpickr as a datepicker in html/js. I pull the module in using jsdelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

It’s been behaving normally for years, but yesterday it started behaving oddly. Here is my javascript, which I have not changed:

$("input[type='datetime'], input[type='datetime-local']").flatpickr({
        enableTime: true,
          altInput: true,
          altFormat: "F j, Y at h:i K",
          dateFormat: "Y-m-d H:i",
        time_24hr: false
      });

And that displays a datepicker like so:

When I select a date, the value of the datepicker flatpickr-input class changes to the datetime chosen and the datepicker form-control input class changes its name to datepicker form-control input active. I think that’s all expected.

The problem is that when I click a second time (either on another date or outside of the calendar div), the datetime removes my selection and replaces it with 2022-01-01 00:00.

Why is it doing that rather than keeping the value I select?

im new to this and i have this simple code for my game that increases score on click

var count = document.getElementById("score");
var score = 0;
var audio = new Audio('pop.mp3');

function increaseScore(){
    score++;
    count.innerHTML = score;
}

how do i add events like if score is bigger than 100 do a certain thing i already tried

if (score > 100) {

}

and its not workin

I am building a simple blog website with Next.js and Sanity. I am able to render the list of posts on a /blog route, but when I click the link to navigate to a specific post, I am unable to render anything to the screen.

import client from '../../client'

export default function Post({post}) {
  console.log(post)
  return (
    <main className="px-5 m-auto mt-10 max-w-7xl">
      <h1 className="text-5xl font-bold"></h1>
    </main>
  )
}

export const getStaticPaths = async () => {
  const paths = await client.fetch(
    `*[_type == "post" && defined(slug.current)]{
      "params": {
        "slug": slug.current
      }
    }`
  )

  console.log(paths)

  return {
    paths,
    fallback: true,
  }
}

export const getStaticProps = async ({params}) => {
  const query = `*[_type == "post" && slug.current == $slug][0]{
    _id,
    _createdAt,
    title,
    author->{
      name,
      image
    }
    mainImage,
    slug,
    body
  }`

  const {slug} = params

  const post = await client.fetch(query, {slug})

  return {
    props: post,
  }
}

I fetched a login form asynchronously, and setted it inside body. I declared it’s on submit form before that, and now getting a Reference error. Is there any way to set onsubmit using html, without having to call loginForm.onsubmit = login.

const result = await fetch('/session');

if (result) {
    const login = await result.text();
    document.body.innerHTML = login;
}

function login(e) {
    e.preventDefault();
    const loginForm = document.getElementById('loginForm');
    console.log(loginForm);
    const options = { method: loginForm.method, body: new FormData(loginForm) };
    const loginButton = document.getElementById('loginButton');
    const loginButtonHTML = loginButton.innerHTML;
    loginButton.innerHTML = 'Loading...';
    disableElements(loginForm);
    // const result = await fetch(loginForm.action, options);
}

The html is:

<form id="loginForm" action="/user/login" method="post" onsubmit="login">
    <input type="text" name="username" autocomplete="username" placeholder="Username">
    <input type="password" name="password" autocomplete="current-password" placeholder="Password">
    <button id="loginButton" type="submit">Login</button>
</form>

Here is my git hub page= https://github.com/25garcial/rock-paper-scissors

the problem is that the css page does not link with my html page. i have done nothing different from any other page except that i now have a javascript file.

I have tried moving the link and script tags around and it does not fix the problem. I still do not know how to fix this problem as i have found nothing else related to my problem and i cannot figure it out myself.

In the following example we are accessing properties of an object but why does accessing the object with the Member Access throw an error:

 var d = {a: 10, b: 20, c:30};
         
         var keys = Object.getOwnPropertyNames(d);
         
         for(let i = 0; i < keys.length; i++){
            console.log(d[keys[i]]);
            //console.log(d.keys[i]); //throws error
         }

For example shown above, i would assume this would be because if we accessed it with the member access operator it would try access d immediately without initializing keys[i]. Would this be correct?

I have a question that has been going through my mind for a while now. Should every component created be reusable??
Let’s suppose that we have some html,css and javascript that can’t get reused. For example a CRUD table for a specific product ( for example CRUD of users ) that gets updated through methods and watchers and other stuff. It could be created as a component called UsersTable but then that component can’t get reused since it has the methods relative to users management through DB.
So for example, should that component be declared as plain html/css and js inside the parent or should it be declared as a component and emit events in order to communicate with its parent?

I am trying to create an automation test that simply verifies if content exists/is displayed with a hyperlink embedded in the text. Please find attached my screenshot for more info, I am just trying to verify all the content in the red box. I also highlighted the code in the google dev tool.

I’m trying to use the advanced violin plot in the following example:
https://plotly.com/javascript/violin/

Image

How do I style the color of the y0 labels? i.e. Thursday, Friday, Saturday and Sunday.
The documentation isn’t clear on this. I’m able to style the yaxis and xaxis separately, but since these are sub plots it doesn’t work as intended.

https://codepen.io/crajar/pen/eYeaPpX

var trace1 = {
            text: "sample length: 32",
            hoveron: "points+kde",
            meanline: {
                visible: true
            },
            legendgroup: "F",
            scalegroup: "F",
            points: "all",
            pointpos: 1,
            box: {
                visible: true
            },
            jitter: 0,
            scalemode: "count",
            marker: {
                line: {
                    width: 2,
                    color: "#bebada"
                },
                symbol: "line-ns"
            },
            showlegend: false,
            side: "positive",
            type: "violin",
            name: "F",
            span: [
                0
            ],
            line: {
                color: "#bebada"
            },
            y0: "Thursday",
            x: [
                10.07,
                34.83,
                10.65,
                12.43,
                24.08,
                13.42,
                12.48,
                29.8,
                14.52,
                11.38,
                20.27,
                11.17,
                12.26,
                18.26,
                8.51,
                10.33,
                14.15,
                13.16,
                17.47,
                27.05,
                16.43,
                8.35,
                18.64,
                11.87,
                19.81,
                43.11,
                13.0,
                12.74,
                13.0,
                16.4,
                16.47,
                18.78
            ],
            orientation: "h"
        }


var trace2 = {
            text: "sample length: 30",
            hoveron: "points+kde",
            meanline: {
                visible: true
            },
            legendgroup: "M",
            scalegroup: "M",
            points: "all",
            pointpos: -0.6,
            box: {
                visible: true
            },
            jitter: 0,
            scalemode: "count",
            marker: {
                line: {
                    width: 2,
                    color: "#8dd3c7"
                },
                symbol: "line-ns"
            },
            showlegend: false,
            side: "negative",
            type: "violin",
            name: "M",
            span: [
                0
            ],
            line: {
                color: "#8dd3c7"
            },
            y0: "Thursday",
            x: [
                27.2,
                22.76,
                17.29,
                19.44,
                16.66,
                32.68,
                15.98,
                13.03,
                18.28,
                24.71,
                21.16,
                11.69,
                14.26,
                15.95,
                8.52,
                22.82,
                19.08,
                16.0,
                34.3,
                41.19,
                9.78,
                7.51,
                28.44,
                15.48,
                16.58,
                7.56,
                10.34,
                13.51,
                18.71,
                20.53
            ],
            orientation: "h"
        }

var trace3 = {
            text: "sample length: 9",
            hoveron: "points+kde",
            meanline: {
                visible: true
            },
            legendgroup: "F",
            scalegroup: "F",
            points: "all",
            pointpos: 0.4,
            box: {
                visible: true
            },
            jitter: 0,
            scalemode: "count",
            marker: {
                line: {
                    width: 2,
                    color: "#bebada"
                },
                symbol: "line-ns"
            },
            showlegend: false,
            side: "positive",
            type: "violin",
            name: "F",
            span: [
                0
            ],
            line: {
                color: "#bebada"
            },
            y0: "Friday",
            x: [
                5.75,
                16.32,
                22.75,
                11.35,
                15.38,
                13.42,
                15.98,
                16.27,
                10.09
            ],
            orientation: "h"
        }


var trace4= {
            text: "sample length: 10",
            hoveron: "points+kde",
            meanline: {
                visible: true
            },
            legendgroup: "M",
            scalegroup: "M",
            points: "all",
            pointpos: -0.3,
            box: {
                visible: true
            },
            jitter: 0,
            scalemode: "count",
            marker: {
                line: {
                    width: 2,
                    color: "#8dd3c7"
                },
                symbol: "line-ns"
            },
            showlegend: false,
            side: "negative",
            type: "violin",
            name: "M",
            span: [
                0
            ],
            line: {
                color: "#8dd3c7"
            },
            y0: "Friday",
            x: [
                28.97,
                22.49,
                40.17,
                27.28,
                12.03,
                21.01,
                12.46,
                12.16,
                8.58,
                13.42
            ],
            orientation: "h"
        }

var trace5 = {
            text: "sample length: 28",
            hoveron: "points+kde",
            meanline: {
                visible: true
            },
            legendgroup: "F",
            scalegroup: "F",
            points: "all",
            pointpos: 0.55,
            box: {
                visible: true
            },
            jitter: 0,
            scalemode: "count",
            marker: {
                line: {
                    width: 2,
                    color: "#bebada"
                },
                symbol: "line-ns"
            },
            showlegend: true,
            side: "positive",
            type: "violin",
            name: "F",
            span: [
                0
            ],
            line: {
                color: "#bebada"
            },
            y0: "Saturday",
            x: [
                20.29,
                15.77,
                19.65,
                15.06,
                20.69,
                16.93,
                26.41,
                16.45,
                3.07,
                17.07,
                26.86,
                25.28,
                14.73,
                44.3,
                22.42,
                20.92,
                14.31,
                7.25,
                10.59,
                10.63,
                12.76,
                13.27,
                28.17,
                12.9,
                30.14,
                22.12,
                35.83,
                27.18
            ],
            orientation: "h"
        }

var trace4 = {
            text: "sample length: 59",
            hoveron: "points+kde",
            meanline: {
                visible: true
            },
            legendgroup: "M",
            scalegroup: "M",
            points: "all",
            pointpos: -1.1,
            box: {
                visible: true
            },
            jitter: 0,
            scalemode: "count",
            marker: {
                line: {
                    width: 2,
                    color: "#8dd3c7"
                },
                symbol: "line-ns"
            },
            showlegend: true,
            side: "negative",
            type: "violin",
            name: "M",
            span: [
                0
            ],
            line: {
                color: "#8dd3c7"
            },
            y0: "Saturday",
            x: [
                20.65,
                17.92,
                39.42,
                19.82,
                17.81,
                13.37,
                12.69,
                21.7,
                9.55,
                18.35,
                17.78,
                24.06,
                16.31,
                18.69,
                31.27,
                16.04,
                38.01,
                11.24,
                48.27,
                20.29,
                13.81,
                11.02,
                18.29,
                17.59,
                20.08,
                20.23,
                15.01,
                12.02,
                10.51,
                17.92,
                15.36,
                20.49,
                25.21,
                18.24,
                14.0,
                50.81,
                15.81,
                26.59,
                38.73,
                24.27,
                30.06,
                25.89,
                48.33,
                28.15,
                11.59,
                7.74,
                20.45,
                13.28,
                24.01,
                15.69,
                11.61,
                10.77,
                15.53,
                10.07,
                12.6,
                32.83,
                29.03,
                22.67,
                17.82
            ],
            orientation: "h"
        }

var trace6 = {
            text: "sample length: 18",
            hoveron: "points+kde",
            meanline: {
                visible: true
            },
            legendgroup: "F",
            scalegroup: "F",
            points: "all",
            pointpos: 0.45,
            box: {
                visible: true
            },
            jitter: 0,
            scalemode: "count",
            marker: {
                line: {
                    width: 2,
                    color: "#bebada"
                },
                symbol: "line-ns"
            },
            showlegend: false,
            side: "positive",
            type: "violin",
            name: "F",
            span: [
                0
            ],
            line: {
                color: "#bebada"
            },
            y0: "Sunday",
            x: [
                16.99,
                24.59,
                35.26,
                14.83,
                10.33,
                16.97,
                10.29,
                34.81,
                25.71,
                17.31,
                29.85,
                25.0,
                13.39,
                16.21,
                17.51,
                9.6,
                20.9,
                18.15
            ],
            orientation: "h"
        }

var trace7 = {
            text: "sample length: 58",
            hoveron: "points+kde",
            meanline: {
                visible: true
            },
            legendgroup: "M",
            scalegroup: "M",
            points: "all",
            pointpos: -0.9,
            box: {
                visible: true
            },
            jitter: 0,
            scalemode: "count",
            marker: {
                line: {
                    width: 2,
                    color: "#8dd3c7"
                },
                symbol: "line-ns"
            },
            showlegend: false,
            side: "negative",
            type: "violin",
            name: "M",
            span: [
                0
            ],
            line: {
                color: "#8dd3c7"
            },
            y0: "Sunday",
            x: [
                10.34,
                21.01,
                23.68,
                25.29,
                8.77,
                26.88,
                15.04,
                14.78,
                10.27,
                15.42,
                18.43,
                21.58,
                16.29,
                17.46,
                13.94,
                9.68,
                30.4,
                18.29,
                22.23,
                32.4,
                28.55,
                18.04,
                12.54,
                9.94,
                25.56,
                19.49,
                38.07,
                23.95,
                29.93,
                14.07,
                13.13,
                17.26,
                24.55,
                19.77,
                48.17,
                16.49,
                21.5,
                12.66,
                13.81,
                24.52,
                20.76,
                31.71,
                7.25,
                31.85,
                16.82,
                32.9,
                17.89,
                14.48,
                34.63,
                34.65,
                23.33,
                45.35,
                23.17,
                40.55,
                20.69,
                30.46,
                23.1,
                15.69
            ],
            orientation: "h"
        }

var data = [trace1,trace2,trace3,trace4,trace5,trace6,trace7]

var layout = {
        hovermode: "closest",
        width: 400,
        yaxis: {
            showgrid: true
        },
        title: "Total bill distribution<br><i>scaled by number of bills per gender",
        legend: {
            tracegroupgap: 0
        },
        violingap: 0,
        violingroupgap: 0,
        violinmode: "overlay",
        height: 700
    }

Plotly.newPlot("myDiv", data, layout)

I have a VBA utility that fully updates a Word document. To do so it must invoke the updater method of my reference manager, Mendeley. Currently the code to do so is as follows:

Sub UpdateReferences()
    ' Mendeley update: Needs the library reference: Tools - References - MendeleyPlugin ticked.
    Refresh
End Sub

However, the latest versions of the Mendeley plugin are implemented in Javascript. It’s not easy to reverse engineer such plugins, but the corresponding update method seems to be associated with the key UPDATE_CITATIONS_AND_BIBLIOGRAPHY. Might there be a way to invoke it from VBA?

We have a mobile app exhibiting very odd behavior. On desktops it works fine. But on mobile devices, touch events are not being handled properly.

This is the event setup code:

document.addEventListener('mousemove', e =>
        {
            this.mouseMoveListener(e);
        });

        document.addEventListener('mousedown', e =>
        {
            this.mouseDownListener(e);
        });

        document.addEventListener('mouseup', e =>
        {
            this.mouseUpListener(e);
        });
    
        document.addEventListener('touchmove', e => firstTouchEventCancel(this.mouseMoveListener(e)), true);
        document.addEventListener('touchstart', e => firstTouchEventCancel(this.mouseDownListener(e)), true);
        document.addEventListener('touchend', e => firstTouchEventCancel(this.mouseUpListener(e)), true);

the function firstTouchEventCancel is as follows:

export function firstTouchEventCancel(fn, thisObj)
{
    if (thisObj)
    {
        fn = fn.bind(thisObj)
    }
    return function (e)
    {
        e.preventDefault()
        e.stopPropagation()
        return fn(e.changedTouches[0])
    }
}

I’ve logged the e / event variable immediately in both the firstTouchEventCancel method and in the event handler methods. In both cases the event is an empty object.

I need the event to tell me where the user touched and swiped if they are swiping. But I’m getting nothing. There are no other event handlers setup that might be consuming the event. Plus if there were these methods would not be called.

Has anyone run into this?

In all of the event handlers on mobile the events sent to the listeners are empty.

I am trying to understand how to write a multiway number partitioning algorithm that will take the sum of a given array and split it into fixed number of subsets such that the sum of the subsets are as similar as possible.

let num_list = [10,5,20,100,30,30,20,10]
let num_list_sum = 225
let n = 2
let equal_parts_array = []
let equal_parts = equal_parts_array.push(num_list_sum / n)
equal_parts = [112,113]


Example of Possible Results Should Be Such: [30,30,20,10,20], [10,5,100]

Im trying to create a Danfo.js dataframe to an array. I was wondering if there’s a way to do this without having to iterate over the dataframe.

I have multiple video streams on a page though only one should be seen/heard at any time. Stream 1 should be visible on page load, then clicking a “Stream 2” or “Stream 3” button should switch to it accordingly.

Using Show/hide js events won’t work because the hidden stream can still be heard on the page when hidden. My knowledge of js is limited to none (but I’m trying!) though it seems that detach() is a good fit for my use case as the element can be removed but also reinstated.

The below descendent of this on W3schools successfully hides Stream (element) 2, with two buttons of corresponding IDs, but ultimately I’m a way off the seamless toggle that I’m after…

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var x;
  $("#button1_id").click(function(){
    x = $("#element_two_id").detach();
  });
  $("#button2_id").click(function(){
    $("#element_one_id").prepend(x);
  });
  
});
</script>
</head>
</html>

Is this achievable with detach() or am I barking up the wrong tree?