Category: javascript

I’m developing a custom e-reader app. I would like to make a custom highlighting menu, but I’m having trouble disabling the “Copy/Paste/Share” menu that pops up when text is selected on mobile devices. As far as I have researched, it seems impossible to disable without disabling selection altogether. But I wonder if by chance anyone has found a workaround.

I am aware of user-select: none which disables all selection. This is not desirable for me because I will need to access the javascript selection API for saving highlights, among other things.

Thanks!

I am building an app in NextJS which uses Firebase authentication. After successful authentication, I then wish to fetch additional details about the customer stored within a mongodb instance (or create a new document for the customer on first login). Because I cannot access the firebase auth object inside getServerSideProps, I have to wrap the dashboard in another component which initiates the firebase auth, then redirects to dashboard passing the user.uid as a parameter to fetch customized/dynamic content inside getServerSideProps. I have created a dashboard.js, and then a dashboard/[id].js.

dashboard.js

export default function DashboardAuth(props) {
  
  const [user, loading, error] = useAuthState(firebase.auth())

  if (user){
    return window.location.href = `/dashboard/${user.uid}`
  }else{
    return <SignIn/>
  }
    
  }

/dashboard/[id].js

export async function getServerSideProps({ params }) {

    let userData 
    console.log("Logging in ")
    const { db } = await connectToDatabase();
    console.log("connected to database, awaiting query response with uid")
    const findUserResp = await db
      .collection("users")
      .findOne({'uid': params.id})
    
    if(findUserResp ){
      console.log("user data exists")
      userData = {
        uid: findUserResp.uid,
        email: findUserResp.email,
        displayName: findUserResp.displayName,
        photoURL: findUserResp.photoURL,
        storageQuoteRemaining: findUserResp.storageQuoteRemaining,
        emailVerified: findUserResp.emailVerified,
        currentPage: '/dashboard'
      }
    }else{
        console.log("user data does not exist") 
        userData = {
            uid:params.id,
            email: '',
            displayName: '',
            photoURL: '',
            storageQuoteRemaining: 0,
            emailVerified: false,
            currentPage: '/dashboard'
        }
        const addUserResp = await db
            .collection("users")
            .insertOne(userData)

    }
    console.log("returning userdata below")
    console.log(userData)
    return {
      props: {
        userData
      }
    }
}


export default function Dashboard(props) {
  
  const [user, loading, error] = useAuthState(firebase.auth())
  const userContext = getUserContext()
  useEffect(() => {
    userContext.handleCurrentUser(props.userData)
    }, []);
  if (user && props.userData.uid === user.uid){
    return  <Layout  children={<CreateItem/>}/>
  }else{
    return <SignIn/>
  }
    
  }

My main issue is that after the user is initially added to mongodb on first login, immediatley after redirect to [id].js, I am presented with an error

