Category: javascript

JS/HTML noob here, please bear with me.

I have an html page containing an iframe.
https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors
I’m using the example in the ‘GettingStarted’ section above and testing on JSFiddle.

I want to be able to execute volume changes on the youtube player.

The youtube API’s setVolume function works from within the HTML page, but I’m struggling to figure out how to call/expose that outside of the page.

I’ve tried:

var iframe = document.getElementById("player");

callPlayer('setVolume', 100);

function callPlayer(func, args) { 
        var src = iframe.getAttribute('src');
        if (src && src.indexOf('youtube.com/embed') !== -1) {
            iframe.contentWindow.postMessage(JSON.stringify({
                'event': 'command',
                'func': func,
                'args': args || []
            }), '*');
        }    
}

Which I’ve found on another post, but nothing happens.

I’ve tried this
How do I set Youtube iframe volume from an outside component but get methods undefined errors.

I’ve tried

`var iframe = document.getElementById("player");
iframe.setVolume({value});`

I’m trying to program an Edge extension, and I would like the extension to open when I press a keyboard shortcut (for now, I want to use Ctrl-B). I found a way to assign a keyboard shortcut after I install the extension, by going to edge://extensions/shortcuts and then using the Microsoft GUI to assign the keyboard shortcut. But, I want to do this via code. I’ve tried the following snippets in manifest.json and popup.js, but they don’t work. Thanks in advance for your help.

.....
  "commands": {
      "openExtension": {
          "suggested_key": {
              "default": "Ctrl+B"
          },
          "description": "My description"
      }
  }
.....


....
chrome.commands.onCommand.addListener(function(command) {
    if (command === 'openExtension') {
        chrome.runtime.sendMessage({action: 'openExtension'});
    }
});
....

I have written a Node.js API that reads data from collections. Collection containing 1000 records. Each record contains 300 sub-payload data points.

const data = await csvModel['csvFiles'].find({ "created_datetime": today_datetime });
if (data.length > 0) {
    for (let mappData of data) {
        await payloadMapping(mappData.payload);
    }
}

Inside payloadMapping we are doing mapping of field and stored inside new collection

const payloadMapping = async (jsonPayload) => {
  try {
      let categoryId = await getCategoryID(jsonPayload["category"][0].parent_category);
      let totalEvent = jsonPayload["category"][0].event.length;
      if (categoryId) {
          let allExistingEvent = await getAllEvents(categoryId);
          let eventInsertData = [];
          for (let i = 0; i < totalEvent; i++) {
              let duplicate_event = false;
              let eventPayload = {};
              eventPayload["categoryId"] = categoryId;
              eventPayload["start"] = jsonPayload["category"][0].event[i].start;
              /*Check no two event at same times */
              if (allExistingEvent.length > 0) {
                  allExistingEvent.forEach(item => {
                      let result = item.categoryId.every((element, index) => element === categoryId[index]);
                      if (result && item.start === eventPayload.start) {
                          duplicate_event = true;
                      }
                  });
              }
              /*Check ends */
              if (!duplicate_event) {
                  eventPayload["title"] = jsonPayload["category"][0].event[i].title;
                  eventPayload["description"] = jsonPayload["category"][0].event[i].description;
                  eventPayload["event_location"] = jsonPayload["category"][0].event[i].location;
                  eventPayload["duration"] = jsonPayload["category"][0].event[i].duration;
                  eventPayload["status"] = 1;
                  eventInsertData.push(eventPayload);
              }
          }
          if (eventInsertData.length > 0) {
            try {
                await Events.insertMany(eventInsertData);
            } catch (mongoErr) {
              console.log(mongoErr);
            }
          }
      } else {
        console.log("Category collection not exist" + jsonPayload["category"][0].name);
      }
    } catch (error) {
    console.log(error, "catch error")
  }
}

This function list all events based on parent_category

const getCategoryID = (parent_category) => {
  return new Promise( (resolve) => {
    (async () => {
      const query = { parent_category: parent_category};
      let categoryArray = [];
      let categoryResult = await categoryModel.find(query);
      if (categoryResult.length > 0) {
        categoryResult.forEach((item) => {
          categoryArray.push(item._id.toString());
        })
      }
      resolve(categoryArray);
    });
  });
};

This function list all events based on category_id

const getAllEvents = (categoryId) => {
  return new Promise( (resolve) => {
    (async () => {
      try {
        const eventLists = await Events.find({ 'categoryId': categoryId }, { "categoryId": 1, "start": 1 });
        if (eventLists.length > 0) {
          resolve(eventLists);
        } else {
          resolve([]);
        }
      } catch (dbErr) {
        console.log("dbErr", dbErr);
        resolve([]);
      }
    });
  });
};

I have given following configuration to POD

Resource Limits

