Category: javascript

Category Added in a WPeMatico Campaign

How to detect when an element is in view in react native

I’m a newbie working on a react native and got confused on how I can to be able to detect when an element say image/button is in viewport in react-native, If I can get a console.log function when user scrolls to that element it would be nice.

Below is my code,

<Block scroll  showsVerticalScrollIndicator={false}>  
    
    <Block color={colors.card} flex={0}> 
        <Block marginLeft={20} row  alignSelf="center" 
          scroll
          horizontal 
          renderToHardwareTextureAndroid
          showsHorizontalScrollIndicator={false}
          contentOffset={{x: -sizes.padding, y: 0}}>
          <SectionedMultiSelect 
                      styles={{button:styles.selectButton,container: styles.container,itemText:styles.sectionedMultiSelectItemText}}    
                      
                      items={categories}
                      IconRenderer={MaterialIcons} 
                      uniqueKey="id"
                      subKey="children"
                      selectText="Select Service..."
                      showDropDowns={true}
                      readOnlyHeadings={true}
                      onSelectedItemsChange={onSelectedItemsChange}
                      onSelectedItemObjectsChange={onSelectedItemObjectsChange}
                      selectedItems={selectedItems}
                      single={true}
                    /> 
                      
        </Block>
        
        <Block card flex={0} marginTop={1} marginHorizontal="2%">
          <Block  // I want to be able to detect that this is in view port hence user has seen it
              card  
              row={isHorizontal}
              marginBottom={sizes.sm}
              width={CARD_WIDTH * 2  + sizes.sm}>
              <TouchableOpacity>
              <Image alignSelf="center" // I would really like to be able to detect that this Image is in view port hence user has seen it
                source={{uri:'http://192.168.56.1:8000/directAd/uploads/'+topPageAd.picture }}
                style={{
                  width: win.width/1,
                    height: 150,  
                    resizeMode: "contain",
                    alignSelf: "center",
                    borderRadius: 20,
                }}
              />
              </TouchableOpacity>
               
            </Block>            
        </Block>            
        
        
    </Block>
</Block>

React functional component sharing useStates

I have 3 files. App.js main, uses the two components. Selector.js component, sets value. Display.js component, takes value and displays it.

App.js
code snippet that won't post
How do I change the value of myTitle in Selector, and use myTitle with Display (and re-render/update the display component on value change of myTitle)

the timer doesn’t reset and starts going in negative(-10)

I am Learning javascript Dom. i am creating a quiz that has a timer. although the timer works fine but as soon as it hits 0 it does not just stops there but instead keeps running in negative numbers. i have the clearInterval function but doesn’t seems to work. Anyone have any idea what’s wrong with it?

let secondsLeft = 60;

function setTime() {
  // Sets interval in variable
 let timerInterval = setInterval(function() {
    secondsLeft--;
    timeEl.textContent = secondsLeft + " seconds left till Quiz Ends";

    if (secondsLeft === 0 && quizQuestions[5]) {
      timeEl.textContent = "Quiz over"
      clearInterval(timerInterval);

      dNone()
      questionText.innerHTML = "Do you wanna give it another try?"
      // Stops execution of action at set interval
    }
  }, 1000);
  
  setTimeout(function() {
    clearInterval(timerInterval);
  }, 61000);
}

How can I ignore null columns when iterating through a table? (Javascript only)

I am iterating through a table using a for loop in Javascript.
Due to how the table was originally design the header row is technically a row in the table. I have a loop that suppose to scan all the rows in the table and insert each row in a database. The problem is it is trying to insert the “null” row into the database. Another issue I am having with this is loop is the rows are all techanically a clone of the original row I have with the original row technaically be hidden with some css but it still exists in the table you can’t access it either. So if my table has one row the loop is seeing three rows (the header row, the original row that is clone, and the actual table row I am typing everything into and using) and trying to insert all three which returns a sql error because two of those rows aren’t compatible with what I am doing. What I am trying to do is if the row is null or has null values it should be skip over and move on to the next row.

How can I get it to skip/ignore

