Category: javascript

I got to know that Google is deprecating it’s old places api and replacing with the new one’s. In our application, we use Maps Javascript api with the library=places param, The following way: https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places. We are using Autocomplete class and a method in it getPlace() for our maps. But I have seen that the Autocomplete class is old and we have to migrate to new class PlaceAutocompleteElement – https://developers.google.com/maps/documentation/javascript/places-migration-overview#api-specific_changes

Do we really need to make changes to the old Autocomplete class and replace it with a new PlaceAutocompleteElement class? Is the old one getting deprecated any soon in the near time?

autocomplete = new GoogleApi.maps.places.Autocomplete(
      document.getElementById('startIcon'),
      {
        componentRestrictions: { country: country },
      },
    );

We also use some of the fields which autocomplete.getPlace() method offers. Like formatted_address, address_components, geometry.location, name and others. Even these data fields are getting replaced. So, the question is the same. Should I truly make any changes to my code and follow new Places class when using places library?

Do I require a new API key if I want to do the above changes? Because https://developers.google.com/maps/documentation/javascript/place-get-started#get-an-api-key-and-enable-the-required-apis says the new api key is only for new Text search but we are not using it.

I am struggling with the waitForResponse function in Playwright. My test is below. What I would like to happen is for the response to be waited for, identified, and for the response body to be made available to me.

clickSubmitButton = async () => {
  const [response] = await Promise.all([
    this.page.waitForResponse(
      (response) =>
        response.url() === queryUrl &&
        locatorQuery.test(response.request().postData()!)
    ),
    this.submitButton.click(),
  ]);
  console.log(await [response][0].json());
  return new PCViewPassportPage(this.page);
};

I can see that the response object is identified and captured because I am logging it out (see below, { data: { passport: null } }). However my tests are timing out and failing.

Running 2 tests using 2 workers
[passport] › smoke.spec.ts:27:5 › Search existing Passport
{ data: { passport: null } }
[passport] › smoke.spec.ts:4:5 › Edit an existing Passport
{ data: { passport: null } }

