Category: javascript

I need to be able to detect when the Flowbite Dropdown opens and closes from its parent component. When opened, I need to call an API endpoint and update the state of one of its items, but only when opened. The reason for this is I have dozen’s of these dropdowns present on the page at once and running these update functions all at once is detrimental to the performance.

Here’s a minimal example component. Populate would be an async call to the backend. This works, and does what I want, but this runs for every item for every RowOptions component rendered on the screen. This is a lot of processing. I want this to happen lazily only for the items in the open dropdown.

export default function RowOptions() {
  return (
    <>
      <Dropdown label={<div><DotsIcon/></div>}>
        <Dropdown.Header>Actions</Dropdown.Header>
        {items.map(item => (
          <Dropdown.Item>{populate()}</Dropdown.Item>
        ))}
      </Dropdown>
    </>
  )
}

I’d hoped it would have an onOpen or onClose property I could hook to, but it does not. Is there a wrapper I can use to get this functionality? I tried using a ref to track when it’s visible, but that only worked partially.
For example, I added a div within the dropdown with a ref <div ref={myRef}><div> and then connected that to the state within the dropdown label’s onClick:

export default function RowOptions() {
  const [isOpen, setIsOpen] = useState(false);
  const myRef = useRef(null);

  return (
    <>
      <Dropdown label={<div onClick={() => { setIsOpen(myRef === null) }}><DotsIcon/></div>}>
        <div ref={myRef}><div>
        <Dropdown.Header>Actions</Dropdown.Header>
        {items.map(item => (
          <Dropdown.Item>{populate()}</Dropdown.Item>
        ))}
      </Dropdown>
    </>
  )
}

This worked partially. I could essentially track the state changing if the button was clicked…but this fall apart as soon as you clicked an item or out of the dropdown. Then the state would get all messy. So this approach clearly wasn’t the best option.

My last thought was using a Mutation observer, hooking up to the Dropdown, and then watching the updating of the classes. I’m not sure if this is the best approach, specifically for React, but that’s what I’m working on now.

I am encountering an issue with input fields in my React app. When I try to replace a default value in the input field (e.g., “0” or “1”), I am unable to completely clear the value. Specifically, I cannot delete the first character (whether it’s a number or letter). For example:

If the input is “USD” by default and I try to replace it with “SGD”, I cannot delete the “U” and the input still shows “USD” or “0120” when trying to type “120” instead of “0”.

This happens across multiple input fields, whether I am trying to replace numeric values (e.g., 1 to 120) or currency symbols (e.g., USD to EUR).

   <div className="alert-devise-choice">
    <label htmlFor="symbol" className="alert-deviseLabel">Choisir une devise:</label>
     <input
       type="text"
       id="symbol"
       value={symbol}
       onChange={(e) => handleChange("symbol", e.target.value)}
       className="alert-devise-input"
       required
       autoComplete="off"
       />
    </div>
    {errors.symbol && <small className="error-message">{errors.symbol}</small>}

const handleChange = (field, value) => {

let updatedErrors = { ...errors};

 if (field === 'symbol') {
    const isNumeric = !isNaN(value);
    const validSymbols = filteredDevises.map(devise => devise.symbol);
    const isInList = validSymbols.includes(value.toUpperCase());
 if (isNumeric) {
       updatedErrors.symbol = "Please enter a valid currency symbol.";
    } else {
       updatedErrors.symbol = "";
       setSymbol(value); // or however you store the selected symbol
    }
}
   if (field === 'valueLimit') {
        if (isNaN(value) || value < 0.1) {
           updatedErrors.valueLimit = "Value limit must be a number and at least 0.1.";
        } else {
            updatedErrors.valueLimit = "";
            setValueLimit(value);
       }
    }

setErrors(updatedErrors);
};

Where do I save the value to use it later in the ‘Form’ block? I added this JavaScript code but I don’t know where to store the result and where to insert the variable. I tried putting the variable in the ‘form’ but it doesn’t work

I’m using the Automa Chrome extension to build an automation flow.
I want to extract a value from a web page (for example, a product name or ID), save it, and then reuse it later in the same flow or even in another flow.

I’m confused about where and how variables are stored in Automa.
Should I use the Set Variable block or the Set Data to Storage block?
What’s the difference between them?

Also, is it possible to access a saved variable across different flows or sessions?

I have recently migrated my old MV2 exentension to MV3. While it is ‘done’ and out in the store, I have noticed that when the chrome.storage.local is fairly large, then the extension becomes very slow to load between pages of the extension.

Clearing the data incrementally does help, but users of the extension have notced the threshold we built into the extension is hit very easily and frequently without heavy use. We currently display a warning to clear it off to avoid speed issues as a ‘band-aid’ solution for the interim.