$(document).on("click", "#devSaveBtn", function () {
  var answer = window.confirm("Save changes");
  if (answer) {
    // * Table variable
    var table = document.getElementById("steptable");
    // ! Since there is an extra th element in the table (the headers) the loop has to start from 1 and not zero
    for (var i = 1, row; (row = table.rows[i]); i++) {
      // * Condition to prevent
      if (Name === null) {
        continue;
      }

      // * iterate through rows
      // * rows would be accessed using the "row" variable assigned in the for loop
      ObjType = table.rows[i].cells[2].querySelector(".vcheck").value;
      Name = table.rows[i].cells[3].querySelector(".vcheck").value;
      Business = table.rows[i].cells[4].querySelector(".vcheck").value;
      Project = table.rows[i].cells[5].querySelector(".vcheck").value;
      Deployer_Candidate =
        table.rows[i].cells[6].querySelector(".vcheck").value;
      Description = table.rows[i].cells[7].querySelector(".vcheck").value;
      console.log(row);
      console.log("ObjType = " + ObjType);
      console.log("Name = " + Name);
      console.log("Business = " + Business);
      console.log("Project = " + Project);
      console.log("Deployer_Candidate = " + Deployer_Candidate);
      console.log("Description = " + Description);
    }

    // * Loop that will run the sql statement for each row in the table
    for (var i = 1; i < selectTkt.length; i++) {
      console.log("This is working");

      if (testSelect != "NEW") {
        console.log("response one");
      }
        console.log("response two");
      } else {
      }
    }
  }
  // * else display service message
  else {
    console.log("Service Cancel");
  }
});
        <div id="steptablecontainer">
                        <div id="steptable_wrapper" class="dataTables_wrapper no-footer">
                            <table id="steptable" class="compact cell-border no-footer dataTable row-border"
                                role="grid">
                                <thead id="recordTableHead">
                                    <tr role="row">
                                        <!-- * Names For Each Container *-->
                                        <th class="noncomponentswidth sorting_disabled" tabindex="0"
                                            aria-controls="steptable" rowspan="1" colspan="1" aria-label=""
                                            style="width: 25px; max-width: 25px;"></th>
                                        <th class="noncomponentswidth sorting_disabled" tabindex="0"
                                            aria-controls="steptable" rowspan="1" colspan="1" aria-label=""
                                            style="width: 50px; background-image: none; max-width: 25px;">Record</th>
                                        <th class="componentellipsis sorting_disabled" tabindex="0"
                                            aria-controls="steptable" rowspan="1" colspan="1" aria-label="Component"
                                            style="width: 200px; max-width: 50px;">Type</th>
                                        <th class="noncomponentswidth sorting_disabled" tabindex="0"
                                            aria-controls="steptable" rowspan="1" colspan="1" aria-label="Type"
                                            style="width: 125px;">Name</th>
                                        <th class="noncomponentswidth sorting_disabled" tabindex="0"
                                            aria-controls="steptable" rowspan="1" colspan="1" aria-label="Test"
                                            style="width: 100px; max-width: 50px;">Business</th>
                                        <th class="noncomponentswidth sorting_disabled" tabindex="0"
                                            aria-controls="steptable" rowspan="1" colspan="1" aria-label="Dev"
                                            style="width: 200px; max-width: 50px;">Project</th>
                                        <th class="noncomponentswidth sorting_disabled" tabindex="0"
                                            aria-controls="steptable" rowspan="1" colspan="1" aria-label="Type"
                                            style="width: 150px; max-width: 125px;">Deployer Candidate</th>
                                        <th class="noncomponentswidth sorting_disabled" tabindex="0"
                                            aria-controls="steptable" rowspan="1" colspan="1" aria-label="Type"
                                            style="width: 400px; max-width: 200px; overflow: hidden;">Description
                                        </th>
                                    </tr>
                                </thead>
                                <!-- * Sample Record (Cloned then changed) *-->

                                <tbody id="recordRow0" style="display: none; border: 10px;" class="recordRow">
                                    <tr role="row" class="" data-true-step="1">
                                        <td class="noncomponentswidth">
                                            <button class="readyonlyhidden" id="removeRecordBtn0" title="Remove Record"
                                                value="0">
                                                <span><i style="font-size:18px;" class="fa fa-minus-circle"></i></span>
                                            </button>
                                        </td>


                                        <!-- * Record intializing *-->
                                        <td class="noncomponentswidth" id="recordCount">1</td>

                                        <!-- * Drop down for the obj_type *-->
                                        <div id="container">
                                            <td class="componentellipsis" id="recordTypeWrapper">
                                                <select id="OBJ_TYPE" class="vcheck">
                                                    <option value="TP">TP</option>
                                                    <option value="Workflow">Workflow</option>
                                                    <option value="Package">Package</option>
                                                </select>
                                            </td>
                                        </div>


                                        <!-- * Container for Obj Name *-->
                                        <td class="noncomponentswidth" id="recordObjName">
                                            <p>
                                                <!-- * Input for Obj Name *-->
                                                <input type="text" id="OBJ_NAME" name="Object Name" placeholder=""
                                                    class="vcheck" required minlength="8">
                                            </p>
                                        </td>

                                        <!-- * Deployer Business *-->
                                        <td class="noncomponentswidth" id="recordDevName">
                                            <input type="text" id="DEPLOYER_BUSINESS" name="Business Name"
                                                placeholder="" style="display: none;">
                                            <select id="DEPLOYER_BUSINESS" class="vcheck">
                                                <!-- * Picklist for TP *-->
                                                <option value="APPM">APPM</option>
                                                <option value="Asia">Asia</option>
                                                <option value="CorporateAP">CorporateAP</option>
                                                <option value="CorporateCredit">CorporateCredit</option>
                                                <option value="CorporateEHS">CorporateEHS</option>
                                                <option value="CorporateFinance">CorporateFinance</option>
                                                <option value="CorporateFinancialServices">
                                                    CorporateFinancialServices
                                                </option>
                                                <option value="CorporateHR">CorporateHR</option>
                                                <option value="CorporateIT">CorporateIT</option>
                                                <option value="CorporateLegal">CorporateLegal</option>
                                                <option value="CorporateLogistics">CorporateLogistics</option>
                                                <option value="CorporateTax">CorporateTax</option>
                                                <option value="EMEAPackaging">EMEAPackaging</option>
                                                <option value="EMEAPapers">EMEAPapers</option>
                                                <option value="GCF">GCF</option>
                                                <option value="MillManufacturing">MillManufacturing</option>
                                                <option value="MillSupport">MillSupport</option>
                                                <option value="NAIPGContainer">NAIPGContainer</option>
                                                <option value="NAIPGContainerboard">NAIPGContainerboard</option>
                                                <option value="NAIPGRecycling">NAIPGRecycling</option>
                                                <option value="NAP">NAP</option>
                                                <option value="SouthAmerica">SouthAmerica</option>
                                                <option value="zConnectivity">zConnectivity</option>
                                                <option value="zSylvamo">zSylvamo</option>
                                            </select>

                                        </td>

                                        <!-- * Input for Deployer Project *-->
                                        <td class="noncomponentswidth" id="recordProjectName">
                                            <input type="text" id="DEPLOYER_PROJECT" name="Project Name" class="vcheck"
                                                placeholder="">
                                        </td>


                                        <!-- * Deployer_Candidate *-->
                                        <td class="noncomponentswidth" id="titleDeployerCandidate">
                                            <select id="DEPLOYER_CANDIDATE" class="vcheck">

                                                <!-- * Picklist for TP *-->
                                                <option value="PRODJ (wm53a/b/c 10000)">PRODJ (wm53a/b/c 10000)
                                                </option>
                                                <option value="PRODR (wm53a/b/c 12000)">PRODR (wm53a/b/c 12000)
                                                </option>
                                                <option value="PRODXA (wm54a/b/c 21000)">PRODXA (wm54a/b/c
                                                    21000)
                                                </option>
                                                <option value="PRODXS (wm54a/b/c 20000)">PRODXS (wm54a/b/c
                                                    20000)
                                                </option>
                                                <option value="PRODXE (wm53a/b/c 11000)">PRODXE (wm53a/b/c
                                                    11000)
                                                </option>
                                                <option value="-------------------">-------------------</option>
                                                <option value="PRODAD1 (wm54a/b/c 60000)">PRODAD1 (wm54a/b/c 60000)
                                                </option>
                                                <option value="PRODAD2 (wm54a/b/c 61000)">PRODAD2 (wm54a/b/c 61000)
                                                </option>
                                                <option value="-------------------">-------------------</option>
                                                <option value="MAPGRP1 (wm52a/b/c 40k/41k/42k)">MAPGRP1
                                                    (wm52a/b/c
                                                    40k/41k/42k)</option>
                                            </select>

                                        </td>

                                        <!-- * Input for Description *-->
                                        <td class="noncomponentswidth" id="recordDeployerCandidate" placeholder="">
                                            <input type="text" id="DESCRIPTION" name="Description" placeholder=""
                                                class="vcheck" style="resize: vertical; width: 100%; height: 4.5em;"
                                                </td>
                                    </tr>
                                </tbody>
                            </table>

                            <!-- * Add & Remove buttons *-->
                            <div class="btn-group2">
                                <div id="addRemoveButons" class="dt-buttons" style="visibility:hidden">
                                    <button class="readonlyhidden" tabindex="0" aria-controls="steptable" type="button"
                                        id="recordAddBtn2" title="Add new record" style="display: inline-block;">
                                        <span><i class="fa fa-plus-circle"></i></span>
                                    </button>
                                    <button class="readonlyhidden" tabindex="0" aria-controls="steptable" type="button"
                                        id="recordAddBtn" title="Add new record">
                                        <span><i class="fa fa-plus-square"></i></span>
                                    </button>
                                    <button class="readonlyhidden" tabindex="0" aria-controls="steptable" type="button"
                                        id="recordRemoveBtn" title="Remove last record" style="display: none">
                                        <span><i class="fas fa-trash-alt"></i></span>
                                    </button>

                                </div>
                            </div>
                        </div>
                    </div>

