Category: javascript

I’m using React Navigation and would like to achieve type safety for navigating between screens.

I have multiple tabs in a tab navigator, each tab is a stack navigator. Each stack navigator may share common screens such as Profile or Post. I want to navigate between these two screens, but stay in the appropriate tab.

My current code, which works, but is not type safe, is as follows:

// Create two stack navigator types, representing the two tabs of my tab navigator
export type SearchStackParamList = {
  PostScreen: PostScreenParams;
  ProfileScreen: ProfileScreenParams;
};

export type NewsfeedStackParamList = {
  PostScreen: PostScreenParams;
  ProfileScreen: ProfileScreenParams;
};

// Create my tab navigator
export type RootTabParamList = {
  NewsfeedStainck: NavigatorScreenParams<NewsfeedStackParamList>;
  SearchStack: NavigatorScreenParams<SearchStackParamList>;
};
const Tab = createBottomTabNavigator<RootTabParamList>();

Now I can navigate from one screen to another with navigation.navigate('Post'). The desired behavior of staying within the current stack navigator is also achieved.

However, I’ve been unable to figure out how to achieve type safety for this. How can I do that?

WebViewer 10.x / PdfTron

WebViewer can display multiple (PDF) documents since 8.x. Like so:

WebViewer({
    //disabledElements: ["toolsHeader", "header"],
    initialDoc: ["first.pdf", "second.pdf"]
  }, viewerDiv)...

What we see is:

I would like to keep the multi tabs to switch between documents (marked green in the screenshot), but I want to remove the header items below (marked red).
I tried my best to disable features or elements using instance.UI.disableFeatures(...) and instance.UI.disableElements(...), but I didn’t succeed without breaking the UI or removing both multitabs and header items.
https://docs.apryse.com/api/web/UI.html#.FeatureFlags__anchor

How do I keep the multitabs (TabsHeader) open, but remove the header items below completely? Can it be done using disableFeatures|Elements or is there another way?

Thanks

I’m trying to find an example of a component which works similar to how Uber Eats handles categories in a restaurant, meaning you have a header with tabs, and clicking a particular tab takes you to a section of the menu. Scrolling to a section also updates the header, and finally, since you can have as many tabs as the restaurant adds, the tabs need to scroll to the left while you scroll down.

Has anyone done something similar? Any libraries I could use? I think I could achieve this effect by using scroll events and adding css classes conditionally, but I would rather have a starting point instead of going at it blindly.

Link to video of the component I’m refering to: https://imgur.com/a/RB74zam

In Vue 3, how can a block of code in a parent component template be conditionally rendered depending on whether or not a slotted child component has a prop passed to it?

Take the following code for example:

<Foo>
  <Bar/>
  <Bar baz="baz" />
</Foo>

Conditional slots can be used with $slots in templates, i.e. v-if="$slots.default", but there doesn’t seem to be a way to conditionally render certain content in the parent based on whether or not a slot has a prop.

Inside of <Foo/>, note the v-if does not work but this is the idea.

<script setup></script>

<template>
  <h1>Foo</h1>
  <template v-if="$slots.default.props.baz">
    <!-- add custom logic here depending on whether or not "baz" prop is present -->
  </template>
  <slot/>
</template>

This also will not work:

<script setup></script>

<template>
  <h1>Foo</h1>
  <template v-for="slot in $slots.default">
    <div v-if="slot.props.baz"><!-- do something --></div>
  </template>
  <slot/>
</template>

The only working solution is to use the useSlots() composable and use a render function.

<script setup>
const slots = useSlots()

slots.default().forEach(slot => {
  if (slots.props?.baz)
    console.log('baz prop present')
  else
    console.log('baz prop not present')
})
</script>

The thing is that vue templates are compiled to render functions, so it would seem that there is a way to access props on $slots.

I’m working on creating a smooth carousel, but I’m running into an issue. After the last image is displayed, the website background shows up before it jumps back to the first image. I want the transition to be seamless, with the carousel smoothly looping back to the start without any gaps or jumps.

Thank you!

<div class="image-container">
    <div class="image-wrapper">
      <img class="bg" src="./pics/badger1.png" alt="bg">
      <img class="bg" src="./pics/badger2.png" alt="bg2">
      <img class="bg" src="./pics/badger3.png" alt="bg3">
      <img class="bg" src="./pics/badger4.png" alt="bg">
      <img class="bg" src="./pics/badger5.png" alt="bg">
      <img class="bg" src="./pics/badger6.png" alt="bg">
      <img class="bg" src="./pics/badger7.png" alt="bg">
      <img class="bg" src="./pics/badger8.png" alt="bg">
    </div>
  </div>

