Category: javascript

JS Fiddle: https://jsfiddle.net/k140nad9/6/

HTML Code below:

<input type="checkbox" id="btnA" onchange="openFunctionA();">
FUNCTION A
</input>
<input type="checkbox" id="btnB" onchange="openFunctionB();">
FUNCTION B
</input>

<div id="map">
MAP
</div>

And this JS Code:

var map = document.getElementById('map')
var btnA = document.getElementById('btnA')
var btnB = document.getElementById('btnB')

function openFunctionA() {
if($('#btnA').is(":checked")){
     $('#btnB').attr('disabled', true)
   map.addEventListener('click', function(e){
     alert("THIS FUNCTION A")
    })
   } else {
    $('#btnB').attr('disabled', false)  
   }
}

function openFunctionB() {
 if($('#btnB').is(":checked")){
     $('#btnA').attr('disabled', true)
   map.addEventListener('click', function(e){
     alert("THIS FUNCTION B")
    })
   } else {
    $('#btnA').attr('disabled', false)
   }
}

1. Click checkbox Function A to check it, but then dont click div map
2. Click again checkbox Function A to uncheck it, then click checkbox Function B
3. After poin 2, you will get popup “THIS FUNCTION A” first, instead popup “THIS FUNCTION B”

How to fix this, so when I click checkbox Function B (based on point 3 above), I get popup “THIS FUNCTION B” only.

I’m a beginner on svg, implemented the SVG on my html element like this:

<div class="temporal"></div>

And I created css class:

.temporal{
    position: absolute;

    top: 20px;
    left: 30px;

    width: 130px;
    height: 150px;

    background-image: url('/assets/temporal.svg');
    background-size: contain;
    background-repeat: no-repeat;
    
    z-index: 10;
    background-color: aliceblue;
}

.temporal:hover {
    opacity: 0.5;
    filter: brightness(0.8);
}

My goal is to detect hover event only when it is on my svg element. Here’s my svg:

How to detect hover element only on the red-brown area ? while ignoring white/aliceblue area?

I’ve tried added pointer-events: none; on the parent and pointer-events: visiblePainted on the hover element. But still no result.

I’ve tried using javascript

const temporal = document.getElementById('temporal')
console.log(temporal)
temporal.addEventListener('mouseover', function(event){
    console.log(event.target.tagName)
    if (event.target.tagName === 'path' || event.target.tagName === 'rect' || event.target.tagName === 'circle' || event.target.tagName === 'use') {
        console.log("Hovered over visible part of the SVG!");
    } else {
        console.log("Hovered over non-SVG area!");
    }
})

temporal.addEventListener('click', function(event){
    console.log(event.target.tagName)
    if (event.target.tagName === 'path' || event.target.tagName === 'rect' || event.target.tagName === 'circle' || event.target.tagName === 'use') {
        console.log("Clicked on the visible part of the SVG!");
    } else {
        console.log("Clicked outside the visible part of the SVG!");
    }
})

But everything detected as div.

I’ve tried using object:

<object class="temporal" id="temporal" data="/assets/temporal.svg" width ="130"; height="150";> </object>

Still can’t hover only on the svg area.

Can’t apply solution on this answer
Apply hover effect only to non-transparent parts of an image with CSS

Since the svg takes 440 lines and can’t have that much lines in the html page, so i’ve to import it.

In mobile Chrome, I’m experiencing an issue where audio does not play through headphones when the volume is set to 100%. The sound is playing but is not outputting to the headphones. However, if I lower the volume by just 1%, the sound immediately becomes audible. When I set the volume back to 100%, the audio continues to play fine. What could be causing this behavior, and is there a way to ensure the sound is always outputted at 100% volume?

I use the following code:

startProcessingFromFile(position) {
    this.inputSource = this.audioContext.createBufferSource();
    this.inputSource.buffer = this._audioBuffer;

    // Connect the source directly to the output
    this.inputSource.connect(this.audioContext.destination);

    // Calculate the offset in the audio buffer corresponding to the video position
    let sampleRate = this._audioBuffer.sampleRate;
    let startOffset = position * sampleRate;

    // Set the starting position in the audio buffer
    this.inputSource.start(0, startOffset / sampleRate);
}

