Category: javascript

How to use three.interaction in web js?

I need to use three.interaction module with web js. Is there any other modules like it for web js?
I just need a mashup.on function to trigger mouse events on objects. How to do it?

I’m attempting to share a hygen generator for project to use with hygen-add. However, this generator requires some extensions via helper functions created using the .hygen.js extension point. Is there any way to share these helper functions with my hygen generator without requiring users of the generator to add a .hygen.js file to their repository?

I’ve tried putting a .hygen.js file in the generator directory.

To whom who can help,

I am facing an issue regarding my drop down menu when hovering over navbar bar tab ‘work’. After hovering cursor over ‘work’, you will then notice a drop down menu appear below. Now once you start moving your cursor downwards to click on a drop down option (social media, photo, video) the menu then disappears.

*Stackoverflow questions such as these havent solved my issue yet, but may be helpful?:

• Drop down menu disappears on hovering over first option (blogger)
• CSS Drop Down Menu disappearing*

Something I noticed: If I take out the onMouseLeave={onMouseLeave} from the li elemenet in Navbar2.jsx, it will then show the menu after hovering. After your naviagte mouse away from menu the menu stays up.

• I have added an image and my code code below, as well as my repo.
• Note: I was told in the FCC forum that my file paths were breaking. However the last I pushed, everything was up to date and working. All images are named correctly and should point to correct imports. Please let me know in detail if there is an issue, but it should work or please refer to code below.

Image:

Repo: https://github.com/DeBoer753/m-photography-PROJECT

REACT (NavBar2)

// REACT:
import React, { useState } from 'react'

// ROUTER:
import { Link } from 'react-router-dom'

// COMPONENTS:
import DropDown from './DropDown'

// IMGS:
import cbmLogo from '../../imgs/CBMedia_Black.png'

// CSS:
import './NavBar2.css' 

// NAVBAR2:
export default function NavBar2() {
  const [click, setClick] = useState(false)
  const [dropdown, setDropdown] = useState(false)

  const handleClick = () => setClick(!click)
  const closeMobileMenu = () => setClick(false)

  const onMouseEnter = () => {
    if (window.innerWidth < 960) {
      setDropdown(false)
    } else {
      setDropdown(true)
    }
  }

  const onMouseLeave = () => {
    if (window.innerWidth < 960) {
      setDropdown(false)
    } else { 
      setDropdown(false)
    }
  }

  return (
    <>

      <nav className='navbar'>
        
        <div className='logo-name-box'>
          <Link to='/'><img src={cbmLogo} className='cbm-logo' alt="" srcset=""/></Link>
          <Link to='/' className='navbar-logo'>Blossom Media</Link>
        </div>
        <div className='menu-icon' onClick={handleClick}>
          <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
        </div>

        <ul className={click ? 'nav-menu active' : 'nav-menu'}>
          <li className='nav-item'><Link to='/services' className='nav-links' onClick={closeMobileMenu }>Services</Link></li>
          <li className='nav-item' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}><Link to='/work' className='nav-links' onClick={closeMobileMenu}>Work <i className='fas fa-caret-down'/></Link></li>
          {dropdown && <DropDown />}
          <li className='nav-item'><Link to='/reviews' className='nav-links' onClick={closeMobileMenu }>Reviews</Link></li>
          <li className='nav-item'><Link to='/about' className='nav-links' onClick={closeMobileMenu }>About</Link></li>
          <li className='nav-item'><Link to='/contact' className='nav-links' onClick={closeMobileMenu }>Contact</Link></li>
        </ul>

      </nav>

    </>
)
}

CSS (NavBar2)