Error: page.waitForResponse: Test timeout of 40000ms exceeded.

   at ../page-objects/pc-home.ts:37

  35 |   clickSubmitButton = async () => {
  36 |     const [response] = await Promise.all([
> 37 |       this.page.waitForResponse(
     |                 ^
  38 |         (response) =>
  39 |           response.url() === queryUrl &&
  40 |           locatorQuery.test(

If anyone could help me with this I would really appreciate it, I’m struggling to figure this out.

I’m looking for a simple (CSS-) solution for the following problem:

I filled an outer DIV with 8 lines of nested DIVs. The outer DIV is displayed as inline-block with overflow-y auto and hidden overflow-x. The width of the outer DIV should not be specified firmly. Firefox on Windows covers scrollable content of the widest line(s) with a scrollbar. I have tried many (see below) different browsers, but Firefox was the only candidate with this behavior.

.outer {
  display: inline-block;
  border: 1px solid #000;
  height: 6lh;
  overflow-x: hidden;
  overflow-y: auto;
}

.inner {
  padding: 2px 5px;
  text-wrap: nowrap;
}

<div id="outer" class="outer">
    <div id="inner" class='inner'>short</div>
    <div class='inner'>longer</div>
    <div class='inner'>another</div>
    <div class='inner'>medium</div>
    <div class='inner'>overflow</div>
    <div class='inner'>inline</div>
    <div class='inner'>scrollbar</div>
    <div class='inner'>incomprehensibility</div>
</div>

Screenshot of Firefox hiding content behind scrollbar

Firefox: reported dimensions of DIVs
| | | visible | auto | scroll | hidden
| — | — | — | — | — | — |
| outer | offsetWidth | 148 | 148 | 165 | 148
| | clientWidth | 129 | 129 | 146 | 146
| inner | offsetWidth | 129 | 129 | 146 | 146
| | clientWidth | 129 | 129 | 146 | 146

Other browsers: reported dimensions of DIVs (outer offsetWidth slightly differs, depending on browser’s scrollbar width)
| | | visible | auto | scroll | hidden
| — | — | — | — | — | — |
| outer | offsetWidth | 163 | 163 | 163 | 148
| | clientWidth | 146 | 146 | 146 | 146
| inner | offsetWidth | 146 | 146 | 146 | 146
| | clientWidth | 146 | 146 | 146 | 146

A look on a shorter content that doesn’t force scrolling results in the same values as shown in the upper second table. There’s no difference between Firefox an the others.

.outer {
  display: inline-block;
  border: 1px solid #000;
  height: 6lh;
  overflow-x: hidden;
  overflow-y: auto;
}

.inner {
  padding: 2px 5px;
  text-wrap: nowrap;
}

<div id="outer" class="outer">
    <div id="inner" class='inner'>short</div>
    <div class='inner'>incomprehensibility</div>
</div>

Neither playing around with CSS attributes (grid, flex, transform…) nor searching for conclusions was successful. My only solution yet is to manipulate the dimensions via Javascript. The clientWidth of the outer DIV is always the same in any browser except Firefox, independent of the chosen overflow method or the content’s height.

My solution with Javascript:

function correctFF() {
    let o = document.getElementById('outer');
    let i = document.getElementById('inner');

    // get dimensions of overflow-y: scroll
    o.style.overflowY = 'scroll';
    let ocs = o.clientWidth;
    let oos = o.offsetWidth;

    // get dimensions of overflow-y: auto
    o.style.overflowY = 'auto';
    let oca = o.clientWidth;

    // Firefox (clientWidth of overflow auto < scroll)?
    // => enlarge outer DIV to offsetWidth of overflow scroll
    if(oca < ocs) o.style.width = oos + 'px';
}

Do you have any ideas?

Tested browsers (desktop)

• Chrome 133.0.6943.142
• Edge 133.0.3065.92
• Firefox 135.0.1
• Opera 117.0.5408.53
• Safari 18.2

Tested browsers (mobile)

• Chrome 132.0.6834.80
• Dolphin 12.4.1
• Firefox 135.0.1
• Samsung Internet 27.0.0.79

But this is I need to make variable

setTimeout(function(){
  markCountry(
    "<?php echo $pin['name']?>",
    '<?php echo $pin['name'];?>',
    '<?php echo $pin['url'];?>',
    '<?php echo $pin['icon_type'];?>'
  );
}, 500 * <?php echo $xi; ?>);

The <?php echo $xi; ?> code is the number order Pins.

The <?php echo $pin['name']?> code is the Countries.

If you static this is the result.

setTimeout(function(){
  markCountry(
    "China",
    'China',
    'https://arabica.xbiz.jp/en/locations/china',
    'https://arabica.xbiz.jp/en/wp-content/themes/arabica/images/pins/pin-group-97.png'
  );
}, 500 * 1);

setTimeout(function(){
  markCountry(
    "Thailand",
    'Thailand',
    'https://arabica.xbiz.jp/en/locations/thailand',
    'https://arabica.xbiz.jp/en/wp-content/themes/arabica/images/pins/pin-group-10.png'
  );
}, 500 * 2);

setTimeout(function(){
  markCountry(
    "Singapore",
    'Singapore',
    'https://arabica.xbiz.jp/en/locations/singapore',
    'https://arabica.xbiz.jp/en/wp-content/themes/arabica/images/pins/pin-group-8.png'
  );
}, 500 * 3);

So ther maps drop order will be China, Thailand, Singapore

I have a string like this:

const string = 'We have this 8/8 / 69 structure in the text/another text and we want to grab it'

and I want to return the part of text which are numbers between slashes. the structure I want is this:

‘ 8 /8 / 69 ‘

Number/Number/Number

Note that it could be untrimed:

'   8/  8 /   69  '

or

'8/8/69'

I tried to split the string by / and return the structure but the issue is I want to be sure that only the Number/Number/Number returns.

so I recently wanted to be able to apply changes to my scripts without needing to restart it, I’ve mostly got it all working but one issue I’m having is getting my MongoDB models to refresh too, I tried many ways but none worked. The current way I am refreshing my code is by fetching one of my API points to trigger the refresh Models script, it says the models have been refreshed but when i try to check it, it wouldn’t show me the things I added

My current code to refresh the models:

const mongoose = require('mongoose');
const fs = require('fs');
const path = require('path');

function refreshModels() {
    try {
        mongoose.models = {};
        mongoose.modelSchemas = {};

        const modelsPath = path.join(__dirname, '../models');
        const modelFiles = fs.readdirSync(modelsPath).filter(file => file.endsWith('.js'));

        for (const file of modelFiles) {
            const filePath = path.join(modelsPath, file);
            const model = require(filePath);
            const modelName = path.basename(file, '.js');
            mongoose.model(modelName.charAt(0).toUpperCase() + modelName.slice(1), model.schema);
        }

        console.log('Models have been refreshed');
    } catch (error) {
        console.log('Error refreshing models:', error);
    }
}

module.exports = refreshModels;

And here is my model i am testing, the test part is added before refreshing

const { Schema, model } = require('mongoose');

const Alerts = new Schema({
    guildId: {
        type: String,
        required: true,
    },
    channelId: {
        type: String,
        required: true,
    },
    test: {
        type: String,
        required: true,
    }, 
});

module.exports = model('Alerts', Alerts);

does anyone know how i could possibly get this to work? or should i use something like MySQL but I would rather not transfer all the data over.

As an example I have the creation of an axios instance.

/lib/axiosPrivate.js
import axios from 'axios';

const axiosPrivate = axios.create({
    baseURL: 'https://xxx.xxx.com.br',
});

export default axiosPrivate;

Now I have 3 components in React Native that will use this object:

//ClientList.js
import axiosPrivate from '../lib/axiosPrivate';

export default props => {

    const fetchClient = async () => {
            const { data } = await axiosPrivate.get('clients');
        ...
    }
...
}

//ProducList.js
import axiosPrivate from '../lib/axiosPrivate';

export default props => {

    const fetchProduct = async () => {
            const { data } = await axiosPrivate.get('products');
        ...
    }
...
}

//SaleList.js
import axiosPrivate from '../lib/axiosPrivate';

export default props => {

    const fetchSale = async () => {
            const { data } = await axiosPrivate.get('sales');
        ...
    }
...
}

By doing this, all 3 components share the same axiosPrivate instance.

My question is why does this happen?

Every time I import axiosPrivate in components, shouldn’t the “axios.create” command create another instance?

Input field is getting cleared on negative symbol (-) entry.
How to allow negative/positive numbers with 2 decimal limits ?

$("#txt-Total").on("input", function() {
  let value = $(this).val();
  let regex = /^-?d*.?d{0,2}$/;

  if (regex.test(value)) {
    // Valid input: allows negative sign, digits, and up to two decimal places
    $(this).data('previousValue', value); // Store valid value
  } else {
    // Invalid input: restore to the last valid value
    $(this).val($(this).data('previousValue') || '');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<input type="text" class="form-control" id="txt-Total" name="txt-Total" maxlength="100" ng-model="Total" />

I would like to send via POST a value to a PHP script. Would this be the way to go about it? I know there is something not quite right because when I click on the dropdown, nothing changes. I believe the error is in the JS, though I’m not quite sure where as I am unfamiliar with JS. I looked at the console for errors and it does not show any.

The PHP file is called testing.php. There is a dropdown box where the user can select a value. Under that is a default output of “Nope, nothing yet”. When the user selects a value from the dropdown then that value is POSTed back to the same page. The PHP script then sees that there was a post, and does some math based on a value it pulls from the get_adjuster_from_db() function.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>

$(document).ready(function() 
{
  $("#nList").change(function() 
  {
    $.post("testing.php",    //Send the value back to the page
     {
       val: $(this).val()         //The value of the dropdown
     });
  });
});
</script>

And then further down…

<select id = "nList">
<option value = "" selected>~~Please chose a value~~</option>
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
<br>
<p id = "value"></p>

<?php
  if ($_SERVER["REQUEST_METHOD"] == "POST")
  {
    echo "About to do some math:<br>";       //Just a test-line to print something out
    $dbNumber = get_adjuster_from_db();    //Get multiplier value from the database
    $pn = $_POST["val"];               //Assign $pn to the posted value
    $npn = $pn * $dbNumber;           //Do the math
    echo "<p>" . $pn . " x " . $dbNumber . " = " . $npn . "</p>";
  }
  else
  {
    echo "Nope, nothing yet.";
  }
?>

The problem is that when requesting from the frontend to the server, it returns either an error or an empty string (just empty) to the console if you disable Cors in fetch(mode: “no-cors”).
CORS headers are disabled on the server, which means they shouldn’t be there, but to be safe, after I got an error, I also tried to configure CORS in fetch: I turned it off completely (mode:”no-cors”), prescribe the headers themselves.

At the same time, when I send a request without React – in pure JS or using Postman, the string is displayed correctly and the server responds without any problems.

Backend(Java):

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
@RestController
public class DemoApplication {

 public static void main(String[] args) {
  SpringApplication.run(DemoApplication.class, args);
 }

 @GetMapping
 public String hello() {
  return "hello";
 }
}

Frontend (JavaScript, React):

import { useEffect, useState } from "react";

function App() {
  const [response, setResponse] = useState("");

  useEffect(() => {
    fetch('http://localhost:8080')
      .then(response => response.text())
      .then(text => setResponse(text))
      .catch(error => console.error('Error:', error));
  }, []); 

  return (
    <div>
      {response}
    </div>
  );
}

export default App;

I use the following code:

The useBaseAxios hook (the basic hook for queries, will be used inside another custom hook)

import { useState, useEffect} from 'react';
import axios from 'axios';

const baseAxios = axios.create({
    baseURL: 'http://127.0.0.1:8000/api/v1',
});

const useBaseAxios = ({ method = "GET", url }) => {
    const [data, setData] = useState(null);
    const [isLoading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const controller = new AbortController();
        const signal = controller.signal;

        const fetchData = async () => {
            try {
                const response = await baseAxios.request({ method, url, signal })
                setData(response.data)

            } catch (error) {
                if (!axios.isCancel(error)){
                    setError(error)
                }
            } finally {
                setLoading(false)
            }
        }

        if (!data) {
            fetchData()
        }

        return () => {
            controller.abort()
        }

    }, [method, url])

    return [data, isLoading, error]
};

export default useBaseAxios;

The useClosestLesson hook (uses useBaseAxios, used in the Main component)

import useBaseAxios from "./useBaseAxios";

function useClosestLessons() {
    const [data, isLoading, error] = useBaseAxios({ method: 'GET', url: '/lessons' })

    let lessonsSchedule = [];
    let currentLesson = {};

    if (data) {
        lessonsSchedule = [...data]
        currentLesson = lessonsSchedule[0]
    }

    return [lessonsSchedule, currentLesson, isLoading, error]
}

export default useClosestLessons

The Main component (when it is rendered, the console logs are displayed)

import React from "react"; 
import './Main.scss';
import useClosestLessons from "../../hooks/fetch-hooks/useClosestLessons";
import { useState, useEffect, useCallback } from "react";
import axios from "axios";

const Main = () => {
    const [lessonsSchedule, currentLessons, isLoading, error] = useClosestLessons();

    console.log(lessonsSchedule)
    console.log(currentLessons)

    if (isLoading) return (<p>Загрузка...</p>)

    return(...)

Without using StrictMode, I expect to receive "null", "null" in the console, then the necessary array and object.

If you return it, I get the following picture:

console.logs

If I look into profiler, there are 3 renders of Main component.

profiler

Should this be the case, and if so, why?

I only expecting for a detailed explanation of this case is sufficient.

I upgraded Bootstrap from 5.1 to 5.3.3. This was to solve an issue I was having with popovers. But now the borders around the controls don’t appear.

The image below shows a dropdown list, a disabled input, and a regular input. None of them have a border.

I have refreshed everything but the problem persists. Is anyone aware of what is causing this?

I am having an issue with my code not working on my WordPress website, yet works on a test server, the error is Uncaught TypeError: Cannot set properties of null (setting 'src'), on line 43, the issue causes the playlist function to not replace the video on the player, and instead just gives that error, here is the code:

Javascript:

function fetchPlaylistItems() {
  // Get the playlist ID from the hidden HTML element
  const playlistIdElement = document.getElementById('playlist-id');
  const playlistId = playlistIdElement ? playlistIdElement.dataset.playlistId : null;

  if (!playlistId) {
    console.error('Playlist ID not found.');
    return;
  }

  const apiKey = 'AIzaSyC_xfwCiUu5BtRHw45Z8M3JeLEnE4El7L4'; // Replace with your YouTube API key
  const apiUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=${playlistId}&key=${apiKey}`;

  fetch(apiUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      const playlistItems = data.items;
      const playlistList = document.getElementById('playlist-items');

      // Clear existing list
      playlistList.innerHTML = '';

      // Add each playlist item to the list
      playlistItems.forEach(item => {
        const videoId = item.snippet.resourceId.videoId;
        const videoTitle = item.snippet.title;

        const listItem = document.createElement('li');
        const link = document.createElement('a');
        link.href = `https://www.youtube.com/watch?v=${videoId}`;
        link.target = "_blank";
        link.textContent = videoTitle;

        // Optional: Make playlist items change the player video
        link.addEventListener('click', (e) => {
          e.preventDefault(); // Prevent default link behavior
          const player = document.getElementById('youtube-player');
          player.src = `https://www.youtube.com/embed/${videoId}?rel=0`;
        });

        listItem.appendChild(link);
        playlistList.appendChild(listItem);
      });
    })
    .catch(error => {
      console.error('Error fetching playlist:', error);
      const playlistList = document.getElementById('playlist-items');
      playlistList.innerHTML = '<li>Unable to load playlist. Please try again later.</li>';
    });
}

// Run the function when the page loads
window.onload = fetchPlaylistItems;

Im a student who studying code.
I want to change css width with javascript,
but it would be inside of textarea.

here is my code.

        <textarea name="" id="content" cols="75" rows="10"></textarea>
    <button id="btn">submit</button>
    <div id="contentHere"></div>
    <button id="btn2">style change</button>

    <script>
                document.getElementById("btn").addEventListener('click',input);
        function input(){
          const textareaValue = document.getElementById('content').value;
            document.getElementById('contentHere').innerHTML = textareaValue;
        }

                document.getElementById("btn2").addEventListener('click',changeWidth);
        function changeWidth(){
            const test2 = document.document.getElementsByClassName('test').firstChild;
            document.test2.style.width = "1000px"
        }
    </script>

and I’ll put these texts in textarea.

<div class="test">
 <table width=500px>
  <tr>
   <td>
    abc
   </td>
  </tr>
 </table>
</div>

But I kept getting errors, and I was stuck, unable to solve the problem.

I’d really appreciate it if you could help.

+This is my error:
Uncaught TypeError: Cannot read properties of undefined (reading ‘getElementsByClassName’)
at HTMLButtonElement.test2

Purpose

I am building an ASPX website. It is a form type of webpage, there are 55 questions. For each question, there are three answers, and to lay these out a use a CSS grid style to make sure everything is spaced consistently. We have C# code behind for this form.

Issue

The MaintainScrollPositionOnPostBack=”true” is not working and we need it to. My team and I have troubleshooted quite a bit and there is no success. We do not know where to look at this point. Any direction to move forward/look into would be appreciated.

Context

For the design period, this website was built in HTML initially, and then dropped into the ASP.NET website and we have had to rewrite some things to cater to the ASP.NET and the code behind. Troubleshooting this has us really stumped. Something is interfering with MaintainScrollPositionOnPostBack=”true”, and we do not know what.

Things to Consider:

1). We have used a grid display for within each question. 2). We have a sitemaster with a vertical navigation bar that is applied to the site. I have went ahead and included that info.
3). We have C# kind of handling the maintain scroll position on postback, but it is not mimicking the behavior we want to see. As we are tabbing down the page, selecting answers for the questions, the answer we select shifts that answer down to the very bottom of the page. So this shifts the page around in an unpleasant way. See below:

Goal:

When any button is pressed, and by default, a postback is initiated, we want the scroll position in the page to be stay where it was pre-postback. Since users will be using this as a form, we want the most seamless experience as you complete the questions.

OSTA.aspx (I included 5 of the 55 questions.)

<%@ Page Title="SADET - OSTA Form" Language="C#" MaintainScrollPositionOnPostBack="true" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="OSTA.aspx.cs" Inherits="SADET_2025.OSTA" EnableEventValidation="false"%>


<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <link rel="stylesheet" href="Content/OSTA.css"/>
    <link rel="stylesheet" href="Content/bootstrap.min2.css"/>
    <script src="Content/popper.min.js"></script>
    <main aria-labelledby="title">

    <!-- File Information -->

    <div class="textFields bottom-line">
        <div class="fileInfoHeader">
            <p>File Information</p>
        </div>
        <div>
            <div>
                <p>File Number</p>
                <textarea class="form-control" rows="1" name="OSTAFileNumber" id="OSTAFileNumber" maxlength="49" Runat="Server" TabIndex="7"></textarea>
            </div>
            <br>
            <div>
                <p>Escrow Officer</p>
                <textarea class="form-control" rows="1" name="OSTAEscrowOfficer" id="OSTAEscrowOfficer" maxlength="49" Runat="Server" TabIndex="8"></textarea>
            </div>
        </div>
        <div>
            <div>
                <p>Flash</p>
                <textarea class="form-control" rows="1" name="OSTAFlash" id="OSTAFlash" maxlength="49" Runat="Server" TabIndex="9"></textarea>
            </div>
            <br>
            <div>
                <p>Date Closed</p>
                <input class="form-control" type="date" value="" name="OSTADateClosed" id="OSTADateClosed" maxlength="49" Runat="Server" TabIndex="10">
            </div>
        </div>
        <div>
            <div>
                <p>Branch</p>
                <textarea class="form-control" rows="1" name="OSTABranch" id="OSTABranch" maxlength="49" Runat="Server" TabIndex="11"></textarea>
            </div>
            <br>
            <div>
                <div>
                    <p>Transaction Type</p>
                    <select class="form-select" aria-label="Default select example" name="OSTATransactionType" id="OSTATransactionType" Runat="Server" TabIndex="12">
                        <option value="1">Residential Sale</option>
                        <option value="2">Refinance</option>
                        <option value="3">Other</option>
                    </select>
                </div>
            </div>
        </div>
        <div>
            <div style="padding-top: 4%;">
                <p>Transaction Amount ($)</p>
                <input class="form-control" type="number" step="1.00" min="0" placeholder="0.00" name="OSTATransactionAmount" id="OSTATransactionAmount" maxlength="49" Runat="Server" TabIndex="13">
            </div>
            <br>
            <div style="padding-top: 1%;">
                <p>Exception Percentage
                    <a class="d-inline-block" style="padding-right: 0.75%;" data-bs-toggle="tooltip"  data-bs-placement="right" data-bs-title="This is the execpetion percentage score for this file." data-bs-custom-class="custom-tooltip">
                        <img src="Images/info-circle.png" alt="Information Icon">
                    </a>
                </p>
                <!--<p><b>4%</b></p>-->
                <div style="padding-right: 35%; padding-left: 35%;">
                    <asp:TextBox ID="OSTAExceptionPercentage" style="text-align: center;" Width="85px" visible="true" runat="server" placeholder="0.0" MaxLength="6" CssClass="form-control" ReadOnly="true" TabIndex="14"/>
                </div>
            </div>
        </div>
    </div>

    <!-- OSTA Attributes (Questions 1-55) -->

    <div class="attributes">

    <!-- High Risk Attributes Red Header  (1-39) -->
        <div class="redHR">
            <h2>High Risk Attributes</h2>
            <hr>
        </div>

                <!-- Question 1 -->

        <div class="question">
            <p><b>
                    1).
                </b> CD Delivered Timely
                <a class="d-inline-block" data-bs-toggle="tooltip"  data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Holding Escrow files are properly monitored, approved, and documented. Refer to the Office Audit Checklist for further 