I have not noticed any indication that others are experiencing this type of issue, but that may be down to my use of the API. I use it as in the MV2 version we saved lots of request data for our audit tools into JS objects/arrays and then read them when the user prompts to see the audit. As MV3 uses a service worker, and after doing lots of reading on here and of the official extension documentation; I went with the API to store the data and read on execution. It of course works, but this speed issue is causing some grumbles and I am keen to not have loads of loading wheels in the extension as that doesn’t really solve the issue.

Main question here is, has anyone found more intuitive or alternative ways to store and read lots of data within the extension without compromising the speed of the extension?

I am trying to make a drop box, but I only seem to make it draggable and rearrange the items. And therefore, I can’t have a separate list for containers1 for dropping the items in from containers.

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.img-box')
const containers1 = document.querySelectorAll('.container1')

draggables.forEach(draggable => { 
    draggable.addEventListener('dragstart', () => { 
        draggable.classList.add('dragging')
    })
    draggable.addEventListener('dragend', () => {
        draggable.classList.remove('dragging')
    })
})

containers.forEach(container => { 
    container.addEventListener('dragover', e => {
        e.preventDefault()
        const afterElement = getDragAfterElement(container, e.clientY)
        const draggable = document.querySelector('.dragging')
        if (afterElement == null) {
            container.appendChild(draggable)
        } else {
            container.insertBefore(draggable, afterElement)
        }
    })
})

containers1.forEach(container => {
    containers1.addEventListener('dragover', function (e) {
        e.preventDefault();
    });
    containers1.addEventListener("drop", function (e) {
        e.appendChild(selected);
        selected = null;
    });
});

function getDragAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]
    return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect()
        const offset = y - box.top - box.height / 2
        if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child }
        } else {
            return closest
        }
    }, { offset: Number.NEGATIVE_INFINITY }).element
} 

<body>
    <div class="box">
        <div class="glass-container2">
            <div class="container3">
                <div class="scroller" data-animated="true">
                    <ul class="img-list scroller-inner">
                        <div class="img-box">
                            <div class="draggable" draggable="true">hello</div>
                        </div>
                        <div class="img-box">
                            <div class="draggable" draggable="true">hello</div>
                        </div>
                        <div class="img-box">
                            <div class="draggable" draggable="true">hello</div>
                        </div>
                        <div class="img-box">
                            <div class="draggable" draggable="true">hello</div>
                        </div>
                        <div class="img-box">
                            <div class="draggable" draggable="true">hello</div>
                        </div>
                        <div class="img-box">
                            <div class="draggable" draggable="true">hello</div>
                        </div>
                        <div class="img-box">
                            <div class="draggable" draggable="true">hello</div>
                        </div>
                        <div class="img-box">
                            <div class="draggable" draggable="true">hello</div>
                        </div>
                        <div class="img-box">
                            <div class="draggable" draggable="true">hello</div>
                        </div>
                    </ul>
                </div>
            </div>
        </div>

        <div class="glass-container3">
            <div class="container1"></div>
            <div class="container4">
                <button class="button">
                    Submit
                </button>
            </div>
        </div>
    </div>
</body>

I attempted to make containers1 with a dropping attribute to drag and drop into it from containers.

containers1.forEach(container => {
    containers1.addEventListener('dragover', function(e) {
        e.preventDefault();
    });
    containers1.addEventListener("drop", function(e) {
        e.appendChild(selected);
        selected = null;
    });
});

I want to draw a non-animated crumpled paper chart or a 3d mountain chart like in the link below. but all codes in index.html how can i do that?[i want this][2]
https://codepen.io/ejones/pen/DgLeGO codes here
[2]: https://i.sstatic.net/YFDTcsFx.jpg

Visit https://area51.stackexchange.com/ regularly!
Use angle brackets to force linking: Have you seen https://superuser.com?
To

I am trying to modify a Cypress test to use a similar URL from the same provider but by changing the URL, Cypress does not seem to intercept the request anymore. The original test with the original URL works.

According to my understanding if the webpage makes any request to that URL that Cypress is trying to intercept, it will intercept it. Currently, it times out with the error “No request ever occurred”.

I have tried to add delays, have checked that the intercepts would happen before the tests are made, confirmed the file the test would test works correctly and requests the same URL’s.

Structure of the Code:

describe("the_test", () => {
  beforeEach(() => {
    cy.intercept(
      "URL_1",
      { fixture: "URL1_mockdata.json" }
    ).as("getPopulation");

    cy.intercept(
      "URL_2",
      { fixture: "URL2_mockdata.json" }
    ).as("getEmployment");
  });

  it("Table should be populated if JS is enabled", () => {
    cy.visit("/");
    cy.wait("@getPopulation");
    cy.wait("@getEmployment");

    cy.get("table tbody tr").should("have.length", 10); // Or however many are in your fixture
  });
});

At the bottom of https://new.dekoolputten.be/ I have a section with a few images on the left hand side. I prevent the window from scrolling when they reached the bottom of this section. Then you can only scroll further when you scrolled through the images on the left hand side.

