Category: javascript

how can I make this navbar responsive for both medium and small screen, keep getting results that are not okay. below is the html code and CSS code written so far

html

     `   <ul class="menu-left">
                <li class="menu-item"><a href="#">Product <img src="images/icon-arrow-light.svg"   alt=""></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Overview</a></li>
                      <li><a href="#">Pricing</a></li>
                      <li><a href="#">Marketplace</a></li>
                      <li><a href="#">Features</a></li>
                      <li><a href="#">Integrations</a></li>
                    </ul>
                </li>
        
               <li class="menu-item"><a href="#">Company <img src="images/icon-arrow-light.svg" alt=""></a>
                    <ul class="dropdown-menu ">
                      <li><a href="#">About</a></li>
                      <li><a href="#">Team</a></li>
                      <li><a href="#">Blog</a></li>
                      <li><a href="#">Careers</a></li>
                    </ul>
                </li>
        
                <li class="menu-item"><a href="#">Connect<img src="images/icon-arrow-light.svg" alt=""></a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Contact</a></li>
                      <li><a href="#">Newsletter</a></li>
                      <li><a href="#">LinkedIn</a></li>
                    </ul>
                </li> 
          </ul>`
          `<ul class="menu-right">
            <li><a href="#">Login</a></li>
            <li><a href="#" class="btn-color">Sign Up</a></li>
          </ul>`
          <button class="toggle-btn"><img src="images/icon-hamburger.svg" alt=""></button>
          <button class="toggle-btn"><img src="images/icon-close.svg" alt=""></button>
    </div>
  </nav>