details.">
                    <img src="Images/info-circle.png" alt="Information Icon">
                </a>
            </p>
            <div class="attributeButtons">
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ1Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ1Button1Click" TabIndex="15"/>
                </div>
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ1Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ1Button2Click" TabIndex="16"/>
                </div>
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ1Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ1Button3Click" TabIndex="17"/>
                </div>
                <div class="commentContainer">
                    <asp:TextBox ID="OSTAQ1CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="18"/>
                </div>
            </div>
            <h6>Evidence exists that the Closing Disclosure (“CD”) was provided to the seller on or before consummation in accordance with 
Tech Memo 165-2015.</h6>
        </div>
        <br>
        <hr>

        <!-- Question 2 -->

        <div class="question">
            <p><b>
                    2).
                </b> Wires Verified
                <a class="d-inline-block" data-bs-toggle="tooltip"  data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Verbal verification of ALL wires and/or wire disbursement changes was made in accordance with the current updated Escrow Fraud Memo.">
                    <img src="Images/info-circle.png" alt="Information Icon">
                </a>
            </p>
            <div class="attributeButtons">
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ2Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ2Button1Click" TabIndex="19"/>
                </div>
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ2Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ2Button2Click" TabIndex="20"/>
                </div>
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ2Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ2Button3Click" TabIndex="21"/>
                </div>
                <div class="commentContainer">
                    <asp:TextBox ID="OSTAQ2CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="22"/>
                </div>
            </div>
            <h6>Verbal verification of ALL wires and/or wire disbursement changes was made in accordance with the current updated Escrow 