.image-container {
    overflow-x: hidden;
    max-width: 999px; /* Adjust the max-width as needed */
    margin-left: auto;
    margin-right: auto;
    padding-top: 1rem; /* Add padding to the top */
    padding-bottom: 1rem; /* Add padding to the bottom */
}

.image-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (0.5rem * (var(--per-view) - 1))) / var(--per-view)); /* Adjusted grid-gap */
    grid-gap: 0.5rem; /* Reduced gap between images */
    position: relative;
    left: 0;
    transition: .3s;
}

.image-wrapper > * {
    aspect-ratio: 4 / 3;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the entire image is visible without cutting off */
    display: block;
    border-radius: 1.5rem; /* Apply rounded corners to left and right sides only */
}

// IMAGE SLIDER
const imageWrapper = document.querySelector('.image-wrapper');
const imageItems = document.querySelectorAll('.image-wrapper > *');
const imageLength = imageItems.length;
const perView = 3;
let totalScroll = 0;
const delay = 2000;

imageWrapper.style.setProperty('--per-view', perView);

// Clone the first few images and append them to the end
for (let i = 0; i < perView; i++) {
    imageWrapper.appendChild(imageItems[i].cloneNode(true));
}

let autoScroll = setInterval(scrolling, delay);

function scrolling() {
    totalScroll++;
    const widthEl = document.querySelector('.image-wrapper > :first-child').offsetWidth + 24;
    imageWrapper.style.transition = '.3s';
    imageWrapper.style.left = `-${totalScroll * widthEl}px`;

    if (totalScroll === imageLength) {
        setTimeout(() => {
            imageWrapper.style.transition = '0s';
            imageWrapper.style.left = '0';
            totalScroll = 0;
        }, 300); // Match the transition duration
    }
}

Steps I tried

Checked for CSS Conflicts: Ensure there are no CSS styles that might be affecting the image-wrapper or its children, causing unexpected behavior.

Verify Image Dimensions: Ensure all images have consistent dimensions and there are no unexpected margins or paddings.

Is there a way to acccess the user’s browser bookmarks? Like I know that for my JS app to access the camera the user has to allow camera usage. Likewise for microphone. Is there a way to request access to user’s bookmarks and edit them?

I don’t want to just read them. I want to be able to read/write them. (I’m trying to create a bookmark admin website). I doesn’t matter if it’s only available in Google Chrome. But it would be nice to have it cross-browser.

I am following this Line Chart documentation to draw the charts. I have a problem in converting JSON Stringify data format to an Array. I have split my code as sections to pin point where my doubt and my wrong doing.

This is my App script function to bring the data

function collect_data(){
var ss = SpreadsheetApp.openById('XXXXXXX');
var my_sheet = ss.getSheetByName('proj_chart');
var values = metrics_sheet.getRange("A1:C50").getValues();
var strfy = JSON.stringfy(values);
return strfy;
}

Result from above function is this

[["Department","work_date","WorkHours"],
["All","2024-01-30T18:30:00.000Z",200],
["All","2024-02-30T18:30:00.000Z",100],
["All","2024-03-30T18:30:00.000Z",60],
["All","2024-04-30T18:30:00.000Z",70],

["HR","2024-01-30T18:30:00.000Z",100],
["HR","2024-02-31T18:30:00.000Z",50],
["HR","2024-03-30T18:30:00.000Z",30],
["HR","2024-04-31T18:30:00.000Z",40],

["New Hire","2024-01-30T18:30:00.000Z",100],
["New Hire","2024-02-31T18:30:00.000Z",50],
["New Hire","2024-03-30T18:30:00.000Z",30],
["New Hire","2024-04-31T18:30:00.000Z",30]]

Above data I am passing to my JS function to draw a chart like below

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"> 
google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawchart);

function drawchart(){  
  google.script.run.withSuccessHandler(showchart).collect_data();
}

Then I am doin this to draw an chart