Error: Error serializing `.userData._id` returned from `getServerSideProps` in "/dashboard/[id]".
Reason: `object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types.

but on refresh this disappears.

Also I don’t like how I have written my redirect but useRouter does not work. Any advice on how to better do this would be appreciated.

I have a flatten data like this that has slug property and I have to convert it to a nested object based on this field:

[
    {
        "id": "e4679a79-48b6-5783-a42f-e4b5a1a4a206",
        "slug": "root/01-topic",
        "frontmatter": {
            "title": "Topic 1"
        }
    },
    {
        "id": "b6cd27c5-8786-5f3f-ae60-7dffcb002d6c",
        "slug": "root/02-topic",
        "frontmatter": {
            "title": "Topic 2"
        }
    },
    {
        "id": "eca8b1c5-30a8-54e3-a3e9-7c482ae9d450",
        "slug": "root/01-section/01-topic",
        "frontmatter": {
            "title": "Topic 1"
        }
    },
    {
        "id": "7bb24e88-8e54-5722-93f1-185bf0f1dd6c",
        "slug": "root/01-section/01-subsection/01-topic",
        "frontmatter": {
            "title": "Topic 1"
        }
    },
    {
        "id": "e93bf045-1798-54d2-a2bc-d5a2eb12a49d",
        "slug": "root/01-section/01-subsection/02-topic",
        "frontmatter": {
            "title": "Topic 2"
        }
    },
    {
        "id": "3ac918f1-31af-501e-bc98-37b33d2bccbd",
        "slug": "root/02-section/01-subsection/01-topic",
        "frontmatter": {
            "title": "Topic 3"
        }
    },
    {
        "id": "1c9021a2-d346-57b8-9586-a48e7e3eb54f",
        "slug": "root/02-section/01-title",
        "frontmatter": {
            "title": "Subsection 1"
        }
    },
   
    ]

and I want to convert it to a new structure that has cildrens so I can render them on the screen to users

[
  { id: "", slug: "root/topic-01", title: "Topic 1" },
  { id: "", slug: "root/topic-02", title: "Topic 2" },
  {
    id: "",
    slug: "root/section-01",
    title: "Topic 2",
    children: [
      { id: "", slug: "root/section-01/topic-01", title: "Topic 1" },
      {
        id: "",
        slug: "root/section-01/subsection-01",
        title: "Topic 1",
        children: [
          {
            id: "",
            slug: "root/section-01/subsection-01/topic-01",
            title: "Topic 1",
          },
        ],
      },
    ],
  },
];

I think that I need to use recursive and having a root node and childrens to it but do not know how to it exactly

can anyone help?

I Have a problem.
My YouTube is available from an hour to an hour an then i cant even open he website.
i think its a sw.js problem, but i dont think so.

I’m asking if its repairable with a JSI (JavaScript Injection) or simply change some of the setting while i can use YouTube.

Before You Ask;

1. My WiFi Its ok
2. I’m not that guy that dont know how to startup a computer

About the Number 2, you can use technical language.

Can i have some help?
Thanks

I want to make an application which switches off my computer at a specific time(user input) and switches it on after approximately 12 hours.

Can I make that using JavaScript? Can someone help me with this?

i use leaflet.js to show a route in my web project. I have mastered everything successfully, except that I cannot display instruction points on the route.

i used the following code to show the Route on the map:

api.getRoute(routingLink).then(res =>{
    const routeLayer = L.geoJSON(res.data.features,{}).addTo(layerGroup) //shows route on the map 
})

my question is how can i add instruction points to the route that shows the instruction in popup on clicking it.

here a screenshot from the route:
shows the route between to places but not the instructions

I’ve successfully merged my cubes, although they seem to merge together reverting back to their original position/rotation, ignoring the declared positioning/rotation

var geometries = [];

cube1.position.set( 0, 0, 0 );
geometries.push( cube1 );

cube2.position.set( 1, 0, 0 );
geometries.push( cube2 );

cube3.position.set( 0, 1, 0 );
geometries.push( cube3 );

const cubes = BufferGeometryUtils.mergeBufferGeometries( geometries );

scene.add( cubes );//All the cubes get merged on 0, 0, 0 - overlapping one another

How do I position the cubes so they can be merged in their declared positions?

I am able to add DOM elements to HTML canvas via the code.

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->

<style>
#gameCanvas {
  background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
  <div id="eqn1"> $3+3=$<input type="text" id="q1j" />
    </div>
  <div id="eqn2"> 3+2=<input type="text" id="q2j" />
    </div>
  <div id="eqn3"> 5+2=<input type="text" id="q3j" />
    </div>
  <canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var m=1;
var quest=[];
quest[m]= document.getElementById(`q${m}j`);

  var values = [];
  var stage = new createjs.Stage("gameCanvas");
  var obj=[];
  can = document.getElementById("gameCanvas");
function response(){
    alert("New Question");
    document.getElementById(`eqn${m}`).remove();
    m=m+1;
    
    quest[m] = document.getElementById(`q${m}j`);
    quest[m].addEventListener("keyup", enterFunction);
    values[m] = document.getElementById(`q${m}j`);
    obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
    obj[m].x = Math.random()*can.width;
    obj[m].y = 0.5;
    stage.addChild(obj[m]);
}
function startGame() {  
    quest[m].addEventListener("keyup", enterFunction);
    values[m] = document.getElementById(`q${m}j`);
    obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
    obj[m].x = Math.random()*can.width;
    obj[m].y = 0.5;
    stage.addChild(obj[m]);
    createjs.Ticker.addEventListener("tick", handleTick);
    createjs.Ticker.setFPS(2);
    function handleTick(event){
    drop(m);
    stage.update();
    }
}
 function drop(i){
      obj[i].x += 1;
      obj[i].y +=3;
 }
 function enterFunction(){
  if (event.keyCode === 13 ) {
   document.getElementById("myBtn").click();
   }
 }
</script>
<body onload="startGame();">
    <div >
  <canvas>This browser or document mode doesn't support canvas object.</canvas>
    </div>
</body>
<button id="myBtn" onclick="response()">New Question</button>
</html>

When I teach math, I typically make a worksheet where the delimeters are set to $ $ (i.e. single dollar signs around math equations (see question of the post here). I also attached the code to change the delimeters accordingly below.

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\(', '\)']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
</script>

Placing the delimeters inside, e.g. the $3+3$ part, messes up the code to the point where it does not work. I do not know if it is jquery or something that isn’t allowing it, but I would really any help to get the $ $ delimeters to respond within div elements in canvas by adding the tiny bit of code above to canvas. I can get them to work if the delimeters are like this (3+3) but I do not want that.

I have created a website for a photographer that has a blog page on the site. I want only that photographer to have permission to create blog entries to the site. Do I need to make a user login that checks if that user (the photographer) has logged into the site and then allow posts to the blog using JavaScript? Do I need backend languages to make this happen (I only am familiar with frontend technology)? Just looking to be pointed in the correct direction.

There is an array 8×8:

var tiles: [
    1, 3, 3, 3, 1, 1, 3, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 1, 1, 2, 1, 1,
    1, 1, 1, 1, 1, 1, 1, 1,
    1, 1, 1, 2, 1, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 1, 2, 1, 1, 1,
    1, 1, 1, 0, 0, 1, 1, 1
  ];

How to get element by column, row index, I tried this function from network:

getElement(row, column) {
    var index = row * 8 + column; 
}

But I did not get how does this function work, why we multiply on 8 and plus column?

I am running a platform that provides simple forms and simple outputs for a bunch of clients who embed this features in there webpages by iframe. As these forms and outputs tend to grow over common screen heights, the idea is to let the main scrollbar of the embedding webpage also control the scrollbar of the embedded iframe, i.e. if the scrollbar reaches the iframe, the embedding page stops to scroll, but the iframe is scrolled till it reaches its bottom. Afterwards, the embedding page will be continued to be scrolled. Embedding pages and my platform are on different domains.

It is possible for me to include some (perferently vanilla) javascript besides the HTML code for iFrame.

My questions:
1.) Is there a framework to handle control of the scrollable elements? (I have seen such things on a newspaper website, but it isn’t online anymore.)
2.) Am I running into some Cross-Domain same origin policy issues anyway?

Say I have an array such as below, what would the best method be to separate these into individual arrays if the times overlap? I’m using moment but am a bit unsure of how to tackle this.

I know I have to sort the array initially.

data:

const timetable = [
  { class: 'one', start: '2021-11-16T09:00:00', end: '2021-11-16T10:00:00' },
  { class: 'two', start: '2021-11-16T010:00:00', end: '2021-11-16T11:00:00' },
  { class: 'three', start: '2021-11-16T09:00:00', end: '2021-11-16T10:00:00' },
];

expected:

const timetable = [
  [
    { class: 'one', start: '2021-11-16T09:00:00', end: '2021-11-16T10:00:00' },
    { class: 'two', start: '2021-11-16T010:00:00', end: '2021-11-16T11:00:00' },
  ],
  [
    {
      class: 'three',
      start: '2021-11-16T09:00:00',
      end: '2021-11-16T10:00:00',
    },
  ],
];

I am trying to fetch certain data from the server.

The client-side runs a function from script.js to fetch a JSON file from the server and the server will return back with the config (JSON file) which is stored in the same folder as server.js, being called config.json. So the config can be used in a script.js.

For the server I am using express.
Any help regarding this will be extremely appreciated, thanks.

Yo mates, I have a question. Is it possible to get extract working element from array without using a loop?

By working I mean, having some characteristic trait or whatever.

For example:

document.scroll(function(){
  if($('.super_duper_class').working){
    $('.super_duper_class').css('something...');
  }
});

I would like to write the following variable in the HTML code through JavaScript.

{
  "content": "Hallo Welt, das ist ein Testn",
  "filelength": 1,
  "filename": "a5c12c102bdaed8ee80168cb41606295eaf5512ba04045fac5dd0dc65c2f54f13566090025c05f14cdfdf9b1e39ce835c6f3262a4aedba31f8b6d07ed299b23b",
  "language": "plain",
  "path": "caadaf7ed1f27ea37cbb9157d9c6cff1683cae85244b772c856b660c3609ad32faa0d6997ecaf727c46650443f1a03f63c0f67219f46d10cf5295556579422b6/c6ee9e33cf5c6715a1d148fd73f7318884b41adcb916021e2bc0e800a5c5dd97f5142178f6ae88c8fdd98e1afb0ce4c8d2c54b5f37b30b7da1997bb33b0b8a31/a5c12c102bdaed8ee80168cb41606295eaf5512ba04045fac5dd0dc65c2f54f13566090025c05f14cdfdf9b1e39ce835c6f3262a4aedba31f8b6d07ed299b23b",
  "type": "text"
}

The problem is, when I look at the HTMl code in the browser, it doesn’t show the corresponding variable, it shows

[object Object]

here the code to extend the HTML code

// create the row
let row = "<tr>";

// set the actions
let actions_append = '';
// file
if (value['type'] === 'file') {
    // preview
    if (value['preview_available']) {
        console.log(value["preview"]);
        actions_append += `<td nowrap width="1%">
                                <span data-toggle="tooltip" title="Vorschau" onclick="setPreviewContent(${value['preview']})">
                                    <button onclick="setNames('${value['name']}')" type="button" class="btn btn-link btn-sm"
                                        data-toggle="modal" data-target="#previewModal"><i class="material-icons text-primary">desktop_windows</i>
                                    </button>
                                </span>
                            </td>`
    }
}
// append row to table
$('#fileTableBody').append(row + actions_append + '</tr>')

here the HTML code resulting output

<td width="1%" nowrap="">
<span data-toggle="tooltip" title="Vorschau" onclick="setPreviewContent('[object Object]')">
    <button onclick="setNames('test.txt')" type="button" class="btn btn-link btn-sm"
            data-toggle="modal" data-target="#previewModal"><i class="material-icons text-primary">desktop_windows</i>
    </button>
</span>
</td>

Can anybody help me? I don’t know JavaScript so well.