P.S. I acknowledge that this could be a bug specific only to my phone with a custom ROM and root access. I’m interested to know if this issue occurs for people with regular smartphones.

I am looking to append some checkboxes using a result of data from an Ajax call, However I am having a bit of trouble doing this.. My Response[i] items when iterating seem to be undefined. Additionally, whats outputted is being rendered in the list as raw html. I am unsure if this is a syntax issue or I am simply not handling the js correctly.

Here is my json data result and its format when passed to the success function of my AJAX call:

{"data":[{"Id":42,"text":"IMPR"},
         {"Id":62,"text":"AMFG"},
         {"Id":63,"text":"AIMP"},
         {"Id":64,"text":"OTHR"},
         {"Id":73,"text":"BSA"}
        ]
}

I am using the Bootstrap multiselect as a userControl so it can be used on any page we like as it is a very nice nuance to the standard dropdown list. Here is the usercontrol .ascx page.

$(function() {
  $('[id*=ddlListBox]').multiselect({
    includeSelectAllOption: false,
    templates: {
      button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>'
    }
  });
});

.btn-group {
  width: fit-content;
  border: 1px solid #000000;
}

.btn-group ul {
  width: 500px !important;
}

.btn-group ul li:hover {
  /*border:1px solid red;*/
  background-color: #3D59AB;
  color: white;
}

<div class="form-group col-sm-5">
  <asp:ListBox ID="ddlListBox" class="ddlchkBox form-control form-select" runat="server" SelectionMode="Multiple">
  </asp:ListBox>
</div>

What I am trying to accomplish is to add the additional checkboxes to the ul as li elements. Populating the value of the checkbox with the ‘value’ fields from json data and the Ids as the ‘Id’ fields of the json data.

Ajax success function:

$jq.ajax({
  contentType: 'application/json; charset=utf-8',
  dataType: 'json',
  type: 'POST',
  url: 'Messages.aspx/GetSeriesforFormIds',
  data: "{'data':'" + JSON.stringify(formIds) + "'}",
  success: function(data) {
    debugger;
    if (data.d != null) {
      var container = document.querySelector('.ddlchkSeriesCheckboxes');
      var checkboxes = container.querySelector('.multiselect-container');
      var temp = data.d;
      if (temp != '') {
        var Response = temp.split(",");
        if ((temp != '') && (temp.length > 0)) {
          for (i = 0; i < Response.length; i++) {
            checkboxes.append('<li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="' + Response[i].Id + '">' + Response[i].Text + '</label ></a ></li >')
            //$("#ddlchkSeries").append("<input type='checkbox' id='chk-" + i + "' name='" + Response[i] + "' /> " + Response[i]);

          }
        }
      }
    }
  },
  error: function(response) {
    //alert(JSON.stringify(response));
  }
});

Here is the structure of my rendered html: (I know code is preferred here, but there is too much embedded JS to use code snippets):

I need to add my json data results as listItem checkbox elements in the highlighted area. I thought I was coming close with the .append method, but what is rendered is literal html, rather than rendered controls.

Any help would be greatly appreciated.

I have an interaction menu made in HTML, CSS & Javascript.
I have been using it for a long time, but today I noticed that the text started to be displayed strangely. It is no longer displayed in the box, and when there are several options, the text is practically stacked in the same place.

The idea is that I haven’t changed anything in this menu, I don’t even know the exact name of this phenomenon I’m experiencing with the text, so I can search in more detail.

How could I solve it?

This is how the menu should look: https://i.imgur.com/IEqxLBd.jpeg

This is how it looks now:
https://i.imgur.com/9XWKsIH.png
https://i.imgur.com/RkOFRl9.png

I tried various parameters in CSS for the text part and the element part. (float, position, etc.)

#interactionMenu {
  color: #fff;
  position: absolute;
  font-family: 'Open Sans', sans-serif;
  left: 80vw;
  top: 50vh;
  transform: rotateY(-10deg) rotateX(0) translateZ(0);
  z-index: 100;
}

#interactionMenu .icon {
  align-items: center;
  display: flex;
  pointer-events: none;
  padding: 0.5vh;
}

#interactionMenu .icon img {
  height: 1.8vh;
  width: 1.8vh;
}