function showchart(dep_data){
var arrtopush = [];

Here I checked the Object of the return data from drawchart function

console.log(typeof(dep_data)); // Its String here 

Once I tried to push to Array all the rows becomes ‘undefined’, I am sure I am doing something wrong here.

for(i=0; i<dep_data.length;i++){
  var arr = new Array(dep_data[i].Department,dep_data[i].work_date,dep_data[i].WorkHours);
  arrtopush.push(arr);
}

This is my data table to pass it to draw charts method

var datatable = new google.visualization.DataTable();
datatable.addColumn('string','Department');
datatable.addColumn('date','work_date');        
datatable.addColumn('number','WorkHours');
datatable.addRows(arrtopush);

This Data table I using to draw the charts like below

var chart = new google.visualization.LineChart(document.getElementById('dept_chart'));
chart.draw(datatable);

It Give the error Uncaught Error: Row 0 is not null or an array.

I tried to pass the variable dep_data directly by using arrayToDataTable like this

var chartdata =  new google.visualization.arrayToDataTable(JSON.parse(dep_data)); //return type is string so I used JSON.parse here
var chart = new google.visualization.LineChart(document.getElementById('dept_chart'));
chart.draw(chartdata);

Here also It Gives me the error Uncaught Error: Row 0 is not null or an array.

}
</script>

<select id="dept">
    <option value="All">All</option>
    <option value="HR">HR</option>
    <option value="New Hire">New Hire</option>
     </select>     
     <div id="dept_chart" class="cls"></div>

As I am in the learning phase seeking some advise and an working snippet.

I am using a date picker easepick and I’m trying to pass the dates through to javascript file and disable the dates that I am passing through. The problem is even if I try to set more than one date in a variable it only disables the first date.