This works via the code below, but I want this to go automatically, so when they reach the end of the section the focus should be in the images div and should scroll automatically. Now you have to hover or click on them.

How can I move the focus of the mouse to a scrollable div?

var image_scroll_bottom, image_scroll_top, image_end, scrollPosition;
$(document).ready(function() {
  image_end = false;
  image_scroll_top = $(".image-scroll-section").offset().top;
  image_scroll_bottom = $(".image-scroll-section").offset().top + $(".image-scroll-section").height();
});

function enableScroll() {
  window.onscroll = function() {};
}

$(window).on("scroll", function() {
  scrollPosition = $(window).height() + $(window).scrollTop();

  if (image_scroll_bottom <= scrollPosition) {
    //tried to put the focus on the images div with no succes
    $(".image-scroll-row .et_pb_column-").focus();
    $(".image-scroll-row .et_pb_column-").trigger('click');
    $(".image-scroll-row .et_pb_column-").click();
    if (!image_end) scrollTo(0, image_scroll_top);
  } else {
    //dont prevent scrolling
  }
});

$(".image-scroll-row").on("scroll", function() {
  if ($(window).scrollTop() >= $('.image-scroll-row .et_pb_column').offset().top + $('.image-scroll-row .et_pb_column').outerHeight() - window.innerHeight) {
    console.log('image at end');
    image_end = true;
  } else {
    console.log('image NOT at end');
    image_end = false;
  }
});

I was working with:

https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template

so a free template with NextJS template. When i download it and run it works just fine.
I reorganize the files- just move the files into different folder and refactor.
After moving files, i get:

Error: Invalid declaration: `U as UserConfig, P as Plugin`

./app/dashboard/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/dashboard/globals.css

Error: Invalid declaration: `U as UserConfig, P as Plugin`
    at async Promise.all (index 0)

Heres the folder structure:

    Directory: C:UsersuserDesktopclient-testdashboardclient


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         6/12/2025  10:46 AM                .idea
d-----         6/12/2025  10:47 AM                .next
d-----         6/12/2025  10:46 AM                app
d-----         6/12/2025  10:45 AM                assets
d-----         6/12/2025  10:44 AM                components
d-----         6/12/2025  10:47 AM                node_modules                                                                                                                                                                     
d-----         6/12/2025  10:41 AM                public
d-----         6/12/2025  10:45 AM                shared
-a----         6/12/2025   9:56 AM             43 .eslintrc.json
-a----         6/12/2025   9:56 AM            435 .gitignore
-a----         6/12/2025   9:56 AM        1430718 banner.png                                                                                                                                                                       
-a----         6/12/2025   9:56 AM            409 eslint.config.mjs
-a----         6/12/2025   9:56 AM             97 jsvectormap.d.ts
-a----         6/12/2025   9:56 AM           1087 LICENSE
-a----         6/12/2025  10:42 AM            216 next-env.d.ts
-a----         6/12/2025   9:56 AM            282 next.config.ts
-a----         6/12/2025  10:47 AM         330777 package-lock.json
-a----         6/12/2025   9:56 AM           1680 package.json
-a----         6/12/2025   9:56 AM             77 postcss.config.js
-a----         6/12/2025   9:56 AM             68 prettier.config.js
-a----         6/12/2025   9:56 AM           6480 README.md
-a----         6/12/2025   9:56 AM            241 svg.d.ts                                                                                                                                                                         
-a----         6/12/2025   9:56 AM            629 tsconfig.json

Deleting the cache:

Remove-Item -Recurse -Force .next, node_modules, package-lock.json

Doesnt fix the error.

The error is after moving the files! I didnt change anything in any files. Why i get this error? How to fix it?

I am a JS newbie trying to understand some JS code. To make things easier for me, I have rewritten a variable that is passed to a function. The relevant part of the function is shown below:

function inscrutableFxn({ state, view, reducers = {} }) {

    // When I use 'experimentalReducers' execution never enters this for loop
    for (const actionName in reducers) {
        const reducer = reducers[actionName]         
        
    }
}

The original variable that makes the script run smoothly is called “myReducers” and its code is shown below.
My version of the variable is called “experimentalReducers” and it too is given below.

When I feed both names into the typeof() function I get the response “object”.

But, there seems to be a subtle difference between “myReducers” and “experimentalReducers”, that I can’t figure out. Why are these two variables different?

Code for both is given below:

const myReducers = {
    add: (state) => ({count: state.count + 1}),
    sub: (state) => ({count: state.count - 1}),
}

const experimentalReducers = {}
experimentalReducers['add'] = (payload) => {
    const newState = { count: 0 }
    newState.count = payload.count + 1
    return newState
}

experimentalReducers['sub'] = (payload) => {
    const newState = { count: 0 }
    newState.count = payload.count - 1
    return newState
}