resoureces:
requests:

memeory: “250Mi”,
cpu: “50m”,

limits:
memeory: “8000Mi”
cpu: “4000m”

While running the API I am getting high memory and CPU utilization. Please help me to optimize the code.

A bookstore is offering a discount on books. The books are divided into two categories, A and B. The discount is only for category A . If a customer buys a book from category A, discount of 10 percent is provide. complete the pseudocode given below to represent this Algorithms;
The Complete Pseudocode Is As Follow ;
begins
display “Enter The Category Of Bok purchased”
Accept The Category Of book
If the Category Of book Is A
display “You Get The discount Of 10%
End If
If The Category Of Book Is B
display “There is No Discount On This book”
End If
End

I try to write to it in code on java but am not getting it

In php there is an array with items from a category. There can be several categories. The task is to make a table of products from the selected categories. If the selected categories are two or more, the result is duplicated on the page.

If one category is selected, everything works correctly. When i select two categories, the arrays are different. the first array creates a table and puts the results from two queries into it, then the second array does the same, so it is duplicated. i need the first array to create a table from the first query and the second array to create a second table from the second query.

If i change this block let $injectAfter = $(‘.inventory_products_lines_head’); to let $injectAfter = $(‘.inventory_products_lines_head’).last(); now duplicates only second array. How do I remove duplicates of the values of the second block from the first block?

categories_id.forEach(function(category_id) {
  $.ajax({
    type: 'GET',
    url: 'ajax-tab.php' + '?rand=' + new Date().getTime() + '&ajax=true&controller=AdminInventory&action=searchProductsByCategory&token=' + token + '&search_category_id=' + category_id,
    cache: false,
    dataType: "json",
    ajax: true,
    success: function(data) {
      let $injectAfter = $('.inventory_products_lines_head');
      $.each(data.products, function(key, val) {
        status = '';
        if (val.active == 1) {
          status = '<i style="color: #72C279;" class="icon-check"></i>';
        } else {
          status = '<i style="color: #E08F95;" class="icon-remove"></i>';
        }
        let clone = $('.inventory_products_lines.inventory_products_lines_values').last().clone();
        clone.find('.id_product_attribute').html('<input name="id_product_attribute[]" id="inventory_id_product_attribute" type="hidden" value="0" />');
        clone.find('.now_quantity').html('<input type="hidden" name="now_quantity[]" id="now_quantity" value="' + val.quantity + '"><span>' + val.quantity + '</span>').attr('data-quantity', val.quantity);
        clone.find(".brand").html('<span>' + val.manufacturer_name + '</span>');
        clone.find(".name").html('<span>' + val.name + '</span>');
        clone.find(".status").html(status);
        clone.find(".wholesale_price").html('<input name="wholesale_price[]" id="wholesale_price" type="hidden" value="' + val.wholesale_price + '" /><span>' + val.formatted_wholesale_price + '</span>');
        clone.find(".price").html('<input name="price[]" id="price" type="hidden" value="' + val.price + '" /><span>' + val.formatted_price + '</span>');
        clone.find('.id_product').html('<input name="id_product[]" id="inventory_id_product" type="hidden" value="' + val.id_product + '" />');
        clone.removeClass('hidden').insertAfter($injectAfter);
        $('.inventory_products_lines_values').closest('div').after(clone);

      });
      let inventory_products = $('#default_inventory_products .inventory_products_block').clone(true);
      inventory_products.find('.search_category_name').append('<h2>' + data.category_name + '</h2>');
      $('#inventory_products').closest('div').after(inventory_products);
      $('.inventory_products_lines_result').each(function(i) {
        var number = i + 1;
        $(this).find('div:first').text(number + ".");
      });
    }
  });
});

   <div class="form-group inventory_products" id="inventory_products"></div>
<div class="hidden" id="default_inventory_products">
    <div class="inventory_products_block">
            <div class="inventory_products_lines inventory_products_lines_head">
                <div></div>
                <div class="hidden"></div>
                <div class="hidden"></div>
                <div class="search_category_name head"></div>
                <div class="combinations_head head">Comb</div>
                <div class="brand_head head">Brand</div>
                <div class="wholesale_price_head head">wholesale price</div>
                <div class="price_head head">retail price</div>
                <div class="now_quantity_head head">now q-ty</div>
                <div class="quantity_head head">new q-ty</div>
                <div class="discrepancy_head head">discrepancy</div>
                <div class="status_head head">status</div>
            </div>
    </div>