enter image description herenull values?

Hi, I made an expressjs app to play video files in browser but video seeking is not working on ios

So i made this app so i can play videos from my pc on my phone and i made it start the video from when i closed it. It’s working fine on chrome (pc) but on my phone (iOS 16) it starts from the beginning and the seek bar is not even working

  fetch("/progress", { keepalive: false })
      .then((response) => response.json())
      .then((json) => {
          for (var x = 0; x < playlist.length; x++) {
              if (playlist[x].name === json.now_playing) {
                  vidNow = x;
                  vidPlay(vidNow, true);
                  video.currentTime = json.current_duration
                  vSeek.value = json.current_duration
              }
          }
          if (vidNow == 0) vidPlay(0, true);
      });

Targeting an element outside of its parent container

Lets say I have a section with an anchor tag. Is it possible to target another element on the page outside of that anchor tags parent?

For example, when a user hovers over the anchor tag in the following code, the paragraph tag inside of another container gets targeted, whether its changing the font-size,color,whatever,etc. Any suggestions or guidance would be much appreciated!

<div class="container">
  <div>
    <ul>
      <li><a href="#">hover me</a><li>
    </ul>
  </div>
</div>

<div class="target-container">
  <p id="target-element">Target Element</p>
</div>

Seems like there has to be a way to do this with js, as css won’t work obviously since the target element is outside of the container.