console.log("experimentalReducers")
for (const x in experimentalReducers)
    console.log(x)

console.log("myReducers")
for (const x in myReducers)
    console.log(x)

PS: I expect to plug “experimentalReducers” into the function and have the function run just as it does with “myReducers”.

In Odoo 17 I want to create a https://[ip|domain]/path/[hashed-id-of-subsheet].csv url link which will download a specific subsheet of the Odoo Sheets. We will give this URL to some suppliers which will contain specific data from our system

I need to add an option in Odoo Sheet “File > Export > Create CSV link” which will bring a popup wizard & ask me what subsheet do I want to create a csv link for.

A public url link will be generated, anyone on the internet with that link can download the subsheet in a csv format.

Next time I open the same wizard it should show me all the links generated. I can have multiple links per subsheet, and should be able to delete the links as well. So this way I can give different URLs to different suppliers for same subsheet, and delete the links later on if I want to stop access for a supplier.

This spreadsheet is on the document module, I am unable to get any relevant search result to achieve this

also I don’t want to give partner any portal access, I want to send the downloadable link

In Odoo 17 I want to create a https://[ip|domain]/path/[hashed-id-of-subsheet].csv url link which will download a specific subsheet of the Odoo Sheets. We will give this URL to some suppliers which will contain specific data from our system

I need to add an option in Odoo Sheet “File > Export > Create CSV link” which will bring a popup wizard & ask me what subsheet do I want to create a csv link for.

A public url link will be generated, anyone on the internet with that link can download the subsheet in a csv format.

Next time I open the same wizard it should show me all the links generated. I can have multiple links per subsheet, and should be able to delete the links as well. So this way I can give different URLs to different suppliers for same subsheet, and delete the links later on if I want to stop access for a supplier.

Be aware that we can have multiple subsheets across different sheets with same name, so store the links against subsheet IDs. So this way in the future if the subsheet name is also changed then too the link will be valid + if a subsheet is deleted then the link(s) should also get deleted.

This ability to generate public link url should be accessible only via a specific access group, to prevent misuse of internal data.

This spreadsheet is on the document module, I am unable to get any relevant search result to achieve this

I’m using Tone.js in my project to analyse my uploaded audio file where I have played a music piece. With that analysis I want to show a question about audio that is connect to the music theory. When the user answers the question it shows if you have answered right or wrong and explanation.

With some audio files it gives the right explanation, but by some it gives wrong eventhough I know I have answered correctly. Can someone help me?

Here is a code snipped from a function

async function analyzeAudio() {
const fileInput = document.getElementById("audioUpload").files[0];
if (!fileInput) {
    alert(currentLanguage === "en" ? "Upload an audio file!" : "Upload een audio-bestand!");
    return;
}

//Upload audio file from your files
const audioPlayer = document.getElementById("audioPlayer");
audioPlayer.src = URL.createObjectURL(fileInput);
audioPlayer.style.display = "block";
audioPlayer.load();

//Read and analyze the uploaded audio
const reader = new FileReader();
reader.readAsArrayBuffer(fileInput);
reader.onload = async () => {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    audioBuffer = await audioContext.decodeAudioData(reader.result);

    const offlineContext = new OfflineAudioContext(1, audioBuffer.length, audioBuffer.sampleRate);
    const source = offlineContext.createBufferSource();
    source.buffer = audioBuffer;

    const analyser = offlineContext.createAnalyser();
    analyser.fftSize = 2048;
    const dataArray = new Uint8Array(analyser.frequencyBinCount);

    // console.log(dataArray)

    source.connect(analyser);
    analyser.connect(offlineContext.destination);
    source.start();

    await offlineContext.startRendering();

    analyser.getByteFrequencyData(dataArray);
    generateQuestion(dataArray);
};

}

Edit:
Here is a snipped for when analyzing the scale of my uploaded audio

function analyzeScale(dataArray) {
let oddHarmonics = 0, evenHarmonics = 0;

for (let i = 1; i < dataArray.length; i += 2) {
    oddHarmonics += dataArray[i];
}
for (let i = 2; i < dataArray.length; i += 2) {
    evenHarmonics += dataArray[i];
}

if (oddHarmonics > evenHarmonics) {
    correctAnswer = "minor";
    explanation = "This music contains relatively many odd harmonics, which suggests a minor scale with a darker sound.";
} else {
    correctAnswer = "major";
    explanation = "This music contains relatively many even harmonics, which is characteristic of a major scale with a brighter sound.";
}

document.getElementById("question").innerText = "Is this music in a major or minor key?";

}

And answer check

function checkAnswer() {
const userAnswer = document.getElementById("answer").value.toLowerCase();
const feedback = document.getElementById("feedback");

if (userAnswer === correctAnswer) {
    feedback.innerHTML = `Correct! ${explanation}`;
    questionIndex++; // Move to the next question
    setTimeout(askNextQuestion, 3000);
} else {
    feedback.innerHTML = `Incorrect. ${explanation} Try again!`;
}

}