Fraud Memo, which requires the notation of the name of the person who verified the information, the phone number called, 
and the date and time of the call.</h6>
        </div>
        <br>
        <hr>

        <!-- Question 3 -->

        <div class="question">
            <p><b>
                    3).
                </b> Purchase Contract/Lenders Inst followed
                <a class="d-inline-block" data-bs-toggle="tooltip"  data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="Escrow transactions were conducted in compliance with the purchase agreement and/or escrow instructions and lender’s instructions.">
                    <img src="Images/info-circle.png" alt="Information Icon">
                </a>
            </p>
            <div class="attributeButtons">
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ3Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ3Button1Click" TabIndex="23"/>
                </div>
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ3Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ3Button2Click" TabIndex="24"/>
                </div>
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ3Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ3Button3Click" TabIndex="25"/>
                </div>
                <div class="commentContainer">
                    <asp:TextBox ID="OSTAQ3CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="26"/>
                </div>
            </div>
            <h6>Escrow transactions were conducted in compliance with the purchase agreement and/or escrow instructions and lender’s 
instructions.  </h6>
        </div>
        <br>
        <hr>

        <!-- Question 4 -->

        <div class="question">
            <p><b>
                    4).
                </b> Date Verified
                <a class="d-inline-block" data-bs-toggle="tooltip"  data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="The print date noted by the system on the principal’s Closing Statement was the same or prior to the signature date of the buyer/seller.">
                    <img src="Images/info-circle.png" alt="Information Icon">
                </a>
            </p>
            <div class="attributeButtons">
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ4Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ4Button1Click" TabIndex="27"/>
                </div>
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ4Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ4Button2Click" TabIndex="28"/>
                </div>
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ4Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ4Button3Click" TabIndex="29"/>
                </div>
                <div class="commentContainer">
                    <asp:TextBox ID="OSTAQ4CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="30"/>
                </div>
            </div>
            <h6>The print date noted by the system on the principal’s Closing Statement was the same or prior to the signature date of the 