#interactionMenu .interaction_item {
  background: #0007;
  border-radius: 5px;
  display: flex;
  margin-bottom: 0.5vh;
  width: 20vh;
}

#interactionMenu .interaction_item:hover {
  background: linear-gradient(to right, #0007 -40%, #a8a8ff);
  box-shadow: 0 0 10px #0007;
}

#interactionMenu .text {
  padding: 0.7vh 1vh;
  pointer-events: none;
}

<div v-cloak id="interactionMenu" v-if="show && enable" v-bind:style="{left: left + 'vw'}">
  <div class="interaction_item" v-for="(item, index) in menu.items" @click="onClick(index)">
    <div class="icon"><img :src="imgSrc(index)" /> </div>
    <div class="text">{{ item.text }}</div>
  </div>
</div>

This is what it looks like.
I am trying to make it display the fullname variable and other variables but it wont show it just shows this on the screen, can anyone help me?This is what it displays.
Am I doing something wrong and can someone point out my mistake If I am doing a mistake, also I use Visual studio code so it will become purple if it is a variable but it does not become purple.

I was expecting it to show the variable.

I have already check and found question/response about my problem, but each time solution is the same. not working for me.
I have a Laravel 10 program with Vue 3 Front-End in the same project.
I use keycloak-js to authenticate my Front-end like this :

const options = {
    clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
    realm: import.meta.env.VITE_KEYCLOAK_REALM,
    url: import.meta.env.VITE_KEYCLOAK_URL,
};

let keycloak = new Keycloak(options);
let authenticated;
let store = null;


async function init() {
    const store = useAuthStore();
    try {
        authenticated = await keycloak.init({
            onLoad: "check-sso",
            silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html",
        })
        if (authenticated) {
            await initStore(store);
            await setupInterceptors(store);
        }
        else {
            console.log("Keycloak not authenticated")
            await store.clearUserData();
        }
    } catch (error) {
        console.error("Keycloak init failed")
        console.error(error)
    }
}

I have silent-check-sso.html page in the public folder like that:
enter image description here

Some part are public, so i have a button to connect to keycloak, this part work fine, I can connect correctly.

Could you tell me why my app disconnect? (please)

maybe the problem is here : (I’m in production in Centos8 server) it happen after login page
enter image description here

I’m trying to embed a checklist into my react application. It should be visible after a certain button click.

Reading productFruit’s documentation I could see that I would need to use the:
window.productFruits.api.checklists.injectToElement(checklistId, yourElement);
I tried applying it to an useEffect hook like this:

 useEffect(() => {
    if (window?.productFruits?.api.checklists) {
      const yourElement = document.getElementById(
        'SideBar-ListItemIconWrapper-Group',
      );
      if (yourElement) {
        try {
          window.productFruits.api.checklists.injectToElement(
            id,
            yourElement,
          );
          console.log('SUCCESS');
        } catch (error) {
          console.error('Error occurred during injection:', error);
        }
      }
    }
  }, [])

But I keep getting these errors:

‘Error occurred during injection: Error: Checklist not found. Possible reasons: 1) wrong ID, 2) checklist was dismissed, 3) checklist is not published’

The id is correct and its published.

I also tried creating a asyncronous functions like this:

  const productFruitsFunction = async () => {
    const yourElement = document.getElementById(
      'SideBar-ListItemIconWrapper-Group',
    );
    const checklistId = id;
    if (
      window.productFruits &&
      window.productFruits.api &&
      window.productFruits.api.checklists
    ) {
      try {
        console.log('test');
        await window.productFruits.api.checklists.injectToElement(
          checklistId,
          yourElement,
        );
        console.log('SUCESSO');
      } catch (error) {
        console.error('ERROR: ', error);
      }
    }
  };

But also kept getting the same error.

On the client, I can do something like this to update a Firebase user’s phone number:

const confirmation = await app.auth().verifyPhoneNumber(phoneNumber);
// ...
const credential = auth.PhoneAuthProvider.credential(confirmation.verificationId, verificationCode);
user.updatePhoneNumber(credential);

However, I’d like to do certain database operations when a user changes their phone number, so it would be better to do update the phone number or the server and run the database updates in the same endpoint.