After I upload my audio, on the page it shows the question: Is this music in a major or minor key?

For example I answer minor key and get it right. I will get the explanation: This music contains relatively many odd harmonics, which suggests a minor scale with a darker sound.

But with another audio which I know is also played in minor key and answer it. I somehow get that I have answered wrong eventhough I now for sure it’s right

I’ve modal and copy it from another modal which has been removed because of no need.
The problem is that Modal popup not showing after copy / paste from the parent Modal.

        <div class="modal fade" id="modalRegistrationForm" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                        <label style="color:black">&nbsp; &nbsp;<i class="bi bi-book">&nbsp; &nbsp; &nbsp; &nbsp;</i>Nadeem Learning Center - Online 
                        </label>
                    </h1>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="hideRegModal()"><span aria-hidden="true">&times;</span>
                     </button>
                </div>
                <div style="font-size:10px; color:black">
                    <center><br>
                     <h4><i class="fa fa-user-o" aria-hidden="true"  style="color:green"></i> Sign Up </h4>
                     <i class="fa fa-school"></i>
                     <i class="fa-solid fa-person-chalkboard"></i>
                    </center>
                </div>
                <div class="man">
                    <div class="form-group">
                        <span class="fa fa-user form-control-icon"></span>
                        <input type="name" class="form-control validate" placeholder="Name" id="reg_name">
                        <span style="color:red" id="name-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-envelope form-control-icon"></span>
                        <input type="email" class="form-control validate" placeholder="Email" id="reg_email">
                        <span style="color:red" id="email-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-lock form-control-icon"></span>
                        <input type="password" class="form-control validate" placeholder="password" id="reg_pass">
                        <span style="color:red" id="password-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-phone form-control-icon"></span>
                        <input type="phone" class="form-control validate" placeholder="phone" id="reg_phone" onkeypress='validate(event)'>
                        <span style="color:red" id="phone-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-check form-control-icon"></span>
                        <button type="button" class="btn btn-success form-control" onclick="validateRegForm();">SignUp</button>
                    </div>
                    <div style="font-size:12px; color:black">
                        <center><label> By clicking Sign Up, you agree to our 
                                <a data-target="#termscondition" data-toggle="modal" href="javascript:justLoadMe2()">Terms and Condition </a> 
                                and <a data-target="#staticBackdrop2" data-toggle="modal" href="javascript:justLoadMe3()"> Privacy Policy.</a>
                            </label>
                        </center>
                    </div>
                    <div class="form-group">
                        <span style="color:red" id="save_status" class="error-message"></span>
                    </div>
                </div>
            <div>
        </div>
    </div>

I am using like this to show up the modal.

function RegistrationForm(){
        alert("is showing up");
        modal_var = document.getElementsByClassName('modal')[3];
        modal_var.removeAttribute('style');
        modal_var.removeAttribute('aria-hidden');
        modal_var.classList.add('show');
        modal_var.setAttribute('style', 'display: block');
        modal_var.setAttribute('aria-modal', 'true');
        modal_var.setAttribute('role', 'dialog');
    }

alert is showing up but no modal.
How to find the exact number of modal by ClassName?

Code Updated

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Nadeem Learning Center - Online</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <!-- Favicons -->
    <link href="favicon.png" rel="icon">
    <!-- Google 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=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Cardo:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <!-- Vendor CSS Files -->
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
    <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="assets/vendor/aos/aos.css" rel="stylesheet">
    <!-- Template Main CSS File -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link id="bootstrap-css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet" href="font/css/font-awesome.min.css">
    <link href="assets/css/main.css" rel="stylesheet">
    
    <style>
        div.modal-content {
            top: 10px;
            background: #9fafff;
        }

        div.modal-dialog{
            overflow-y: initial !important
        }

        div.modal-content_1 {
            top: 100px;
            background-image: url("Modal_BG.jpg");
        }

        .man {
            width: 80%;
            margin: 50px auto;
        }

        .form-group .form-control {
            padding-left: 2.375rem;
        }

        .form-group .form-control-icon {
            position: absolute;
            z-index: 2;
            display: block;
            width: 2.375rem;
            height: 2.375rem;
            line-height: 2.375rem;
            text-align: center;
            pointer-events: none;
            color: #aaa;
        }
    </style>
</head>