This is an example from easepick however this is with hard coded dates inside easepick

 const bookedDates = [
          '2024-09-02',
          ['2024-09-06', '2024-09-11'],
          '2024-09-18',
          '2024-09-19',
          '2024-09-20',
          '2024-09-25',
          '2024-09-28',
      ].map(d => {
          if (d instanceof Array) {
            const start = new DateTime(d[0], 'YYYY-MM-DD');
            const end = new DateTime(d[1], 'YYYY-MM-DD');

            return [start, end];
          }

This is what I’ve tried

    if (datesUna == undefined) {
        date1 = '2024-09-19';
        date2 = '2024-09-21';
        datesUna = date1.concat(",",date2);
        console.log(datesUna);
    } else {
        datesUna = datesUna.replaceAll('"', '');
        console.log(datesUna);
    }

This is the concatinated string : 2024-09-19,2024-09-21

This is the console log for a string that I pass through from the backend :

‘2024-09-07′,’2024-10-13′,’2024-10-14′,’2024-10-15′,’2024-10-16′,’2024-10-17′,’2024-10-18′,’2024-10-19′,’2024-10-20′,’2024-11-08′,’2024-11-09′,’2024-11-22′,’2024-11-23′,’2024-11-24′,’2024-11-25′,’2024-11-26′,’2024-12-04′,’2024-12-05′,’2024-12-06′,’2024-12-07′,’2024-12-23′,’2024-12-24′,’2024-12-25′,’2024-12-26′,’2025-04-23′,’2025-04-24′,’2025-04-25′,’2025-04-26′,’2025-05-22′,’2025-05-23′,’2025-05-24′,’2025-05-25′,’2025-05-26′,’2025-07-01′,’2025-07-02′,’2025-07-03′,’2025-07-04′,’2025-07-05′,’2025-07-06′,’2025-07-07′,’2025-07-08′,’2025-07-09′,’2025-07-10′,’2025-07-25′,’2025-07-26′,’2025-07-27′,’2025-07-28′,’2025-07-29′,’2025-07-30′,’2025-07-31′,’2025-08-01′,’2025-08-02′,’2025-08-03′,’2025-08-04′,’2025-08-05′,’2025-08-06′,’2025-08-07’

    const bookedDates = [datesUna].map(d => {
  if (d instanceof Array) {
    const start = new DateTime(d[0], 'YYYY-MM-DD');
    const end = new DateTime(d[1], 'YYYY-MM-DD');

    return [start, end];
  }

  return new DateTime(d, 'YYYY-MM-DD');
});

Even if I concat two dates only the date1 will be disabled and date2 won’t be.

I want Google Maps to display two routes within its bounds but instead it only ever fits the most recent route rendered. When I remove the render line renderer.setDirections(result); the bounds are set correctly. Why does this happen and how can I make it render the route and conform to the right bounds?

var map; // Declare map globally to access it in different functions
var directionsRenderer1, directionsRenderer2; // Renderers to display directions on the map for both routes
var directionsService1, directionsService2; // Services to request directions for both routes
var bounds; // Global bounds to encompass both routes

function initMap() {
    console.log("Initializing map...");
    map = new google.maps.Map(document.getElementById("map"), {
        zoom: 10, // Initial zoom level of the map
        center: { lat: 40.8625, lng: -79.8857 }, // Center of the map
        streetViewControl: false, // Disable Street View control
        mapTypeId: 'roadmap' // Set map type to roadmap
    });

    bounds = new google.maps.LatLngBounds(); // Initialize bounds to include both routes

    directionsRenderer1 = new google.maps.DirectionsRenderer({
        map: map, // Associate this renderer with the map
        suppressMarkers: true, // Do not show default markers on the route
        polylineOptions: {
            strokeColor: '#FF0000', // Color of the route line for the first renderer
            strokeOpacity: 1.0, // Full opacity of the route line
            strokeWeight: 2 // Weight of the route line
        }
    });

    directionsRenderer2 = new google.maps.DirectionsRenderer({
        map: map, // Associate this renderer with the map
        suppressMarkers: true, // Do not show default markers on the route
        polylineOptions: {
            strokeColor: '#0000FF', // Color of the route line for the second renderer
            strokeOpacity: 1.0, // Full opacity of the route line
            strokeWeight: 2 // Weight of the route line
        }
    });

    directionsService1 = new google.maps.DirectionsService(); // Initialize the DirectionsService for the first route
    directionsService2 = new google.maps.DirectionsService(); // Initialize the DirectionsService for the second route
}

$(document).ready(function() {
    $('#leftRouteSelect').change(function() {
        // When the selected route in the left dropdown changes
        var selectedOption = $(this).find('option:selected'); // Get the selected option
        var startLat = parseFloat(selectedOption.data('start-lat')); // Extract starting latitude
        var startLng = parseFloat(selectedOption.data('start-lng')); // Extract starting longitude
        var endLat = parseFloat(selectedOption.data('end-lat')); // Extract ending latitude
        var endLng = parseFloat(selectedOption.data('end-lng')); // Extract ending longitude

        // Update the map route for the left route
        updateMapRoute(startLat, startLng, endLat, endLng, directionsRenderer1, directionsService1);
    });

    $('#rightRouteSelect').change(function() {
        // When the selected route in the right dropdown changes
        var selectedOption = $(this).find('option:selected'); // Get the selected option
        var startLat = parseFloat(selectedOption.data('start-lat')); // Extract starting latitude
        var startLng = parseFloat(selectedOption.data('start-lng')); // Extract starting longitude
        var endLat = parseFloat(selectedOption.data('end-lat')); // Extract ending latitude
        var endLng = parseFloat(selectedOption.data('end-lng')); // Extract ending longitude

        // Update the map route for the right route
        updateMapRoute(startLat, startLng, endLat, endLng, directionsRenderer2, directionsService2);
    });
});

function updateMapRoute(startLat, startLng, endLat, endLng, renderer, service) {
    var startPoint = new google.maps.LatLng(startLat, startLng); // Create a LatLng object for the start point
    var endPoint = new google.maps.LatLng(endLat, endLng); // Create a LatLng object for the end point

    var request = {
        origin: startPoint, // Set the origin of the route
        destination: endPoint, // Set the destination of the route
        travelMode: 'DRIVING' // Set travel mode to driving
    };

    service.route(request, function(result, status) {
        if (status === 'OK') {
            renderer.setDirections(result); // Render the directions on the map

            var routePath = result.routes[0].overview_path; // Get the path of the route

            // Extend bounds to cover this route
            routePath.forEach(function(pathPoint) {
                bounds.extend(pathPoint); // Add each point of the route to the bounds
            });

            // Fit the map to cover all the extended bounds (both routes)
            map.fitBounds(bounds);

            var leg = result.routes[0].legs[0]; // Get the leg of the route
            var infoWindow = new google.maps.InfoWindow({
                content: '<div style="color: black;">Distance: ' + leg.distance.text + ', Duration: ' + leg.duration.text + '</div>' // Content for the info window
            });

            infoWindow.setPosition(bounds.getCenter()); // Set the info window position to the center of the bounds
            infoWindow.open(map); // Open the info window on the map
        } else {
            window.alert('Directions request failed due to ' + status); // Alert on failure
        }
    });
}```


I tried using `bounds.extend(pathPoint);` and `map.fitBounds(bounds);` but the map would always conform to the most recent path set by `renderer.setDirections(result);`.

I created a navbar with a logo on the left side, links on the right side and another 2 links that are highlighted and I added a icon menu, which appears on small screens, but, the problem is that when I open the menu, the links are side by side and I want it to stay in column format.

I tried a lot of codes, but it doesn’t work — nothing happens. Also, I want to make the highlighted buttons stay inside the menu box too. By the way, I’m a completely beginner, so it’s really hard to me work with css, it’s kinda confusing. Could anyone save me please?

Here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/main/style.css">
    <link rel="stylesheet" href="/main/main.css">
    <!--fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/de42dd2adf.js" crossorigin="anonymous"></script>
    <title>Bryant Ecom</title>
</head>
<body>
    <!-- navegação -->
    <header>
        <nav id="navbar">
            <img src="/images/logo.png" alt="Bryant Ecom" id="logo">
                
                <div class="nav-links" id="navLinks">
                    <a href="index.html" class="active">Início</a>
                    <a href="link2.html">Link 2</a>
                    <a href="link3.html">Link 3</a>
                    <a href="link4.html">Link 4</a>
                    <a href="link5.html">Link 5</a>
                    <a href="link6.html">Link 6</a>
                </div>
                    
                <div class="highlight-links">
                    <a href="#" class="nav-btn">Login</a>
                    <a href="#" class="nav-btn">Contato</a>
                </div>

                <a href="javascript:void(0)" class="btn" onclick="myFunction()">
                    <i class="fa-solid fa-bars"></i>
                </a>
        </nav>
    </header>
    <script src="/main/script.js"></script>
</body>
</html>

:root{
    /* cores */
    --cor-principal: #186fdb;
    --cor-secundaria: #000000;
    --cor-adicional: #ffffff;
    /* fontes */
    --ff:"Manrope", sans-serif;
    --h1: bold 4rem/1em var(--ff);
    --h2: bold 3rem/1.2em var(--ff);
    --h3: bold 2.25rem/1.2em var(--ff);
    --h4: bold 1.5rem/1.6em var(--ff);
    --p: 1rem/1.6em var(--ff); 
    --fw: 600;
    --logo: 150px;
}

body {
    font-family: var(--ff);
    margin: 0;
    padding: 28px 8%;
    box-sizing: border-box;
}

header {
    width: 100%; /* ocupa toda a largura da tela  */
}

#logo {
    height: var(--logo);
    cursor: pointer;
}

/* navbar */

#navbar {
    width: 100%;
    display: flex; /* um elemento ao lado do outro */
    align-items: center;
    justify-content: space-between;
}

.nav-links {
    display: flex;
    gap: 80px;
}

.nav-links a {
    text-decoration: none;
    color: var(--cor-secundaria);
    font: var(--p);
    font-weight: var(--fw);
    position: relative;
}

.nav-links a::after{
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background-color: var(--cor-principal);
    left: 0;
    bottom: 0;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a.active::after {
    width: 100%;
}

.nav-links.active a {
    color: var(--cor-principal);
    border-bottom: 3px solid var(--cor-principal);
}

/* botões personalizados */
.highlight-links {  /* essa class altera o espaçamento apenas entre os dois botões */
    display: flex;
    gap: 10px;
    list-style: none;
}

.nav-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 10px 15px;
    font-weight: var(--fw);
    color: var(--cor-adicional);
    background-color: var(--cor-principal);
    transition: background-color .3s ease;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
} 

.nav-btn:hover {
    background-color: #468ce2;
}

/* menu mobile */
.btn {
    display: none;
    color: var(--cor-secundaria);
}

@media screen and (max-width: 1170px) {
    .nav-links, 
    #navbar .highlight-links {
        display: none;
        gap: 10px;
    }

    .btn {
        display: block;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
    }
    
}

@media screen and (max-width: 1170px) {
    .nav-links.responsive {position: relative;}
    .nav-links.responsive .btn {
        position: absolute;
        right: 0;
        top: 0;
    }

    .nav-links.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    
}

function myFunction() {
    var x = document.getElementById("navLinks");
    if (x.className === "nav-links") {
      x.className += "responsive";
    } else {
      x.className = "nav-links";
    }
  }

// hover
const navLinks = document.querySelectorAll('.nav-links a');
navLinks.forEach(link => {
  link.addEventListener('click', function () {
    navLinks.forEach(link => link.classList.remove('active'));
    this.classList.add('active');
  });
});

We are using vuetify for our vuejs website.

We are able to integrate TimePicker and DatePicker in our project.

Use has to click twice to choose datetime. Is there any way to choose both in single click like DateTimePicker in other library?

For now we are using v-text-field with type as datetime-local but we are looking for some better option.

<v-text-field class="mx-2" label="Choose" variant="underlined" type="datetime-local" v-model="datetime">

I’m new to react-native, but I’m trying to send the index of a list to another screen.

saved.tsx

onPress={() => router.push({
    pathname: "/lists/list",
    params: {
        test: list.id,
        },
        })}

I’m receiving the list.id in list.tsx, so it’s being sent properly. However, I can’t use it as an index in the following function in my list.tsx due to the error mentioned in the title

const Page = (props: Props) => {
    const { query } = useLocalSearchParams<{ query: string }>();
    <View>
        {restaurantLists[{ query }].contents.map((list) => {
        return (
            <TouchableOpacity>
                <List.Item
                    title={list.restaurantName}
                    description="Item description"
                    left={props => <List.Icon {...props} icon="equal" />}
                />
           </TouchableOpacity>
        );
        })}
    </View>
}

Example of database

export const restaurantLists = [
    {
        id: "1",
        listName: "Italian",
        contents: [
            {
                key: "1",
                restaurantName: "Olive Garden",
            },
            {
                key: "2",
                restaurantName: "Tabellas",
            },
            {
                key: "3",
                restaurantName: "Mauricios",
            },
            {
                key: "4",
                restaurantName: "dunno",
            },
        ]
    },

I’m expecting to be able to use the query being sent in params as an index, but I receive the “Type ‘{ test: string; }’ cannot be used as an index type” error

when I click on a column header, sorting happens as expected while keeping null values at the bottom for both ascending and descending cases. It is working this way for all my columns except for the ones with date values where all null values are being placed on the top or bottom. Is this expected with AngularJS or am I doing something wrong?

Here is my JS code for sorting that is called using ng-click on a column header:

       $scope.Data = $scope.Data.sort(function (a, b)
       {
           var firstValue = getDisplayValue(a, $scope.TableSorting.SortedByColumn);
           var secondValue = getDisplayValue(b, $scope.TableSorting.SortedByColumn);

           if (firstValue === null)
           {
               return 1;
           }
           else if (secondValue === null)
           {
               return -1;
           }

           if (isDate(firstValue) && isDate(secondValue))
           {
               firstValue = new Date(firstValue);
               secondValue = new Date(secondValue);
           }

           if (typeof firstValue === 'string' && typeof secondValue === 'string')
           {
               firstValue = firstValue.toLowerCase();
               secondValue = secondValue.toLowerCase();
           }

           if (firstValue < secondValue)
           {
               return $scope.TableSorting.SortInReverseOrder ? 1 : -1;
           }

           if (firstValue > secondValue)
           {
               return $scope.TableSorting.SortInReverseOrder ? -1 : 1;
           }

           return 0;
       });
   };

    getDisplayValue = function (data, columnName) {
        if (columnName == 'PreviousCallIsInbound') 
        {
            return data.PreviousConferenceId ? (data.PreviousCallDate ? 'Yes' : 'No') : null;
        }

        if (columnName == 'NextCallIsInbound') {
            return data.NextConferenceId ? (data.NextCallDate ? 'Yes' : 'No') : null;
        }

        return data[columnName];
    };

I tried including checks for undefined.
Any help is appreciated!

Using the Woocommemrce Checkout block, I would like to have the Add Order Note box checked by default. Using jQuery/JS does not seem to work inside the new(ish) block version of the Checkout page.

Code ex:

jQuery(function($){
      $('#checkbox-control-1').attr('checked', true);
   });

I am guessing the Checkout block requires a different approach; the textarea appears to be complete removed from the DOM until the box is checked, and the checkbox never has any ‘checked’ attribute added/removed when clicked.

my teacher told me to create a countdown timer with php that if you give it three inputs in html (hours,minutes,seconds) it will count down the numbers and show the remaining time in real time . like the timer in your phone . he told me to only use html, css and php . no js or ajax is allowed . with JAVA language i can do it but php is scripting language and shows the results after all the code is executed .

At first I thought the sleep() funtion is the answer but it’s script language .