Category: javascript

I have the following code snippet to change the src of an img tag when I hover over it.

<img src="./Path/to/image.png" alt="" class="exhibit-banner-img" onmouseover="this.src='./Path/to/newimage.png'" onmouseout="this.src='./Path/to/image.png'">

It runs as expected, but how do I add a transition time to the image when the event is fired?
Right now, it changes instantly.

Im fetching a group of documents in a forEach from Firestore, I know im fetching this all as I can see documents and is fields in the console.

But when I add the id to the field fetched it only shows one document. (it should be 5 tiles and images but I can only see one)

From reading I know I only need to some how duplicate the HTML code based on the documents fetch in the collection but am struggling to do so.

Javascript code

const i = query(collection(db, "teams"));
const unsubscribe = onSnapshot(i, (querySnapshot) => {
            
     querySnapshot.forEach((doc) => {
          const docData = doc.data();

  document.getElementById("ageGroup").innerText = docData.ageGroup,
                document.getElementById("teamImage").src = docData.teamImage,
           
                
                console.log("Current data: ", docData);
                
            });

        });

HTML Code

<section class="teams">
            <article>
                <h1 class="team-names" id="ageGroup"></h1>
                <div class="team-line"></div>
                <img class="team-image" id="teamImage">

            </article>
</section>

How do I refactor this code using a for loop:

const [userA, userB, userC, userD] = await Promise.all([
    createTestUser(),
    createTestUser(),
    createTestUser(),
    createTestUser()
]);

Is they an email service provider that can enable one create about 10k valid email addresses at one go without having to that it independently.

I’m building an app using Electron with the purpose to notify a user by new orders from an E-commerce.

Basically, when some customer buy on the E-commerce, than it emits a notification to the store.

I am doing this with Websocket connection. The store log-in the API and then the API sends a socket event when a new order arrived.

On Windows 10, MacOS X and Linux it works as expected.

But when I test on Windows 8 and Windows 7, the app crashes in the first received notification.

I tried to run the project on Windows 8 with VSCode but it didn’t show any error. When I tried to debbug the crash with Visual Studio it drop an error

“Unhandled win32 exception”
and
“Access Violation reading location…”

I am not using the “Notification” class from Electron.

I created a Screen with the message and all the styling things which is hidden in the Tray. And when I receive a event from socket, I call

mainWindow.restore();
playSound();

The window isn’t restore and app crashes.

On Windows 8 I can see a message “The process stopped and a button ‘Exit program’ ” which terminates the process.

On Windows 7 it just crashes without any error.

Sorry about the missing details but everything is working unless this part of the program which fails maybe on restoring the window or maybe on receiving a event from socket, or maybe playing the sound.

Thanks in advance, I am new on javacript, but i am building an app for the company I work at to manage some documents.

I have a database when I have to store some docuemnst (I am using blob), I already was able to store the documents in MYSQL but now I need to donwload it.

I fetched the database I already have the Blob data in the frontend. There is any way to download that data to the client computer?

NB: The document type is not limited, so it can be any document.

I’m currently working on a website that requires me to load the image source of an tag from an external website via jQuery or PHP in order to embed that image on my page, is there any way to do this maybe by XPath?

I can not add registration to my database , I do not know why but I changed it to a free domain

Since I changed it to a live server and not a xamp server it doesn’t register but when it’s on a localhost server it works but cloud severs it doesn’t register but everything else works

<?php

include('config.php');

if(isset($_POST['submit'])){
    $u_card = $_POST['card_no'];
    $u_f_name = $_POST['user_first_name'];
    $u_l_name = $_POST['user_last_name'];
    $u_father = $_POST['user_father'];
    $u_aadhar = $_POST['user_aadhar'];
    $u_birthday = $_POST['user_dob'];
    $u_gender = $_POST['user_gender'];
    $u_email = $_POST['user_email'];
    $u_phone = $_POST['user_phone'];
    $u_state = $_POST['state'];
    $u_dist = $_POST['dist'];
    $u_village = $_POST['village'];
    $u_police = $_POST['police_station'];
    $u_pincode = $_POST['pincode'];
    $u_mother = $_POST['user_mother'];
    $u_family = $_POST['family'];
    $u_staff_id = $_POST['staff_id'];
    


    //image upload

    $msg = "";
    $image = $_FILES['image']['name'];
    $target = "upload_images/".basename($image);

    if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
        $msg = "Image uploaded successfully";
    }else{
        $msg = "Failed to upload image";
    }

    $insert_data = "INSERT INTO student_data(u_card, u_f_name, u_l_name, u_father, u_aadhar, u_birthday, u_gender, u_email, u_phone, u_state, u_dist, u_village, u_police, u_pincode, u_mother, u_family, staff_id,image,uploaded) VALUES ('$u_card','$u_f_name','$u_l_name','$u_father','$u_aadhar','$u_birthday','$u_gender','$u_email','$u_phone','$u_state','$u_dist','$u_village','$u_police','$u_pincode','$u_mother','$u_family','$u_staff_id','$image')";
    $run_data = mysqli_query($con,$insert_data);

    if($run_data){
          $added = true;
    }else{
        echo "Data not insert";
        
    }

}