CSS
`nav{
    background: black;
    height: 5rem;
    width: 100%;
    display: grid;
    place-items: center;
    
}

 .nav_container{
    display: flex;
    align-items: center;
    position: relative;
} 


.menu-left {
    display: flex;
    align-items: center;
    margin-left: 4rem;
    gap: 6rem;
    position: relative;
     
}


 .menu-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 3rem;
} 
menu-item .dropdown-menu {
    /* display: flex;
    flex-direction: column;  */
    gap: 0.5rem;
    position: absolute;
    margin-top: 2rem;
    background: var(--White);
   width: 200px;
    border-radius:0.5rem ;
    display: none;
   
   
} 

.dropdown-menu li a{
    color: var(--Very-dark-blue);
    
} 

The title pretty much says it all.

I am looking to improve performance in our blazor app which does a lot of JS interoping to JS code for making use of THREE.js API. I understand that the calls have some overhead so I thought I would reduce their amount. Though by reducing the amount of calls and bundling more into fewer ones, I increase the amount of data I need to pass per call from C# -> JS which may also affect performance?

I don’t really like having a lot of parameters per call, and I realized that the amount is limited to something around 5-7? At least for unmarshalled I believe. I did try creating a record in C# and populating it with my parameter values and just sending an object, but that has some performance issues in itself I believe, as this object needs to be serialized and serialized too (of course). All parameters are probably serialized, but it felt like the object had more performance cons than it had code readability pros…

We are using blazor wasm, so I aim to only use IJSInRuntime whenever I can to always call functions synchronously to furthermore reduce overhead.

So my question is, what is better, a lot of small calls or fewer ones but larger amounts of data (and parameters) per call?

Currently we have some home-made functionality giving us an API which uses Unmarshalled JS interop to send objects as key valuepairs to JS and they are stored in JS until we with separate marshalled calls, use them (using the key). This seems to be a good way, though I would even more prefer perhaps to have this separate “moving of data” integrated into the Function calls themselves rather than having to first “move data” -> get key -> call function with key -> function gets the data using key + parameters and runs. I have a minimum of three calls 4 Interop calls per JS function which need these data, as I need to create the “store” for the Data, 1 call, add data to the store using Unmarshalled functions, 1 call, call the marshalled function that uses the data, 1 call and finally, dispose of the data stored in JS, 1 call.

Suggestions on how to improve this? As mentioned, I have tried to bundle more things into larger calls to reduce the amount of roundtrips. Personally I feel JS -> C# has the most overhead or notable “lag”, anyone else noticed this?

BTW we are still on .NET 6 so I cannot use the new JSImport/Export functionality yet. Soon though…

I migrated my React app to a Vite project.
I have a video that used to start immediately before using Vite.
Now, it takes at least 10 seconds after the page has finished loading before it starts.

<video
     autoPlay
     playsInline
     muted
     loop
     controls={false}
     poster="./test.jpg"
     >
     <source src={videoLogo} type="video/mp4" />
     Your browser does not support the video tag
</video>

This is the vite.config.mts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
// import svgLoader from "vite-svg-loader";
import dns from "dns";
// localhost part
dns.setDefaultResultOrder("verbatim");
export default defineConfig({
  base: "/",

  server: {
    open: true,
    port: 3000,
  },
  define: {
    "process.env": {},
    global: "globalThis",
  },
  build: {
    outDir: "build",
  },
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
    svgr(),

  ],
  resolve: {
    alias: {
      // Configura gli alias se necessario
    },
    extensions: [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"],
  },
});

The version of Vite is v5.0.10.
The version of React is v17.0.1.

Is there a way to load my video before the page is fully loaded?
I would like the video to start automatically as soon as the page is rendered.
Is there something I missed?
Is there a correct setup or a plugin for Vite that can help with this?
Thanks

I’m at a beginner/intermediate level when it comes to javascript.

As the title implies I’m trying to program a responsive website using swiper.js. The problem is that I find the native breakpoints parameter lacking.

The core problem is that a smartphone in landscape is wider than a tablet in portrait.

I would like to be able to show:

2 rows of slides on a smartphone oriented in portrait. 2 slides per view on a smartphone oriented in landscape. 3 rows and 2 slides per view on a table oriented in portrait. 2 rows and 3 slides per view on a tablet oriented in landscape. 2 rows and 4 slides per view on a desktop oriented in landscape

I’ve tried a bunch of different approaches using the native functions of swiper.js, but I haven’t been able to achieve the responsiveness that I’m looking for. Any help would be very appreciated, especially examples of code.

Thanks in advance / Mikael

i am currently learning about Mern stack (sending request from frontend to backend) and a thought occur to me , what would happen if multiple users is sending request at the exact same time to backend to fetch data, what will happen then? is there any industry standard to deal with this problem ? the code is normally how i typically get request just for context, or is there any resources about this issue i can do more research on?

*Frontend* 
const fetchData = async () => {
  try {
    // Define the API endpoint URL
    const apiUrl = 'http://localhost:5000/api/data';

    // Make a GET request using the native fetch API
    const response = await fetch(apiUrl);

    // Check if the response status is OK (200)
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    // Parse the response as JSON
    const responseData = await response.json();

    // Access the data from the response
    console.log('Data from API:', responseData);
  } catch (error) {
    console.error('Error fetching data:', error.message);
  }
};

// Call the fetchData function
fetchData();

*backend*
const express = require('express');
const app = express();
const port = 5000;

// Sample data
const responseData = { message: 'Hello from the backend!' };

// API endpoint for fetching data
app.get('/api/data', (req, res) => {
  res.json(responseData);
});

// Start the server
app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

I’m trying to log into outlook.com using Puppeteer.

This is my code so far.

const puppeteer = require('puppeteer');


(async () => {

    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: false,
    });
    const page = await browser.newPage();

    await page.goto('https://www.outlook.com/');
    await page.click("a.btn.btn-outlook");

   // await page.waitForSelector("#i0116");
   await page.waitForTimeout(5000);
    
   
    await page.type("#i0116","email");

    

    //await browser.close();
})();

Puppeteer can’t find the input field through the ID.

Heres what Im trying to do. I have two fillable form tabs. I want the data from those tabs to populate into a master log on another tab on the same sheet. This master log would be added to every day and every time a new fillable form is filled out it would still save the data from any previous time and just move the data down a row. The fillable form tabs would be deleted at the end of every day. Sometime the fillable form tabs will be duplicated if someone needed to use more than one form and I would want the data to pull from the duplicated tabs.

Heres what Ive tried that worked:
macros for query- pulling data from one fillable form to the master log
macros for copy and paste- this macro added a row underneath the queried date, copied the query data and pasted the data into the newly created row
macros for deleting data; this macro then deleted the info on the fillable form

Issues:
How to have the data populate into different rows if more than one fillable form is used (also tried using if/then here)
How to have the data populate if a fillable form was duplicated
Both fillable forms are not used every single time
How to save the date in the master log, then delete the date from the source fillable form

Heres what Ive tried (perhaps incorrectly) that did NOT work
getActivesheet
importrange
query
vlookup
if/then, true/false

I have uploaded a node JS application into my cpanel, checked that everything is working in my putty terminal and that the application is running on port 3000 indeed, yet i am not able to make any requests to that port with the server’s domain.
When I am trying to test it from the terminal with curl command it works and shows the application is locally running on the server.

What could be the issue?

I tried to send requests to the serverdomain:3000 / serverIPAddres:3000, nothing is working and I am not getting any response or any server logs, meaning that the request does not even arriving anywhere…

also on Postman there is no any kind of response, its just loading the request until it stops without any response.

What am i missing? in my whm i am using imunify360 and I have also tried to add the port with my computer public IP address in the whitelist but it still does not work.

I try to use AJAX to upload images from my website to the server.
It works very good with fileupload control and progressbar but it could be very slow with biggest images.

        $("body").on("click", "#btnUpload", function () {
        
        var uploadedFiles = file.files; 
        var formData = new FormData();
        for (i = 0; i < uploadedFiles.length; i++) {
            formData.append(uploadedFiles[i].name, uploadFiles[i]);
        }

        $.ajax({
            url: 'UploadService.asmx/UploadFiles',
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (fileName) {
                $("#fileProgress").hide();
                $("#lblMessage").html("<b>" + fileName + "</b> has been uploaded.");
            },
            xhr: function () {
                var fileXhr = $.ajaxSettings.xhr();
                if (fileXhr.upload) {
                    $("progress").show();
                    fileXhr.upload.addEventListener("progress", function (e) {
                        if (e.lengthComputable) {
                            $("#fileProgress").attr({
                                value: e.loaded,
                                max: e.total
                            });
                            $("#stat").value = e.loaded;
                        }
                    }, false);
                }
                return fileXhr;
            }
        });
    });

So, I create images with new size and display them in my form.

            document.getElementById('photos').innerHTML = "";
        var uploadedFiles = file.files;
        var formData = new FormData();
        for (i = 0; i < uploadedFiles.length; i++) {
            formData.append(uploadedFiles[i].name, uploadedFiles[i]);

            const img = document.createElement('img');
            const selectedImage = file.files[i];
            const objectURL = URL.createObjectURL(selectedImage);
            img.onload = function handleLoad() {
                console.log(objectURL + `,Width: ${img.width}, Height: ${img.height}`);
                if (img.width > 300 || img.height > 300) {
                    if (img.width > img.height) {
                        img.height = img.height / (img.width / 300)
                        img.width = 300
                    } else {
                        img.width = img.width / (img.height / 300)
                        img.height = 300
                    }
                }
                URL.revokeObjectURL(objectURL);
            };
            img.id = "photo-" + i;
            img.src = objectURL;
            document.getElementById("photos").appendChild(img);
        }

Now, I would like to send new images with ajax but I don’t know how to replace the original names and location from fileUpload control (formData.append(uploadedFiles[i].name, uploadFiles[i]);) with the new ones(images created dynamically).

Thank you very much

I have a given date as Date-object in JavaScript.

From that particular date (e.g. 2024-16-01, 22:35), I want to go to the beginning of the day (2024-16-01, 00:00) and the end of the day (2024-16-01, 23:59).

I tried the library date-fns, but this gives wrong values.

import { addDays, addHours, endOfDay, startOfDay, subHours } from 'date-fns';

// d = new Date(...)
const startDate = subHours(startOfDay(d), hoursBefore);
const endDate = addHours(endOfDay(d), hoursAfter);

console.log('Date: ', d);
console.log('Start Of Day: ', startOfDay(d));
console.log('End Of Day: ', endOfDay(d));
console.log('startDate: ', startDate);
console.log('endDate: ', endDate);

Output:

Date:  2024-01-16T17:00:00.000Z
Start Of Day:  2024-01-16T17:00:00.000Z
End Of Day:  2024-01-17T16:59:59.999Z
startDate:  2024-01-16T05:00:00.000Z
endDate:  2024-01-17T21:59:59.999Z

As one can see, the values are totally different from what they actually should be. Is the timezone playing a disturbing role here? If so, how can I mitigate such risks of getting wrong values?

Or is there another approach how to deal with that?

i know “1988-01-08T15:02:04.000Z” is for UTC timezone.

How about “1988-01-08T15:02:04.000” ?
sorry i did search but just cannot find the exact lines in docs, Thx !

I am currently working on a project where I use Bootstrap modals to display dynamic content fetched via XMLHttpRequest (XHR). The modal is opened successfully, and the XHR request is initiated. However, I am facing an issue when trying to gracefully stop the XHR request when the Bootstrap modal is closed.

        if (response.value === "1") {


        } else if (response.value === "2") {


        } else if (response.value === "3") {
            var modal = new bootstrap.Modal(document.getElementById('exampleModal'));

            modal._element.addEventListener('shown.bs.modal', function() {

            });

            modal._element.addEventListener('hidden.bs.modal', function() {

                stopRequest(); // Stop the XMLHttpRequest when the modal is closed
            });

            modal.show();
            var qId = '86868';
            var xhr; // Declare xhr globally

            function sendRequest() {
                xhr = new XMLHttpRequest(); // Assign xhr globally
                var url = "fetch_status.php?qId=" + qId;

                xhr.open("GET", url, true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            var responseData = JSON.parse(xhr.responseText);
                            if (responseData.status === "success") {

                                window.location.href = "redirect_page.php";

                            } else {
                                setTimeout(sendRequest, 5000);
                            }
                        } else {
                            console.error("Error:", xhr.status);
                        }
                    }
                };

                // Send the request
                xhr.send();
            }

            function stopRequest() {
                if (xhr) {
                    // Check if the request is still in progress before aborting
                    if (xhr.readyState !== XMLHttpRequest.DONE) {
                        xhr.abort();
                        console.log("XHR aborted");
                    }
                }
            }
            sendRequest();
        } else {
            // Handle other cases or show an error message

        }

I have a modal that opens successfully, and I initiate an XHR request to fetch data. I am using the Bootstrap framework for the modal. I have implemented an event listener for the modal’s ‘hidden.bs.modal’ event to call a function (stopRequest) that should abort the XHR if it’s still in progress.

Specific Issues:
The modal is displaying as expected.
XHR requests are being sent successfully.
The ‘hidden.bs.modal’ event is triggering the stopRequest function.
However, the XHR doesn’t seem to be reliably aborting, leading to potential issues.

Request for Assistance:
I am seeking guidance on how to properly handle the abortion of an ongoing XMLHttpRequest when a Bootstrap modal is closed. Any insights, suggestions, or corrections to my current approach would be greatly appreciated.

As per the title, how would I check the safari/chrome browser used by an iphone/ios user is in lock down mode?

I’ve got a web app which works fine, but recently when testing on ios 17.2 indexedDB doesn’t work, I cannot add files, it just crashes with no error message. so I assume its in lockdown mode. I did do a test on browserstack with the same ios version in safari and it worked without issue, any help would be appericated.

Resources I’ve looked at:

• https://forums.developer.apple.com/forums/thread/710176
• Swift code let isLockdownModeEnabled = (UserDefaults.standard.object(forKey: "LDMGlobalEnabled") as? Bool) ?? false however I cant access UserDefaults via javascript

I’m building a back-end for an app that uses socket.io and firebase to store messages and users. I need to use the user’s location to in order to check if the server should push back a message to the user. I’m having trouble deciding how to implement this.

socket.on('connection', socket => {
   let location = {
      latitude: 0.0,
      longitude: 0.0
   }

   socket.on('incoming_location', data => {
   // Saves to the location variables'
   })
   
   // onSnapshot logic from firebase to check for new messages then checks if message adheres to the location variable then emits back to socket.
})

or would something else be better?

I had angular 9 installed on my computer and I uninstalled it to install Angular 14, but when I install version 14, it still shows me version 9.

step 1: uninstall angular with npm uninstall -g @angular/cli

step 2: install angular 14 with npm install -g @angular/[email protected]

step 3: clean cache with npm cache clean –force

step 4: check version with ng –version but version 9 continues to appear

The other option I tried was using the ng update command but it gave me the following error