.navbar {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 2px 20px rgb(54, 54, 54);
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  top: 0;
  position: sticky;
  z-index: 6;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.logo-name-box {
  display: flex;
  flex-direction: row;
  margin-left: 24px;
  gap: 10px;
}

.cbm-logo {
  width: 50px;
}

.navbar-logo {
  color: #000000;
  justify-self: start;
  padding-bottom: 2px;
  font-weight:500;
  cursor: pointer;
  text-decoration: none;
  font-size: 1.5rem;
  width: 280px;
  align-self: center;
}

.fa-firstdraft {
  margin-left: 0.5rem;
  font-size: 1.6rem;
}

.nav-menu {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 10px;
  list-style: none;
  text-align: center;
  width: 70vw;
  justify-content: end;
  margin-right: 2rem;
}

.nav-item {
  display: flex;
  align-items: center;
  height: 80px;
}

.nav-links {
  color: rgb(0, 0, 0);
  text-decoration: none;
  padding: 0.5rem 1rem;
}

.nav-links:hover {
  background-color: #1888ff;
  border-radius: 4px;
  transition: all 0.2s ease-out;
}

.fa-bars {
  color: #000000;
}

.nav-links-mobile {
  display: none;
}

.menu-icon {
  display: none;
}

@media screen and (max-width: 960px) {

  .navbar {
    justify-content: space-between;
  }

  .NavbarItems {
    position: relative;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 60px;
    left: -180%;
    opacity: 1;
    transition: all 0.5s ease;
  }

  .nav-menu.active {
    background: #242222;
    left: 0;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 1;
    padding-left: 0px;
    border: 1px red solid;
  }

  .nav-links {
    text-align: center;
    padding: 2rem;
    width: 100%;
    display: table;
    border: 1px red solid;
  }

  .nav-links:hover {
    background-color: #1888ff;
    border-radius: 0;
  }

  .navbar-logo {
    display: none;
    position: absolute;
    top: 0;
    left: -75px;
    margin-left: 0;
    transform: translate(25%, 50%);
  }

  .menu-icon {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-100%, 60%);
    font-size: 1.8rem;
    cursor: pointer;
  }

  .fa-times {
    color: #040404;
    font-size: 2rem;
  }

  .nav-links-mobile {
    display: block;
    text-align: center;
    padding: 1.5rem;
    margin: 2rem auto;
    border-radius: 4px;
    width: 80%;
    background: #1888ff;
    text-decoration: none;
    color: #fff;
    font-size: 1.5rem;
  }

  .nav-links-mobile:hover {
    background: #fff;
    color: #1888ff;
    transition: 250ms;
  }

}

REACT (DropDown)

// REACT:
import React, { useState } from 'react'

// ROUTER:
import { Link } from 'react-router-dom'

// DATA:
import { MenuItems } from './MenuItems' // this deconstructs and finds the variable holding the data

// CSS:
import './DropDown.css' 

export default function DropDown() {
  const [click, setClick] = useState(false)

  const handleClick = () => setClick(!click)
  return (
    <>
    <ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>
      {MenuItems.map((item, index) => {
        return (
          <li key={index}><Link className={item.cName} to={item.path} onClick={() => setClick(false)}>{item.title}</Link></li>
        )
      })}
    </ul>
    </>
  )
}

CSS (DropDown)

.dropdown-menu {
  width: 200px;
  position: absolute;
  top: 80px;
  right: 260px;
  list-style: none;
  text-align: start;
}

.dropdown-menu li {
  background: #474747;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: rgba(242, 242, 242, 0.48);
}

.dropdown-menu.clicked {
  display: none;
}

.dropdown-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: white;
  padding: 16px;
}

I am trying to get a button at the top of each section to fill in the N/A radios for just that section when clicked using JavaScript. I am using PrimeFaces V12 p:selectOneRadio with a custom layout within a p:dataTable that uses groupBy on a p:headerRow. My JavaScript function seems to be altering the selected stated of the radio but the view doesn’t reflect that. Even when I submit the form to the JSF backing bean, thinking the radios might actually selected but just not visually showing as, alas, the radios are NOT actually selected.

    <p:dataTable id="ynnrCheckListId"
        value="#{cc.attrs.checklistQuestions}" var="qAndA">

        <p:headerRow groupBy="#{qAndA.checklistAttribute.attributeCategory.id}">
            <p:column colspan="8" sortOrder="#{qAndA.checklistAttribute.attributeCategory.headerText}">
            <h:outputText value="#{qAndA.checklistAttribute.attributeCategory.headerText}" />
            </p:column>

            <p:column colspan="1">
                <p:button itemLabel="This Section Not Applicable" 
                    onclick="doAll(#{qAndA.checklistAttribute.attributeCategory.id}); return false;">
                </p:button>
            </p:column>