?>

I’m trying to build an interactive map like this:

Basically, it will highlight the state when hover. I don’t know where to start, if anyone could show me a library to build a map like this would be extremely helpful.

setTimeout when it is 24 hours (86400000) or more.. it doesn’t work ,why?

          message.channel.send(`hello world`);
        }, 86400000);

Note: The bot works 24/7

How could I change text on the page from the backend using Velo by Wix? Is this possible? I want to do this since I want to display confidential information about the current user, and I don’t want to give the frontend access to a function that would return that info so I could do it from the frontend.
Thanks in advance!

how can I use the json object as a variable?
For example i want the age of sarah

function changeValue(jsonfile, object, value) {
  const filepath = './' + jsonfile + '.json';
  const data = JSON.parse(fs.readFileSync(filepath));
  data.object = value;
  fs.writeFileSync(filepath, JSON.stringify(object, null, 4));

  console.log(data);
}
changeValue('file.json', data.users.sarah.age, '30');
//ReferenceError: data is not defined

file.json

{
  "users": {
    "adam": {
      "age": "19",
      "gender": "male"
    },
    "sarah": {
      "age": "23",
      "gender": "female"
    },
  }
}

Thanks in advance

Hey Everyone and thank you for your time. I have a problem to submit a form in JS. Obviously my form has the value “null”, but i don’t can figure it out why. Can you help me, im new to JS.

HTML:

<form id="form">
  <input type="text" id="username" placeholder="Username" required>
  <input type="email" id="email" placeholder="Email" required>
  <input type="submit" value="Register">
</form>

JS:

var form = document.getElementById('form')

form.addEventListener('submit',function(event){
  event.preventDefault()

  var username = document.getElementById("username").value
   console.log(username)
    
      var email = document.getElementById("email").value
      console.log(email)
    })

Error Massage:
Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)

I am trying to check if an object in an array is same as the object and if they are the same then use splice method to extract that particular object and others after to another array and then reverse them without reverse function. Please help

function func()
{
    for(var i = 0; i < array.length; i++)
    {
       
       if(array[i].key == object.key)
       {
            2ndarray.splice(0,0,array[i]);
            break;
            
       }
    }
}

My issue is that the animation works fine when the images have no content to them as below, but once they are loaded the interactions get pretty weird.

Here is a code snippet:

var data = ['https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg'];

var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        wid = 400
    y = 400;

    var svg = d3.select("body").append("svg")
      .attr("width", wid)
      .attr("height", "400")
      .on('mousemove', () => {
            let x = event.x-20;
            d3.selectAll('.content')
                        .attr('x', (d,i) => fisheye(d,x))
          })
        .on('mouseleave', () => {
            d3.selectAll('.content').transition().attr(
                'x', (d,i) => xScale(i))
        })

  var chart = svg.append('g')
        .classed('group', true)


  let xScale = d3.scaleBand().domain(d3.range(5)).range([0,wid]).padding(0)

  let rects = svg.selectAll('content')
                             .data(
                                     d3.range(5)
                                     //data //(uncomment this, and comment line above to try loading images)
                                 )

  rects.exit().remove();

    rects.enter()
        .append("svg:image")
        .attr("xlink:href", d => d)
        .attr("class","content")
        .attr("y", 0)
        .attr("x", (d, i) => xScale(i))
        .attr("width", "300px")
        .style("opacity",1)
        .attr("stroke","white")
        .style('fill', 'rgb(81, 170, 232)')
        .attr("height", 400);

    let distortion = 10;

    function fisheye(_, a) {
      let x = xScale(_),
          left = x < a,
          range = d3.extent(xScale.range()),
          min = range[0],
          max = range[1],
          m = left ? a - min : max - a;
      if (m === 0) m = max - min;

      return (left ? -1 : 1) * m * (distortion + 1) / (distortion + (m / Math.abs(x - a)))+a;
    }

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

I’m trying to make something that looks like this:
https://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/index.html

I would really appreciate some help on getting that snippet to work and if possible as smoothly as this website link! That was made by the Bosstock himself and I’m a d3 newbie so I’m quite out of my depth.