what are some ways to simplify this palindromes function?

link for exercise: https://github.com/zhar1/javascript-exercises/tree/main/09_palindromes

I’m fairly new to javascript and going through the odin project. I’m having trouble simplifying my exercises. I’m wondering how I can condense this code or if there’s another approach I can take.

This function takes a string and returns true if it contains a pallindrome i.e. “racecar” or
“A car, a man, a maraca.” else returns false

const palindromes = function(string) {
  //convert string to lowercase  then to an array
  const stringArr = Array.from(string.toLowerCase());
  //filter out non-letters into new array
  const testArr = stringArr.filter(char => (char.toLowerCase() != char.toUpperCase()));
  let length = testArr.length;
  //iterate through testArr return false of the nth letter doesnt match the nth - 1 letter
  for (i = 0; i < length; i++) {
    if (testArr[i] != testArr[--length]) {
      return false;
    }
  }
  return true;
};

console.log(palindromes("racecar"));

I’m fairly new to javascript and going through the odin project. I’m having trouble simplifying my exercises. I’m wondering how I can condense this code or if there’s another approach I can take.

Unreasonable pointer events on Samsung tablet with keyboard attached

I created a React game and it works great, but I found a lot of problems on Samsung tablet with Samsung web browser and keyboard attached. My game is designed to work on both touch screens and with mouse.

When I’m using this Samsung setup and I point an element with touchpad, the onPointerEnter event runs first as touch and then as mouse too, which makes is super unstable. Other pointer events are messed up too. On iPads with keyboard, only mouse pointer event is being fired when using touchpad, which is understandable behavior.

Simple test:

<button onPointerEnter={console.log}>
    I'm a button
</button>

Is this a known problem and if so, what are the recommended steps to make it work correctly? I can’t just block mouse events, because my game uses mouse too.