buyer/seller. </h6>
        </div>
        <br>
        <hr>

        <!-- Question 5 -->

        <div class="question">
            <p><b>
                    5).
                </b> Closing Statement signed by all parties
                <a class="d-inline-block" data-bs-toggle="tooltip"  data-bs-placement="right" data-bs-custom-class="custom-tooltip" data-bs-title="The Closing Statement was signed by all parties to the transaction. (Even if the lender prepares the CD, we require the borrower to sign our Closing Statement as acceptance and approval of the c
harges.)">
                    <img src="Images/info-circle.png" alt="Information Icon">
                </a>
            </p>
            <div class="attributeButtons">
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ5Button1asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Pass" OnClick="OSTAQ5Button1Click" TabIndex="31"/>
                </div>
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ5Button2asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="Fail" OnClick="OSTAQ5Button2Click" TabIndex="32"/>
                </div>
                <div class="buttonPadding">
                    <asp:Button ID="OSTAQ5Button3asp" CssClass="btn btn-primary unique" style="width:150px; height:50px" ForeColor="DimGray" BackColor="Transparent" BorderColor="DimGray" runat="server" Text="N/A" OnClick="OSTAQ5Button3Click" TabIndex="33"/>
                </div>
                <div class="commentContainer">
                    <asp:TextBox ID="OSTAQ5CommentBoxasp" visible="false" runat="server" TextMode="MultiLine" CssClass="commentBoxStyle" placeholder="Additional Comments" MaxLength="254" TabIndex="34"/>
                </div>
            </div>
            <h6>The Closing Statement was signed by all parties to the transaction. </h6>
        </div>
        <br>
        <hr>