<body onload="myfunction();">
    <!-- ======= Header ======= -->
    <header id="header" class="header d-flex align-items-center fixed-top">
        <div class="container-fluid d-flex align-items-center justify-content-between">
            <a href="index.php" class="logo d-flex align-items-center  me-auto me-lg-0">
                <i class="bi bi-book"></i>
                <img src="images/logo.jpg">
            </a>

            <nav id="navbar" class="navbar">
                <ul>
                    <li> <a href="javascript:RegistrationForm();"> <i class="bi bi-patch-check" style="font-size:26px; color:orange"></i>&nbsp; Learning</a></li>   
                    <li> <a href="javascript:RegistrationForm();"><i class="bi bi-pencil-square" style="font-size:26px; color:orange"></i>&nbsp; Teaching</a></li>
                </ul>
            </nav>

            <!-- ################   navbar ################# -->
            <div class="header-social-links ">
                <!--<button type="button" class="btn btn-dark btn-sm"><i class="bi bi-door-open"></i>&nbsp; LogIn</button>-->
                <!-- <button type="button" name="login" class="btn btn-dark btn-sm" onclick="logmein()"> <i class="bi bi-door-open"></i>&nbsp; Sign In </button> -->
            </div>
                <i class="mobile-nav-toggle mobile-nav-show bi bi-list"></i>
                <i class="mobile-nav-toggle mobile-nav-hide d-none bi bi-x"></i>
        </div>
    </header>   <!-- End Header -->

    <!--#################### Set Cookie Model for new User  [0] -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom-color: #1c0f21;">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                    <label><i class="bi bi-book">&nbsp;</i>&nbsp;Nadeem Learning Center - Online </label>
                    </h1>
                </div>
                
                <div class="modal-body">
                    <p style="text-align:center"> <label style="color:black; font-size:24px"><i class="bi bi-cookie"></i>&nbsp; Respect Your Privacy </label></p>
                    <p style="text-align:center"> <label style="color:black">This website uses cookies for improving the user experience.</label></p>
                    <!-- Modal Form-->
                     <form action="javascript:void(0);" method="post">
                        <div class="mb-3">
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="agree_Check" disabled="disabled" checked="checked" style="display:none">
                            <label class="form-check-label" for="exampleCheck1" style="display:none">I agreed <b>"to the terms and conditions"</b></label>
                        </div> &nbsp; &nbsp; &nbsp;
                        <div class="modal-footer" style="border-bottom-color: #1c0f21;">
                            <p style="text-align:center">
                                <button type="button" class="btn btn_custom" onclick="hideModal()" onmousedown="clr_chng()">
                                    <i class="bi bi-check"></i>Accept
                                </button> &nbsp; &nbsp; 
                                <a data-target="#staticBackdrop2" data-toggle="modal" href="javascript:readMore()">
                                    <p style="text-align:center"><i class="fa fa-book" style="color:blue"></i> Read More</p>
                                </a>
                                <button type="button" class="btn btn_custom" onclick="hideModal()"><i class="bi bi-cross"></i>Cancel</button>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
       </div>
    </div>

    <!-- #################### Privacy Policy  [1] -->
    <div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                    <label style="color:black">&nbsp; &nbsp;<i class="bi bi-book">&nbsp; &nbsp; &nbsp; &nbsp;</i>Nadeem Learning Center - Online </label>
                    </h1>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="Thanks()"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <p style="text-align:center"> 
                    <label style="color:black; font-size:24px"><i class="bi bi-clipboard-check"></i>&nbsp; Privacy Policy </label></p>
                    <form action="javascript:void(0);" method="post">
                        <div class="mb-3">
                            
                        </div>
                        <div class="modal-footer" style="border-bottom-color: #1c0f21;">
                            <button type="button" class="btn btn_custom" onclick="Thanks()"><i class="bi bi-arrow-left-circle"></i>&nbsp;Go Back</button>
                            <a data-target="#termscondition" data-toggle="modal" href="javascript:termsCondition()">
                                <p><i class="bi bi-clipboard-data">&nbsp;</i>Terms and Condition. </p>
                            </a> 
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- #################### Terms & Conditions    [2] -->
    <div class="modal fade" id="termscondition" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom-color: #1c0f21;">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel"> <label><i class="bi bi-book">&nbsp;</i>&nbsp;Nadeem Learning Center - Online </label>
                    </h1> 
                </div>
            <div class="modal-body">
                <p style="text-align:center"> <label style="color:black; font-size:24px"><i class="bi bi-clipboard-check"></i>&nbsp; Terms & Conditions </label></p>
                <!-- Modal Form style="color:blue;text-align:center;" -->
                <form action="javascript:void(0);" method="post">
                    <div class="mb-3"> 
                        
                    </div>
                    <div class="modal-footer" style="border-bottom-color: #1c0f21;">
                        <button type="button" class="btn btn_custom" onclick="chupaChoro()"><i class="bi bi-cross"></i>&nbsp;Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- #################### Registration ###############  [3] -->
    <div class="modal fade" id="modalRegistrationForm" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header text-center">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">
                        <label style="color:black">&nbsp; &nbsp;<i class="bi bi-book">&nbsp; &nbsp; &nbsp; &nbsp;</i>Nadeem Learning Center - Online 
                        </label>
                    </h1>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="hideRegModal()"><span aria-hidden="true">&times;</span>
                     </button>
                </div>
                <div style="font-size:10px; color:black">
                    <center><br>
                     <h4><i class="fa fa-user-o" aria-hidden="true"  style="color:green"></i> Sign Up </h4>
                     <i class="fa fa-school"></i>
                     <i class="fa-solid fa-person-chalkboard"></i>
                    </center>
                </div>
                <div class="man">
                    <div class="form-group">
                        <span class="fa fa-user form-control-icon"></span>
                        <input type="name" class="form-control validate" placeholder="Name" id="reg_name">
                        <span style="color:red" id="name-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-envelope form-control-icon"></span>
                        <input type="email" class="form-control validate" placeholder="Email" id="reg_email">
                        <span style="color:red" id="email-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-lock form-control-icon"></span>
                        <input type="password" class="form-control validate" placeholder="password" id="reg_pass">
                        <span style="color:red" id="password-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-phone form-control-icon"></span>
                        <input type="phone" class="form-control validate" placeholder="phone" id="reg_phone" onkeypress='validate(event)'>
                        <span style="color:red" id="phone-error" class="error-message"></span>
                    </div>
                    <div class="form-group">
                        <span class="fa fa-check form-control-icon"></span>
                        <button type="button" class="btn btn-success form-control" onclick="validateRegForm();">SignUp</button>
                    </div>
                    <div style="font-size:12px; color:black">
                        <center><label> By clicking Sign Up, you agree to our 
                                <a data-target="#termscondition" data-toggle="modal" href="javascript:justLoadMe2()">Terms and Condition </a> 
                                and <a data-target="#staticBackdrop2" data-toggle="modal" href="javascript:justLoadMe3()"> Privacy Policy.</a>
                            </label>
                        </center>
                    </div>
                    <div class="form-group">
                        <span style="color:red" id="save_status" class="error-message"></span>
                    </div>
                </div>
            <div>
        </div>
    </div>