…
within the Yes column I define the custom layout selectOneRadio

        <p:column headerText="Yes" width="50">
            <p:selectOneRadio id="yesNoNA" value="#{qAndA.toggleValue}" layout="custom" unselectable="true" styleClass="ppp">
                <f:selectItem itemLabel="Yes" itemValue="YES" />
                ...
                <f:selectItem itemLabel="NA" itemValue="NA" />
            </p:selectOneRadio>

            <div align="center">
                <p:radioButton id="yes" for="yesNoNA" itemIndex="0" rendered="#{empty qAndA.toggleValue}"
                    disabled="#{not cc.attrs.checklistInstance.checklistEditable}" />
                <h:outputText style="color: #000; font-size: 24px;" styleClass="fa-solid fa-check"
                    rendered="#{qAndA.toggleValue == 'YES'}" />
                <h:outputText value=""
                    rendered="#{qAndA.toggleValue == 'NO_MAJOR' or qAndA.toggleValue == 'NO_MINOR' or qAndA.toggleValue == 'NA' or qAndA.toggleValue == 'RESOLVED_MAJOR' or qAndA.toggleValue == 'RESOLVED_MINOR'}" />
            </div>
        </p:column>

…

    <p:column headerText="N/A" width="50">
        <div align="center">
            <p:radioButton id="na" widgetVar="na" for="yesNoNA" itemIndex="4" rendered="#{empty qAndA.toggleValue}"
                disabled="#{not cc.attrs.checklistInstance.checklistEditable}"
                styleClass="#{qAndA.checklistAttribute.attributeCategory.id}" />
            <h:outputText style="color: #000; font-size: 24px;" styleClass="fas fa-times" rendered="#{qAndA.toggleValue == 'NA'}" />
        </div>
    </p:column>

…

Setting the styleClass for the NA p:radioButton (above) to the section category id was a way to find just the radios in each section. The section category id got set in Div’s classname that wrapped each row of radios.

function doAll(divClass)
{
    var divs = document.getElementsByClassName(divClass);
    for (const div of divs) {

        $(div).find('input:radio').each(function() {

            console.log($(this).attr('id') );
            console.log("radio value " + $(this).val());
            console.log("is radio checked? " + $(this).prop('checked'));

            $(this).prop('checked', true);

            console.log("Now is radio checked? " + $(this).prop('checked'));
            $(this).trigger('click');
            $(this).trigger('change');

            console.log("");

        });
    }

}

assignmentForm:accordion:stageGate1:ynnrCheckListId:0:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true

assignmentForm:accordion:stageGate1:ynnrCheckListId:1:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true

assignmentForm:accordion:stageGate1:ynnrCheckListId:2:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true

assignmentForm:accordion:stageGate1:ynnrCheckListId:3:yesNoNA:4_clone
radio value NA
is radio checked? false
Now is radio checked? true

When I manually select one of the NA radios and then click the NA all button, I get true for the checked property before programmatically applying the radio property checked to true. So I feel I am working on the correct HTML objects.

assignmentForm:accordion:stageGate1:ynnrCheckListId:0:yesNoNA:4_clone
radio value NA
is radio checked? true
Now is radio checked? true

Any ideas?

kindly help me out with this issue, I am frustrated.

So I built a web-component component library (expected to be called in as cdn) using the www output.

I then use the element from it inside vue 3 custom element, and nothing is showing.

I then check the console and I see “Uncaught (in promise) DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.”

I inspected the elements, I saw the element(from stenciljs) in the DOM but it is empty(no shadow root, no content at all).

Please Help