OSTA.css

/* Body */
body {
    font-family: 'Segoe UI';
    background-color: #f7f3eb !important;
}

.navbar {
    background-color: #ffffff !important;
}

/* Batch Information */

.batchFields {
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 2%;
    padding-bottom: 1%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    justify-items: center;
    align-items: center;
}

    .batchFields p {
        text-align: center;
        font-size: large;
    }

.batchInfoHeader {
    justify-content: center;
    align-items: center;
}

    .batchInfoHeader p {
        text-align: center;
        font-size: x-large;
        padding: 5%;
    }

.batchFields button {
    margin-top: 2.5em;
}

/* File Information */

.textFields {
    padding: 1%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    justify-items: center;
    align-items: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #f7f3eb !important;
    z-index: 1000;
}

    .textFields p {
        text-align: center;
        font-size: large;
    }

.fileInfoHeader {
    justify-content: center;
    align-items: center;
}

    .fileInfoHeader p {
        text-align: center;
        font-size: x-large;
        padding: 10%;
    }

.bottom-line {
    border-bottom: 1px solid lightgrey;
}

/* Attributes */

.attributes {
    position: relative;
    padding-top: 2%;
    padding-left: 8%;
    padding-right: 8%;
}

/* Attributes - Questions */
.tooltip-inner {
    max-width: 500px !important;
}