How to correctly reference a html object in css

A list with four items is displayed on my page. on hovering one of those, the background image is slightly moved. The tutorial i have now assigns the activeIndex (menu.dataset.activeIndex) of the div containing the four items an index number in a for each loop. now they are numbered 0-3 and i can console.log this.

each one is supposed to set the background to a specific position on hovering as following:

.menu[data-active-index="0"] > .menu-background-pattern {
  background-position: 0% -25%;
}

however, it does not happen. what is wrong with the reference or what is wrong elsewhere?

    import React from "react";

export default function App() {
    const menu = document.getElementById("menu");

    // this code makes it so the background pattern snaps back to its position after unhovering an list item
    Array.from(document.getElementsByClassName("menu-item"))
        .forEach((item, index) => {
            item.onmouseover = () => {
                menu.dataset.activeIndex = index; // numerates elements top to bottom 0 to (length-1)
                console.log(menu) // <div id="menu" data-active-index="2"></div>
            }
        })

    return (
        <div className="menu">
            <div className="menu-items">
                <a href="/" className="menu-item">stuff</a>
                <a href="/" className="menu-item">stuff</a>
                <a href="/" className="menu-item">stuff</a>
                <a href="/" className="menu-item">stuff</a>
            </div>
                <div className="menu-background-pattern">
            </div>
        </div>
    )
}

index.css:

.menu-background-pattern {
  height: 100vh;
  width: 100vw;

  background-image: radial-gradient(
    rgba(255,255,255,0.1) 9%,
    transparent 9%
    );
    background-position: 0% 0%;
    background-size: 12vmin 12vmin;

    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;

    transition: opacity 800ms ease,
      background-size 800ms ease;
}

I pretty much just typed it down from the video, but maybe it is not working because it is a react application it is running inside. The transition of opacity and background-size is also working.

Javascript for loop get multiple publishers

I am trying to get a table with titles and authors(multiple authors). I have tried this for loop, but I am doing something wrong.
Json file(response):

{
    "id": 1,
    "title": "name",
    "publisher": "name",
    "author": [
        {
            "id": 1,
            "first_name": "fname1",
            "last_name": "lname1"
        },
        {
            "id": 2,
            "first_name": "fname2",
            "last_name": "lname2"
        }
    ],
  
}

I have tried the following loop but I doesn’t work like it should. Also is there anyway I can make the Author rowspan expand for the authors(as many authors-that many rows)

function tableCreation(response) {
    let final=`<table>
                 <thead>`;
    final += `<tr><th>ID</th><th>Title</th><th>Publisher</th><th>Author</th></tr>`;
    for (let i = 0; i < response.length; i++) {
        final += `<tbody><tr><td>${response[i].id}</td><td>${response[i].title}</td><td>${response[i].publisher}</td>`;
       for (let j =0; j< response.length; j++){
        final += `<td>${response[j].author[j].first_name}${response[j].author[j].last_name}</td>`;
           
       }
        final += `</tr></tbody>`
    }

    final+= `</thead></table>`;
    document.getElementById("field").innerHTML = final;
}

When I will choose my delivered option, and Save my data then action button row or ID I need hide

[[enter image description here](https://i.stack.imgur.com/KOTZM.png)](https://i.stack.imgur.com/iUTQV.png)

when I will choose my delivered option, and Save my data then action button row or ID I need hide.

<?php switch ($row['status']){ case 0: echo '<span class="rounded-pill badge badge-secondary">In-Progress</span>'; break; case 1: echo '<span class="rounded-pill badge badge-primary">Approved</span>'; break; case 2: echo '<span class="rounded-pill badge badge-info">Under Diagnosis</span>'; break; case 3: echo '<span class="rounded-pill badge badge-warning">QC Pending</span>'; break; case 4: echo '<span class="rounded-pill badge badge-success">QC Passed</span>'; break; case 5: echo '<span class="rounded-pill badge badge-success">Repair OK</span>'; break; case 6: echo '<span class="ml-4 rounded-pill badge badge-danger">Same Back Delivery</span>'; break; case 7: echo '<span class="rounded-pill badge badge-danger">Repair Fail</span>'; break; case 8: echo '<span class="rounded-pill badge badge-success">Delivered Done</span>'; break; case 9: echo '<span class="rounded-pill badge badge-danger">Delivered-Payment Due</span>'; break; } ?>