I can do auth.updateUser(uid, { phoneNumber }) on the server, but then the phone number is not verified.

Is it possible to check that a phone number was verified on the server or is there some other clean workaround?

I’m trying to use electron-store package to store values in a vue + electron application.
I’ve followed the examples given by the author here: https://www.npmjs.com/package/electron-store.

But im getting error when running the app, whenever. store seems to be undefined.

electron main.js

import Store from "electron-store";
const store = new Store();

ipcMain.on("electronStore", (event, args) => {
    if (args.commandStr === "getElectronStore") {
        console.log(store);
        console.log(new Store())
        console.log(store.get(args.key));
        mainWindow.webContents.send("electronStore", store.get(args.key));
    }
    else if (args.commandStr === "setElectronStore") {
        store.set(args.key, args.value);
    }
});

my app is modular, so ive made sure all my packages are imported using ESM format:

package.json:

  "type": "module",

any idea whats wrong with this? how do i initialize electron store properly ?

I am using MySQL to sum data then display it in datatable but since database is bigger it became very slow I am trying a new approach where I use client side to do calculation, tried every code I could find but keep getting this error :

$(...).DataTable(...).column(...).data(...).sum is not a function

I need to sum all values of column(5) where column(1) value = column(2) value

I’ve encountered this problem while attempting to inject CSS on a domain using Tampermonkey’s GM_addStyle() func, run-at set to document-start, as a result: some content on specific page/s does not load

Alternatively I set run-at to document-body but then, original theme would get displayed for a split second on every page refresh so I would like to avoid that approach

Any solutions? Thanks

<p>

Please share your Knowledge as many Junior developer will become inspire by your knowledge and will follow you and follow you in github

</P>

I hope I will be able to learn lot’s of name like mern and pern stack

I Want To Fill The <div role=”textbox”> Using JS

I Tried :

let element = document.getElementById('ElementID');
element.value += 'AnyTextWithEmoji';

But The Value Doesn’t Change

I Wan’t To Change This Element Value Using Java Script

I was working on a website to find vulnerabilities, that I found a url which accepted a GET parameter “via” and reflected it back into the response, inside script tags. But the reflection was so weird, when I input special characters. Can someone explain please what’s happening here?

Here is the inputs that I tried, along with the corresponding response:

1. GET /endpoint?lc=EN_US&via=xss&token=123 HTTP/2: {pageName: 'US:en:2.0:MY Photos :Albums: xss Public Share'}
2. GET /endpoint?lc=EN_US&via=xss&token=123 HTTP/2: {pageName: 'US:en:2.0:MY Photos :Albums: xss$1token=123 Public Share'}
3. GET /endpoint?lc=EN_US&via=xss&token=123 HTTP/2: {pageName: 'US:en:2.0:MY Photos :Albums: xss Public Share'}
4. GET /endpoint?lc=EN_US&via=xss&token=123 HTTP/2: {pageName: 'US:en:2.0:MY Photos :Albums: xs$1s Public Share'}
5. GET /endpoint?lc=EN_US&via=xs1s&token=123 HTTP/2: {pageName: 'US:en:2.0:MY Photos :Albums: xss Public Share'}
6. GET /endpoint?lc=EN_US&via=xsas&token=123 HTTP/2: {pageName: 'US:en:2.0:MY Photos :Albums: xsas Public Share'}
7. GET /endpoint?lc=EN_US&via=xs\s&token=123 HTTP/2: {pageName: 'US:en:2.0:MY Photos :Albums: xss Public Share'}
8. GET /endpoint?lc=EN_US&via=xs`s&token=123 HTTP/2: {pageName: 'US:en:2.0:MY Photos :Albums: xs/s Public Share'}
9. GET /endpoint?lc=EN_US&via=xs's&token=123 HTTP/2: {pageName: 'US:en:2.0:MY Photos :Albums: xss Public Share'}
10. GET /endpoint?lc=EN_US&via=xs's&token=123 HTTP/2: {pageName: 'US:en:2.0:MY Photos :Albums: xs's Public Share'}
11. GET /endpoint?lc=EN_US&via=xss%5c&token=123 HTTP/2: {pageName: 'US:en:2.0:MY Photos :Albums: xss Public Share'}