.custom-tooltip .tooltip-inner {
    background-color: white;
    color: black;
    font-size: 1.5vh;
    border: 1px solid black;
}

.custom-tooltip .arrow::before {
    border-right-color: white;
}

.d-inline-block {
    padding-right: 0.75%;
}

.question p {
    font-size: x-large;
    margin: auto;
}

/* Attributes - Questions Buttons */

.btn.btn-primary unique {
    width: 100%;
    height: 100%;
    font-size: 16px !important; /* Makes the text a little bigger */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}

.btn.btn-primary.unique:hover {
    color: white !important; /* Inverted color */
    background-color: DimGray !important; /* Inverted background color */
    border-color: DimGray !important; /* Ensure border color is consistent */
}

.attributeButtons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    justify-items: center;
    align-items: center;
    padding-left: 2%;
    padding-right: 2%;
    height: 100vh;
    overflow: auto;
}

.attributes hr {
    color: #636363;
}

.redHR hr {
    color: #ff3333;
}

.redHR h2 {
    color: #ff3333;
    text-align: center;
}

.greenHR hr {
    color: #49ab51;
}

.greenHR h2 {
    color: #49ab51;
    text-align: center;
}

.buttonPadding {
    padding: 5%;
}

.buttonPadding button {
    padding: 0.5em 1em; /* Relative padding */
    font-size: large; /* Relative font size */
    width: 8rem; /* Relative width */
}

/* Attributes - Questions Comment Box */

.commentContainer {
    grid-column-start: 4;
    grid-column-end: 7;
    /*grid-column-end: 6;*/
}

.commentBoxStyle {
    border-radius: 5px;
    width: 25vw;
    height: 8vh;
    display: inline-block;
}

/*
    .commentHeaderStyle {
        display: none;
    }
*/

/* Bottom Comment Box */

.commentOverallHeaderStyle {
    font-size: x-large;
}

.commentOverallBoxStyle {
    padding-left: 8%;
    padding-right: 8%;
    /*display: grid;
    grid-template-columns: repeat(4, 1fr);
    */
}

    .commentOverallBoxStyle textarea {
    width: 50%;
    /*
    grid-column-start: 1;
    grid-column-end: 3;
    */
    border-radius: 5px;
    }

.submitButton {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 2%;
    padding-bottom: 2%;
    justify-items: center;
}

OSTA.aspx.cs (when we do not have control.Focus(), when a question is selected or page is refreshed, the scroll position goes to the top of the page. control.Focus() brings the scroll position to the bottom, as seen in the gif before. We want it to MAINTAIN scroll posiition)

        ///-------------------[ PAGE LOAD ]-------------------
        protected void Page_Load(object sender, EventArgs e){
            this.Page.MaintainScrollPositionOnPostBack = true;
            if(Page.IsPostBack){
                //is there a way to determine vertical scrolling location?
                questionStatusText.Text       = questionsUnanswered.ToString();
                
                string controlName = Page.Request.Params["__EVENTTARGET"];
                System.Web.UI.Control control = GetPostBackControl(this.Page);
                control.Focus();
                // 'center' can be changed to 'start' for top positioning or 'end' for bottom positioning
                ScriptManager.RegisterStartupScript(this, this.GetType(), "scrollToControl", "scrollToControl('" + control.ClientID + "', 'center');", true);
                
                //TRY TO MAKE THIS MORE EFFICIENT - sender?                
                selectedBatchNumber                      = OSTABatchNumberDropdownasp.Items[OSTABatchNumberDropdownasp.SelectedIndex].Text;
                OSTABatchNumberDropdownasp.SelectedValue = selectedBatchNumber;
                OSTAFileNumberDropdownasp.DataSource     = ReadSQL("SELECT DISTINCT FileNumber FROM [SADET].[dbo].[OSTA] WHERE [Hidden] != 1 AND [BatchNumber] = '" + selectedBatchNumber + "'",null);
                OSTAFileNumberDropdownasp.DataTextField  = "FileNumber";
                OSTAFileNumberDropdownasp.DataBind();
            }else{
                //ConnectAD();
                OSTABatchNumberDropdownasp.DataSource     = ReadSQL("SELECT DISTINCT BatchNumber FROM [SADET].[dbo].[OSTA]  WHERE [Hidden] != 1 UNION SELECT DISTINCT BatchNumber FROM [SADET].[dbo].[BatchFiles]",null);
                OSTABatchNumberDropdownasp.DataTextField  = "BatchNumber";
                OSTABatchNumberDropdownasp.DataBind();

                OSTAFileNumberDropdownasp.DataSource    = ReadSQL("SELECT DISTINCT FileNumber FROM [SADET].[dbo].[OSTA] WHERE [Hidden] != 1 UNION SELECT DISTINCT FileNumber FROM [SADET].[dbo].[BatchFiles]",null);
                OSTAFileNumberDropdownasp.DataTextField = "FileNumber";
                OSTAFileNumberDropdownasp.DataBind();
            }
        }
        ///-----------------[ END PAGE LOAD ]-----------------

