Category: javascript

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.

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.

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’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?

I need to send a file uploaded by user in the payload of my post request. I have converted file into binary form. What will be the type for this file. Currently I’m using string.

export interface PostRequestPayload {
  title: string;
  description: string;
  content: string;
  file?: string ; //what will be the type for this
}

I’m new to WordPress and PHP. So, as the title says, I’m trying to disable the “publish” button (from post section), until a featured image is uploaded by the user.

I’ve tried this solution https://wpscholar.com/blog/require-featured-image-wordpress/ and didn’t work as intended. I’ve given up with PHP solutions, now I’m trying with JS, but my code doesn’t works. So… Any help to this poor soul?

function disable_publish_button_if_no_featured_image() {
   global $post;
     
   // No post, skip.
    if ( ! $post ) {
        return;
    }
 
    // Different post type? Skip.
    if ( 'post' !== get_post_type( $post ) ) {
        return;
    }
 
   // You could also use something like WP_Screen::is_block_editor() to check if Block Editor is loaded.
    
   ?>
    <script defer>
        var postLocked = false;
        wp.domReady( () => {
        
          wp.data.subscribe(function(){
            // Featured Image ID.
            var imageId = wp.data.select( 'core/editor' ).getEditedPostAttribute('featured_media');
        
            // If we have no image ID, and we already locked the post, we won't do anything.
            if ( ! imageId ) {
        
               // No Image ID and post is not locked. Let's lock it.
               if ( ! postLocked ) {
                       postLocked = true;
                       wp.data.dispatch('core/editor').lockPostSaving('noFeaturedImage');
                }
             } else if (postLocked) {
                postLocked = false;
                wp.data.dispatch( 'core/editor' ).unlockPostSaving( 'noFeaturedImage' );                 
             }
        
           });
        
        });
    </script>
   <?php

I was searching some ready made jquery or javascript color picker.

Which will allow to pick color from uploaded image

Question: Dose anyone had such experience and found such lib ?

Question2: Is it at all possible to achieve in browser through js ?

I want to see if there is a better way to check if all values of array are equal to number. I have it working with a foreach but wanted to see if I can do this anyway else?

let valid = true;
$.each(data.resultStatus, function (index, resultStatus) {
    if (resultStatus.ResultCode == "2") {
        valid = false;
   }
});

I have a parsed json array:

parsedJson = JSON.parse(comments);
const reformattedArray = parsedJson.map(({username, rating}) => ({[username]: rating}));

[{…}, {…}, {…}, {…}, {…}]
[{First username: 5}, {Second username: 4}, {Third username: 3}, {Fourth username: 2}, {Fifth username: 1}]

but how is it possible to look my array like this:

{…,…,…,…,…}
{First username: 5, Second username: 4, Third username: 3, Fourth username: 2, Fifth username: 1}

Is it possible to make this array to look like this?