</div>
<div class="inventory_products_lines inventory_products_lines_values hidden inventory_products_lines_result">
    <div class="product_number"></div>
    <div class="id_product hidden"></div>
    <div class="id_product_attribute hidden"></div>
    <div class="name"></div>
    <div class="combinations"></div>
    <div class="brand"></div>
    <div class="wholesale_price"></div>
    <div class="price"></div>
    <div class="now_quantity"></div>
    <div class="inventory_quantity"><input name="inventory_quantity[]" id="inventory_quantity" type="text" value="" /></div>
    <div class="discrepancy_block"><input name="discrepancy[]" id="discrepancy" type="hidden" value="" /><span class="discrepancy"></span></div>
    <div class="category_inventory_wholesale_deficit_block"><input name="category_inventory_wholesale_deficit_price[]" id="category_inventory_wholesale_deficit_price" type="hidden" value="" /></div>
    <div class="category_inventory_retail_deficit_price_block"><input name="category_inventory_retail_deficit_price[]" id="category_inventory_retail_deficit_price" type="hidden" value="" /></div>
    <div class="status"></div>
</div>    

I think the problem is clone and wrong html.

I’m building a web-scrapper to extract public data from a website’s table

This is my code:

options = webdriver.ChromeOptions()
options.add_argument('--headless')
driver = webdriver.Chrome(options=options)
driver.get(url)

# find enter button and click on it
agree_enter_button = driver.find_element(By.PARTIAL_LINK_TEXT, 'AGREE')
driver.execute_script("arguments[0].click();", agree_enter_button)

# find search fields
from_date_input = driver.find_element(By.XPATH, '//input[@id="criteria_file_date_start"]')
to_date_input = driver.find_element(By.XPATH, '//input[@id="criteria_file_date_end"]')
full_name_input = driver.find_element(By.XPATH, '//input[@id="criteria_full_name"]')

# fill the fields with inputs
driver.execute_script("arguments[0].value = arguments[1];", full_name_input, first_name + ' ' + last_name)
driver.execute_script("arguments[0].value = arguments[1];", from_date_input, from_date)
driver.execute_script("arguments[0].value = arguments[1];", to_date_input, thru_date)

# find search button and click on it
search_button = WebDriverWait(driver, 10).until(
            EC.element_to_be_clickable((By.XPATH, '//a[@class="btn btn-success w-40"]')))
driver.execute_script("arguments[0].click();", search_button)

It seems to be working OK until I click the search button.

When I click the button manually, it takes about 5 seconds for the table to load with all the records via JavaScript.

But when I try to load it within the code it stays stuck on loading: (I’m disabling the headless mode and see it stuck on loading)

If I try to wait for the loading screen to pass, it doesn’t.

When I try to not wait and get the table like this:

html = driver.page_source
df = pd.read_html(html)

I get an empty table with the wrong shape.

When I try to not wait and get the tbody of the table like this:

results_set = driver.find_element(By.ID, 'panel_resultset')
content = results_set.find_element(By.CLASS_NAME, 'collapse-content')
grid = content.find_element(By.ID, 'grid_container')
scroll = grid.find_element(By.ID, 'grid_scroll')
table = scroll.find_element(By.ID, 'grid')
tbody = grid.find_element(By.TAG_NAME, 'tbody')
trs = tbody.find_elements(By.TAG_NAME, 'tr')

I get 0 rows in trs (probably because the table isn’t loaded, but its code exists?)

Seems to me the problem is with the loading screen which seems to load quickly when visiting the site manually but gets stuck on loading when using selenium web-driver.

Any help on solving this will be much appreciated!!

I’m currently working on a project that involves integrating the RealScan G10 fingerprint enrollment device with a website. Does anyone have any experience about this ?
I couldn’t find any useful documentation or SDK for the website. I am looking for advice or suggestions on how to proceed in case a Web SDK isn’t available. Here are a few questions on my mind:

1. Alternative Solutions: If a Web SDK isn’t available, what are some alternative solutions or workarounds that you’ve found effective in integrating fingerprint devices with web applications?

2. Communication Protocols: How can I ensure smooth communication between the RealScan G10 device and my web application without a dedicated SDK? Are there standard protocols that I should be aware of?

3. Best Practices: For those who have tackled similar challenges, what best practices would you recommend for integrating fingerprint devices into a web environment, especially when faced with a lack of a dedicated Web SDK?

4. Security Concerns: Security is a top priority. How can I ensure that the integration remains secure and data privacy is maintained, even without a Web SDK?

5. Community Recommendations: Have you come across any community-developed tools, libraries, or resources that could assist in integrating fingerprint devices with web applications?

I’m open to any insights, experiences, or guidance you can share. Your expertise is highly valued, and any help you can provide will be immensely appreciated!

Thanks in advance!

In Next JS 14 app router, when clicking on a Link component it does not change the URL immediately, and after some time the page loads. But the content from loading.tsx file does not appear while the page transition takes place. In regular pages (not ISR page), the loader shows up but it still takes time after clicking the link. history.pushState can be used to change the URL immediately, but the loader still shows up late.