OSTA.aspx (Javascript inserted)

    <script>
        function scrollToControl(controlId, position) {
            var control = document.getElementById(controlId);
            if (control) {
                control.scrollIntoView({ behavior: 'smooth', block: position });
            }
        }
        // Tooltip functionality
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

        // Dropdown Functionality
        const dropdown = document.getElementById('transactionDropdown');
        const textarea = document.getElementById('transactionType');
        dropdown.addEventListener('change', function () {
            textarea.value = dropdown.value;
        });

        // "Back to Top Button"
        let mybutton = document.getElementById("topButton");
        function topFunction() {
            var element = document.querySelector('[tabindex="1"]');
            if (element) {
                element.focus();
            }
        }
    </script>

Sitemaster

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SADET_2025.SiteMaster" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <link href="Content/Site.css" rel="stylesheet" />
    <link rel="stylesheet" href="Content/all.min.css">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> -->
</head>
<body>
    <form id="form1" runat="server">
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark" style="background-color: #ffffff !important;">
            <h1><img src="Images/FNF_logo_BIG.png" style="height:70px; width:70px"/></h1>
            <h1><img src="Images/DSG_LOGO.png"/></h1>
        </nav>
        <div class="wrapper">
            <div class="sidebar">                
                <br />
                <h1><a href="Home.aspx"><img src="Images/SADETs.png" alt="SADET"/></a></h1>
                <nav>
                    <ul>
                        <li><a href="RONSA.aspx"><img src="Images/RONSA.png" alt="RONSA" /></a></li>
                        <li><a href="COSTA.aspx"><img src="Images/COSTA.png" alt="COSTA" /></a></li>
                        <li><a href="OSTA.aspx"><img src="Images/OSTA.png" alt="OSTA" /></a></li>
                        <!--<li><a href="About.aspx"><img src="Images/PlaceHolder.png" alt="OSTA" /></a></li>-->
                        <li><a href="Contact.aspx"><img src="Images/envelope.png" alt="Support" /></a></li>
                    </ul>
                </nav>
            </div>
            <div class="content">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>
        </div>
    </form>
</body>
</html>

Sitemaster.css

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
}
html, body {
    height: 100%;
    margin: 0;
    font-family:'Segoe UI';
}

.navbar {
    padding: 0;
    background-color: #ffffff !important;
    height: 80px;
    width: 100%;
    align-items: center;
    flex-direction: row;
    display: flex;
    position: relative; /* Ensure this is set */
}

h1 {
    margin: 0;
}

h1 img {
    width: 200px;
    height: 70px;
}

.wrapper {
    display: flex;
    height: calc(100vh - 80px); /* Adjust this based on the height of your navbar */
    position: relative;
}

.sidebar {
    width: 100px;
    background-color: #383838;
    padding: 15px;
    box-sizing: border-box;
    font-family: 'Segoe UI';
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 0;
}

.sidebar h1 {
    margin: 0;
    padding: 10px 0;
    font-size: 24px;
}

.sidebar h1 img {
    width: 250px;
    height: 30px;
}

.sidebar h1 a {
    text-decoration: none;
    color: #f31414;
}

.sidebar h1 a img {
    width:  90px;
    height: 90px;
}

.sidebar nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar nav ul li {
    margin: 10px 0;
}

.sidebar nav ul li img {
    width:  80px;
    height: 50px; 
}

.sidebar nav ul li a {
    text-decoration: none;
    color: #ffffff;
}

.content {
    flex-grow: 1;
    box-sizing: border-box;
    overflow-y: auto;
    position: relative; /* testing - Alexis 2/14/25 */
}