We fail to understand why the second time we want to use a camera it fails giving NotAllowedError.
We can use it once with no problem though.
The first time, when it works, we are required to accept permissions and it works perfectly. The issue is that the permissions are prompted everytime it works, but the second time we require it, for example opening a new tab, it fails to work, and it does not prompt the permissions dialog.

It only happens in iOS Chrome.

It is fixed by closing the Chrome browser sometimes, others we need to restart the phone.

We are calling the stop tracks function before destroying the component, before requiring getUserMedia, and on beforeunload event:

stream.getTracks &&
  (await stream.getTracks().forEach((track: any) => {
    track.stop();
  }));

This is how we call user media:

export function getUserMedia(constraints?: MediaStreamConstraints | undefined) {
  return (
    navigator.mediaDevices.getUserMedia(constraints) ||
    (navigator as any).getUserMedia(constraints) ||
    (navigator as any).webkitGetUserMedia(constraints) ||
    (navigator as any).mozGetUserMedia(constraints)
  );
}

I’m trying to get VoiceOver on an iPhone to start reading from a specific element. The reason for this is that I load information using Ajax and need to let it know where the new “page” starts.

I’m starting with a basic test example. When I tap the button, focus gets set on another element, and VoiceOver should, in theory, read that new element. The new element gets the blue focus outline, but it isn’t read out loud and VoiceOver focus stays on the button.

I’ve also tried this where the focus is set by javascript that executes when the main page is loaded.

This is the tutorial that I’m looking at. What am I missing?

<div> before</div>      

<h1 id="read" tabIndex="-1">
    read this
</h1>       
    
<div>after</div>    

<div role="button" onclick="document.getElementById('read').focus();">
    set focus and read
</div>

I want to create a return invoice. I insert the data from sql into a table in html/php. I want to select two products (for example rows 3 and 5) and js to make the correct calculation only for these products. At this moment, if I select rows 3 and 5, js does the calculations for the first two products. In fact, it takes my turn 1 and adds the next one.
How can this be resolved?