I tried using usePathname hook to listen to a path change, but it takes time for the change.
I also tried adding history.pushState to Link component’s onClick, with this the loading still takes a long time to load.

The drag state does not change when the location of svg is programmatically.

I have created tree using and added zoom functionality to it using code below. Here’s the code:

d3.select('.hierarchy-container').append('svg')
     this.svg_zoom=d3.zoom()
     .scaleExtent([0.5,2])
     .on("zoom", (event)  =>{
         d3.select("#svg_group").attr("transform",event.transform)
       })
     this.svg=d3.select("svg")
     .attr('width','100%')
     .attr('height', '100%')
     .attr("viewBox", [-this.svg_container_dimension.width/2+120,-200, this.svg_container_dimension.width, this.svg_container_dimension.height])
     .style("user-select", "none")
     .call(this.svg_zoom)
     .append('g').attr('id',"svg_group")  

When dragging and scrolling from the initial state, it works fine.
But, when I try to scale the svg through code, the drag state doesn’t change it’s coordinates. For example, if I scale the svg and it comes to left top where it was previously at bottom right. The drag state remains at bottom right.

Here’s the code of changing the scale:

    this.svg.transition().duration(750).call(this.svg_zoom.scaleTo,0.6)

The tree get scale to 0.6 but when i start draging after scaling it programatically it goes back to previous state of x, y and scale.

I am using D3 version 7.8.5

Here is what I am talking about
enter image description here

Things I had tried are
-> insead of d3 zoom callback function i selected svg and translate it to new position.
-> Refered this https://www.d3indepth.com/zoom-and-pan/
-> Tried shifting viewbox of svg instead of translating it.

Looks like you have nested a ‘NavigationContainer’ inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass ‘independent={true}’ explicitly. Note that this will make the child navigators disconnected from the parent and you won’t be able to navigate between them.

how to handle the error?

I’m having trouble on setting attributes using Powershell IE.
The following works on native Javascript

for (let i = 0 ; i < document.getElementById('iframe_app_menu').contentWindow.document.querySelector('[name="categoriaid_orig"]').querySelectorAll("option[value*=$categoria]").length ; i++){
document.getElementById('iframe_app_menu').contentWindow.document.querySelector('[name="categoriaid_orig"]').querySelectorAll("option[value*=$categoria]")[i].setAttribute("selected", "true")
}

I’ve tried to emulate it in powershell with:

for ($i = 0 ; $i < document.getElementById('iframe_app_menu').contentWindow.document.querySelector('[name="categoriaid_orig"]').querySelectorAll("option[value*=$categoria]").length ; $i++){
document.getElementById('iframe_app_menu').contentWindow.document.querySelector('[name="categoriaid_orig"]').querySelectorAll("option[value*=$categoria]")[$i].setAttribute("selected", "true")
}

But it return the error “0x80020101”

I always wonder how to achieve such an effect.
I’m using swiper.js and when I browse around I see things done like that with this library but I find it impossible.

How can I make the slides align to the left of the container but otherwise overflow?

Given a Monorepo based on Turborepo I want to use Biome for linting and formatting. Based on the docs I created a package at ./biome-configuration with a base.json

{
    "files": {
        "ignore": ["dist", "./dist", "./dist/**", "./dist/**/*"]
    }
}

and a vite-library.json

{
    "extends": ["./base.json"]
}

My library at ./packages/my-library needs its own configuration file but only extends the basic one

{
    "extends": ["../../biome-configuration/vite-library.json"]
}

Unfortunately my library still tries to lint its own dist directory. As you see in the ignore section I tried multiple Unix patterns but that doesn’t seem to work.

It seems I must add this to the configuration file inside my library project.

Is there a fix for my pattern? I know that every project needs to ignore the dist directory.

cordova platform how to implement in uaepass.

1.Inapp Browser login
2.Uaepass App login

i need a inapp browser uaepass app login i get code

app A(custome app)
app B(uae pass staging app)

App a loin button click time app b install on current mobile app navigate app a to app b
then authentication confirm retun to my custom app a.

app b not install time app a click to login inapp browser login and authendication confirm rediract to my custom app

i want auto refrersh page if there is no activity on page till 15 minutes in reactjs i have tried below solution but it is not proerly work

  let inactivityTime = 0;

  function trackUserActivity() {
    document.addEventListener('mousemove', resetTimer);
    document.addEventListener('keypress', resetTimer);
  }
  
  function resetTimer() {
    inactivityTime = 0;
  }
  
  function refreshPageAfterInactivity() {
    trackUserActivity();
    setInterval(function() {
      inactivityTime += 1;
      if (inactivityTime > 15 * 60) { 
        window.location.reload(true);
      }
    }, 1000); 
  }
  
  refreshPageAfterInactivity();