<!--    THis one is extra. After removing the whole design not work -->
</div></div></div>





<!--#################   -->
<section id="hero" class="hero" data-aos="fade" data-aos-delay="1500">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 text-center">
                <h2 style="font-size:36px; color:red"><br><br>Resource <span>for Learners</span> </h2>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="wrap">
                <div class="search">
                    <input type="text" class="searchTerm glowing-border" placeholder="What are you looking for?">
                    <button type="submit" class="searchButton glowing-border">
                    <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>
        </div>
        <br>
    </div>
</section>

<main id="main" data-aos="fade" data-aos-delay="1500">
    <section id="gallery" class="gallery">
        <div class="container-fluid">
            <div class="row gy-4 justify-content-center">
                <?php
                 while ($row = $result->fetch_assoc()) 
                 {
                    echo '<div class="col-xl-3 col-lg-4 col-md-6">';
                    echo '<div class="gallery-item h-100">';
                    echo '<img src="' . $row['url_src'] . '" class="img-fluid" alt="404 Not Found">';
                    echo '<div class="gallery-links d-flex align-items-center justify-content-center">';
                    // #OLD CODE 29-May-2025# echo '<a href="'. $row['url_video'] . '" title="Education" class="glightbox preview-link" data-glightbox="title: <h5>'.$row['Description'].'</h5>; description: <p>'.$row['descriptionLong'].' <br><br> <a href='.$row['url_tar'].'>Read more...</p></a><br><br> '.$row['Para1'].' <br><br> '.$row['Para2'].'</p>; descPosition: right;"> <i class="bi bi-arrows-angle-expand"> </i></a>';
                    echo '<a href="'. $row['url_video'] . '" title="Education" class="glightbox preview-link" data-glightbox="title: <h5>'.$row['Description'].'</h5>; description: <p>'.$row['descriptionLong'].' <br><br> <a target='."_blank".' href='."mailto:[email protected]".'>[email protected]...</p></a><br><br> '.$row['Para1'].' <br><br> '.$row['Para2'].'</p>; descPosition: right;"> <i class="bi bi-arrows-angle-expand"> </i></a>';
                    echo '<a href=# onclick="javascript:loadpage(id)" id="'. $row['Name'] . '" class="details-link" ><i class="bi bi-link-45deg"></i></a>';
                echo '</div>';
            echo '</div>';
        echo '</div>';
      }
    ?>     
</main> 