$(document).ready(function() {
  $(document).on('click', '#checkAll', function() {
    $(".checkbox").prop("checked", this.checked);
  });

  $(document).on('change', function stornSelectedProducts() {
    var checkboxes = document.querySelectorAll('.checkbox');
    var count = 0;

    checkboxes.forEach(function(checkbox) {
      if (checkbox.checked) {
        count++;
        $('#total_item').val(count);
      }
    });
    cal_final_total(count);
  });
  update();

  function cal_final_total(count) {
    var final_item_total = 0;
    var final_total_vat = 0;
    var total_items_vat_0 = 0;

    for (j = 1; j <= count; j++) {
      var quantity = 0;
      var price = 0;
      var actual_amount = 0;
      var tax1_rate = 0;
      var tax1_amount = 0;
      var item_total = 0;
      quantity = $('#order_item_quantity' + j).val();
      if (quantity > 0) {
        price = $('#order_item_price' + j).val();
        if (price > 0) {
          actual_amount = parseFloat(quantity) * parseFloat(price);
          $('#order_item_actual_amount' + j).val(actual_amount);
          tax1_rate = $('#order_item_tax1_rate' + j).val();
          if (tax1_rate > 0) {
            tax1_amount = parseFloat(actual_amount) * parseFloat(tax1_rate) / 100;
            $('#order_item_tax1_amount' + j).val(tax1_amount);
          }

          total_vat_0 = parseFloat(actual_amount);
          total_items_vat_0 = parseFloat(total_items_vat_0) + parseFloat(total_vat_0);
          $('#order_item_actual_amount' + j).val(total_vat_0);

          total_vat = parseFloat(tax1_amount);
          final_total_vat = parseFloat(final_total_vat) + parseFloat(total_vat);
          $('#order_item_vat_amount' + j).val(total_vat);

          item_total = parseFloat(actual_amount) + parseFloat(tax1_amount);
          final_item_total = parseFloat(final_item_total) + parseFloat(item_total);
          $('#order_item_final_amount' + j).val(item_total);
        }
      }
    }
    $('#final_total_amt').text(final_item_total);
    $('#final_total_amt_val').val(final_item_total);
    $('#total_amt_vat_val').val(final_total_vat);
    $('#total_amt_vat_0_val').val(total_items_vat_0);
  }

  $(document).on('blur', '.order_item_quantity', function() {
    cal_final_total(count);
  });

  $(document).on('blur', '.order_item_price', function() {
    cal_final_total(count);
  });

  $(document).on('blur', '.order_item_tax1_rate', function() {
    cal_final_total(count);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container-fluid">
    <table id="invoicetable" class="table table-bordered">
      <tr>
        <th width="7%">Sr No.</th>
        <th width="20%">Item Name</th>
        <th width="5%">Quantity</th>
        <th width="5%">Price</th>
        <th width="10%">Tax1</th>
        <th width="10%">Actual Amt.</th>
        <th width="10%">Total TAX</th>
        <th width="10%">Total</th>
        <th width="1%"><input id="checkAll" type="checkbox" </th>
      </tr>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>

      </tr>
      <tr>
        <td><span id="sr_no">1</span></td>
        <td><input type="text" value="Description 1" id="item_name1" class="form-control input-sm" /></td>
        <td><input type="text" value="7" id="order_item_quantity1" data-srno="1" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="4" id="order_item_price1" data-srno="1" readonly class="form-control order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate1" data-srno="1" readonly class="form-control order_item_tax1_rate" /></td>
        <td><input type="text" value="28" id="order_item_actual_amount1" data-srno="1" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="5.88" id="order_item_tax1_amount1" data-srno="1" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="33.88" id="order_item_final_amount1" data-srno="1" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count1" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
      <tr>
        <td><span id="sr_no">2</span></td>
        <td><input type="text" value="Description 2" id="item_name2" class="form-control input-sm" /></td>
        <td><input type="text" value="12" id="order_item_quantity2" data-srno="2" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="6" id="order_item_price2" data-srno="2" readonly class="form-control input-sm number_only order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate2" data-srno="2" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
        <td><input type="text" value="72" id="order_item_actual_amount2" data-srno="2" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="15.12" id="order_item_tax1_amount2" data-srno="2" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="87.12" id="order_item_final_amount2" data-srno="2" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count2" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
      <tr>
        <td><span id="sr_no">3</span></td>
        <td><input type="text" value="Description 3" id="item_name3" class="form-control input-sm" /></td>
        <td><input type="text" value="2.5" id="order_item_quantity3" data-srno="3" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="14" id="order_item_price3" data-srno="3" readonly class="form-control input-sm number_only order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate3" data-srno="3" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
        <td><input type="text" value="35" id="order_item_actual_amount3" data-srno="3" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="7.35" id="order_item_tax1_amount3" data-srno="3" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="42.35" id="order_item_final_amount3" data-srno="3" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count3" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
      <tr>
        <td><span id="sr_no">4</span></td>
        <td><input type="text" value="Description 4" id="item_name4" class="form-control input-sm" /></td>
        <td><input type="text" value="2" id="order_item_quantity4" data-srno="4" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="8.87" id="order_item_price4" data-srno="4" readonly class="form-control input-sm number_only order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate4" data-srno="4" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
        <td><input type="text" value="17.74" id="order_item_actual_amount4" data-srno="4" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="3.72" id="order_item_tax1_amount4" data-srno="4" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="21.46" id="order_item_final_amount4" data-srno="4" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count4" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
      <tr>
        <td><span id="sr_no">5</span></td>
        <td><input type="text" value="Description 5" id="item_name5" class="form-control input-sm" /></td>
        <td><input type="text" value="9" id="order_item_quantity5" data-srno="5" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="7.87" id="order_item_price5" data-srno="5" readonly class="form-control input-sm number_only order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate5" data-srno="5" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
        <td><input type="text" value="70.83" id="order_item_actual_amount5" data-srno="5" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="14.87" id="order_item_tax1_amount5" data-srno="5" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="85.70" id="order_item_final_amount5" data-srno="5" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count5" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
      <tr>
        <td><span id="sr_no">6</span></td>
        <td><input type="text" value="Description 6" id="item_name6" class="form-control input-sm" /></td>
        <td><input type="text" value="7" id="order_item_quantity6" data-srno="6" class="form-control input-sm order_item_quantity" /></td>
        <td><input type="text" value="7.54" id="order_item_price6" data-srno="6" readonly class="form-control input-sm number_only order_item_price" /></td>
        <td><input type="text" value="21" id="order_item_tax1_rate6" data-srno="6" readonly class="form-control input-sm number_only order_item_tax1_rate" /></td>
        <td><input type="text" value="52.78" id="order_item_actual_amount6" data-srno="6" class="form-control input-sm order_item_actual_amount" readonly /></td>
        <td><input type="text" value="11.08" id="order_item_tax1_amount6" data-srno="6" readonly class="form-control input-sm order_item_tax1_amount" /></td>
        <td><input type="text" value="63.86" id="order_item_final_amount6" data-srno="6" readonly class="form-control input-sm order_item_final_amount" /></td>
        <td align="center"><input class="checkbox" id="count6" type="checkbox" onChange="stornSelectedProducts()"></td>
      </tr>
    </table>

    <br>
    <br>

    <table class="table table-hover">
      <tr>
        <td width=50%><input type="text" class="form-control" value="Total without tax" readonly></td>
        <td width=50%><input type="text" value="0.00" class="form-control" value="0.00" id="total_amt_vat_0_val" readonly></td>
      </tr>
      <tr>
        <td width=50%><input type="text" class="form-control" value="Tax" readonly></td>
        <td width=50%><input type="text" value="0.00" class="form-control" value="0.00" id="total_amt_vat_val" readonly></td>
      </tr>
      <tr>
        <td width=50%><input type="text" class="form-control" value="Total with tax" readonly></td>
        <td width=50%><input type="text" class="form-control" value="0.00" id="final_total_amt_val" readonly></td>
      </tr>
      <tr>
      </tr>
    </table>
  </div>
</body>

</html>

I created a React App using npx create-react-app my_app but when I am running the app using npm start, I am getting the following error,

I tried installing the package ‘@babel/plugin-proposal-private-property-in-object’ using npm install @babel/plugin-proposal-private-property-in-object but still getting the same error. How to solve this?

I just started learning react.js . Through vs code I decided to start my journey to learn react.js but when I gave my second command npm start” it compiled with errors. Since I am a beginner I don’t know how to resolve it on my own.

I decided to create an app with react.js using vs code. Ran the npm create-react-app ./ and was successful . next I decided to run the command npm start but it compiled with errors like
/src/index.js and [eslint] srcindex.jsur

kindly help!!

I wrote type guard function with using “is” in type of return of function, and have type error

TS2322: Type ‘Test1’ is not assignable to type ‘T extends “NAME” ?
Test2 : Test1’.

interface Test1 {
    id: string;
}

interface Test2 extends Test1 {
    code: number;
}

type typeName = 'NAME' | 'FOO';

const isTest = (obj: Test1 | Test2, name: typeName): obj is Test2 => {
    return name === 'NAME';
};

const foo = <T extends typeName>(name?: T): T extends 'NAME' ? Test2 : Test1 => {
    const test1: Test1 = {id: 'str'};
    const test2: Test2 = {...test1, code: 12};

    const obj = isTest(test1, name) ? test2 : test1;



    return isTest(test1, name) ? test2 : test1; //here I get an error TS2322: Type 'Test1' is not assignable to type 'T extends "NAME" ? Test2 : Test1'.
};

If I replace isTest(test1, name) ? test2 : test1 to isTest(test1, name) ? test1 : test2 the error will not appear, but logic will be not correct.
Pls help to resolve it

I want to change the attributes on an svg element in an html page.

svgElement.setAttribute("width", `${width_}`); //instruction 1
svgElement.setAttribute("height", `${height_}`); //instruction 2
svgElement.setAttribute("viewBox",`${x} ${y} ${width_} ${height_}`); // instruction 3

width_ and height_ are new values, different from the pre existing attribute values.

"instruction 1" causes a horizontal zoom.

"instruction 2" causes a vertical zoom.

"instruction 3" zooms everything back to how it was before, as if there had been no zooming at all.

Is it possible to avoid this effect ?

I was looking into the possibility of setting multiple attributes in one single transaction, but it does not seem possible (correct me if I am wrong).

Someone help me with some logitech script, where when I press the “Q” key, it also presses the “A” key, this will last until I release the “Q” key!
I’m newbie and I don’t have experience in scripts
plis

example:

function OnEvent(event, arg)
   if event == "MOUSE_BUTTON_PRESSED" and arg == 5 then
      PressKey("F")
   end
   if event == "MOUSE_BUTTON_RELEASED" and arg == 5 then
      ReleaseKey("F")
   end
end

Any thoughts as to how this can be fixed — I have not a clue!
It works fine until an upgrade is done. I have tried multiple times with various versions but no go.

post-upgrade:
router.js:958 Error while processing route: item You must provide a param idPath.
and
jquery.min.js:2 Uncaught Error: You must provide a param idPath.

bower.json
original
{
“name”: “shepherd”,
“private”: true,
“dependencies”: {
“bootstrap”: “~3.3.2”,
“ember”: “~1.10.0”,
“handlebars”: “~3.0.0”,
“jquery”: “~1.11.3”
} }
# updated(attempt)
{
“name”: “shepherd”,
“private”: true,
“ignore”: [
“**/.*”,
“node_modules”,
“bower_components”,
“test”,
“tests”
],
“dependencies”: {
“jquery”: “^3.7.0”,
“bootstrap”: “^5.2.3”,
“handlebars”: “^4.7.7”,
“ember”: “^2.0”
} }

# tab config  index.html: <script src="config.js"></script>
# consumed by app.js
<script src="app.js"></script>
var config = {}
config.title = 'TABS Title'
config.items = [
  {name: 'T1', items: [
    {name: "NDC-A", items: [
      {name: "T1-NDCA:Z1 Stats", url: "<LINK>"},
      {name: "T1-NDCA:Z1 Graphs", url: "<LINK>"},
      {name: "T1-NDCA:Z2 Stats", url: "<LINK>"},
      {name: "T1-NDCA:Z2 Graphs", url: "<LINK>"},
    ]},
    {name: "NDC-B", items: [
      {name: "T1-NDCB:Z1 Stats", url: "<LINK>"},
      {name: "T1-NDCB:Z1 Graphs", url: "<LINK>"},
      {name: "T1-NDCB:Z2 Stats", url: "<LINK>"},
      {name: "T1-NDCB:Z2 Graphs", url: "<LINK>"},
    ]},
   ]},
]

FYI: tabs sample as generated via above config
# app.js index.html:

    var App = Ember.Application.create({
    })
    
    App.initializer({
        name: 'config',
        initialize: function(container, app) {
            app.config = Ember.copy(config)
        },
    })
    
    App.Router.map(function() {
        this.resource('item', {path: '/*idPath'})
    })
    
   // fails here
    
    App.ItemRoute = Ember.Route.extend(App.TitleHandler, App.ItemFactory, {
        model: function(params) {
            var items = this.getItems(App.config.items)
            var item = this.getItem(items, params.idPath)
            **// 'item' and 'items' are both populated as expected**
            if (!item) {
                return this.transitionTo('item', '')
            }
            this.setTitle(item.title)
            return item
            **// FAILS HERE 'port return'**
        },
    })
    
    

When you click on the button, a drop-down box appears under it, which should be inside the body tag.

I have an app in Vue2. I made a plugin that inserts an element under the button, absolutely positioning it in the viewport. The dropout is placed in the body tag.

There is a problem that elements can dynamically appear on the page, due to which the element will change its position.

I need to reactively listen for changes in the position of a getBoundingClientRect element. So that when shifted, the open lunge also shifted.

Tried useElementBounding from vueuse library, doesn’t work(