<footer id="footer" class="footer">
    <div class="container">
        <div class="copyright">
            
            <br>
            <span style="color:white;">The Nadeem Learning Center - ONLINE is not responsible for the content of external sites. 
                 Read about our approach to <a>external linking.</a></span>
                 <div class="header-social-links ">
                    <a href="#" class="twitter"><i class="bi bi-twitter-x"></i></a>
                    <a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
                    <a href="#" class="instagram"><i class="bi bi-instagram"></i></a> 
                    <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></i></a>
                    <a href="#" class="youtube"><i class="bi bi-youtube"></i></i></a>
                </div>
        </div>
        <div class="credits">
            A Project of <a href="#" onMouseOver="this.style.color='white'" onMouseOut="this.style.color='green'">Learning & Teaching.</a> 
            <br>
            <a href="mailto: [email protected]" onMouseOver="this.style.color='white'" onMouseOut="this.style.color='green'">[email protected]</a>
        </div>
    </div>
</footer>
<!-- End Footer -->

<a href="#" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<div id="preloader">
    <div class="line"></div>
</div>

<!-- Vendor JS Files -->
 <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
 <script src="assets/vendor/php-email-form/validate.js"></script>
 <!-- Template Main JS File -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <!--<script src="assets/js/program.js"></script>
 <script type="text/javascript" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/js/bundles/4.20.0/compiled.min.js"></script>-->
 <script type="text/javascript" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/js/dist/search-v4/search.min.js"></script>
 <!--<script src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/docs-app/js/dist/main.min.js"></script>-->



<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event){
        });
</script>

<script type="text/javascript"> 
    function loadpage(a){
        document.location.href = '/I_detail.php?p_id=' + encodeURIComponent(a);
    }

    

    function myfunction(){
        //################------------Set or Retrieve Cookie Message------################----document load function------######
    }


    function hideModal(){
        //###############-----------Used to hide the Cookie Modal---------
                modal_var = document.getElementsByClassName('modal')[0];
                modal_var.removeAttribute("style");
                modal_var.removeAttribute("aria-modal");
                modal_var.removeAttribute("role");
                modal_var.classList.remove("show");
                modal_var.setAttribute("style", "display: none");
                modal_var.setAttribute("aria-hidden", "true");
            }
        console.log('hide MOdel Message');
    }


    function RegistrationForm(){
        alert("is showing up");
        
        modal_var = document.getElementById("modalRegistrationForm");
        modal_var.removeAttribute('style');
        modal_var.removeAttribute('aria-hidden');
        modal_var.classList.add('show');
        modal_var.setAttribute('style', 'display: block');
        modal_var.setAttribute('aria-modal', 'true');
        modal_var.setAttribute('role', 'dialog');
    }


    function readMore(){
        //#############-----1. Close the Modal[0] , ######--2. Open the modal Privacy Policy [1]
        hideModal();
        modal_var = document.getElementsByClassName('modal')[1];
        modal_var.removeAttribute('style');
        modal_var.removeAttribute('aria-hidden');
        modal_var.classList.add('show');
        modal_var.setAttribute('style', 'display: block');
        modal_var.setAttribute('aria-modal', 'true');
        modal_var.setAttribute('role', 'dialog');
    }

    function Thanks() {
        // #############----- close the modal[1] privacy modal 
        modal_var = document.getElementsByClassName('modal')[1];
        modal_var.removeAttribute("style");
        modal_var.removeAttribute("aria-modal");
        modal_var.removeAttribute("role");
        modal_var.classList.remove("show");
        modal_var.setAttribute("style", "display: none");
        modal_var.setAttribute("aria-hidden", "true");
    }

    function Thanks2() {
        // #############----- close the modal[2] Terms and Condition 
        modal_var = document.getElementsByClassName('modal')[2];
        modal_var.removeAttribute("style");
        modal_var.removeAttribute("aria-modal");
        modal_var.removeAttribute("role");
        modal_var.classList.remove("show");
        modal_var.setAttribute("style", "display: none");
        modal_var.setAttribute("aria-hidden", "true");
        hideModal();
    }

    function chupaChoro(){
        // #############----- close the modal[2] Terms and Condition
        modal_var = document.getElementById('termscondition');
        modal_var.removeAttribute('style');
        modal_var.removeAttribute('aria-hidden');
        modal_var.classList.add('show');
        modal_var.setAttribute('style', 'display: none');
        modal_var.setAttribute('aria-modal', 'true');
        modal_var.setAttribute('role', 'dialog');
    }

    function termsCondition(){
        Thanks();
        modal_var = document.getElementById('termscondition');
        modal_var.removeAttribute('style');
        modal_var.removeAttribute('aria-hidden');
        modal_var.classList.add('show');
        modal_var.setAttribute('style', 'display: block');
        modal_var.setAttribute('aria-modal', 'true');
        modal_var.setAttribute('role', 'dialog');
    }

    
    function hideRegModal(){
        modal_var = document.getElementsByClassName('modal')[3];
        modal_var.removeAttribute("style");
        modal_var.removeAttribute("aria-modal");
        modal_var.removeAttribute("role");
        modal_var.classList.remove("show");
        modal_var.setAttribute("style", "display: none");
        modal_var.setAttribute("aria-hidden", "true");
    }


</script>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="assets/js/main.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>