I'm attempting to make this script function correctly when an image is loaded

Can anyone help me figure out how to make this script function on image load instead of onclick? I came across the script on stackoverflow, but it was originally set up for onclick. I want it to work for onload or .load

HTML======

<div id="container">
  <div class="box">
    <h1>B</h1>
    <h2>10.35</h2>  
  </div>

  <div class="box">
    <h1>A</h1>
    <h2>100.05</h2>
  </div>

  <div class="box">
    <h1>D</h1>
    <h2>200</h2>  
  </div>

  <div class="box">
    <h1>C<h1>
    <h2>5,510.25</h2>
  </div>
  <img src="http://myscot.com/ImagesMain/myscotLogoResp120.jpg"   id="numBnt"/>
</div>

JS======

var $divs = $("div.box");

$( "#numBnt" ).load(function() {
    var numericallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("h2").text() > $(b).find("h2").text();
    });
    $("#container").html(numericallyOrderedDivs);
});

CSS======

body {
    background: #eee;
    font-family: sans-serif;
}
.box {
    background: red;
    height: 200px;
    width: 200px;
}
.box h1 {
    color: white;
    font-size: 3.5em;
    text-align: center;
}
.box h2 {
    color: black;
    font-size: 2.5em;
    text-align: center;
}

Answer №1

It seems like enclosing it in

$( document ).ready(function() {
    console.log( "page is loaded!" );
});

You can refer to this example on jsfiddle: https://jsfiddle.net/x8b9sfg5/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular: How can objects be efficiently stored in a service for display in the view and use of CRUD functions to interact with the server?

I am exploring different options for creating a service that retrieves relational data from the server. I have two potential approaches in mind, but I am having trouble deciding between them. The first option involves returning the data as a multidimensio ...

What is the best way to retrieve data in Vue from Node.js?

app.js router.get('/', (req, res) => { var cart = req.cookies.cart; res.sendFile(path.join(__dirname,'../../src/components/cart.html'),cart); }) shoppingCart.html <body> <div id="shop" class="container mt-3"&g ...

Position a modal in the vertical center with scroll functionality for handling extensive content

Looking for ways to tweak a Modal's CSS and HTML? Check out the code snippets below: div.backdrop { background-color: rgba(0, 0, 0, 0.4); height: 100%; left: 0; overflow: auto; position: fixed; top: 0; width: 100%; z-index: 2020; } ...

Using Axios to Integrate an API - Displaying a Username and Password Pop-up

I have been given a project that involves API integration. I have successfully retrieved data from the API, but there is a pop-up appearing asking for a username and password. Although I have these credentials, I would like to log in without that pop-up ap ...

Troubleshooting a GreenSock problem related to the z-index

With the help of GreenSock TweenMax, I have successfully achieved the desired animations. However, I am facing an issue where the "flag" that moves out to the right needs to be positioned over the next diamond instead of being underneath it. Interestingly, ...

Uploading Images Dynamically with AJAX

Can someone assist me with a multiple upload form that utilizes AJAX to upload and display an image without the need for a submit button? My issue arises when dealing with repeating forms within table rows, causing only the first form to function properly. ...

Animate a div component sliding out while seamlessly introducing a new one using React

For my signin page, I've set it up so that users first enter their username and then click next to trigger a fluid slide animation which reveals the password field from the right. Although the separate components are already coded and the animation wo ...

When attempting to send data to the ServiceStack RESTful service, an error message of 'Access is denied' was received

I created a RESTful service using ServiceStack to send data to a database. It worked perfectly when tested locally. However, after deploying it to a server and running the same jQuery $.ajax call code, I encountered an 'Access is denied' error. I ...

Input a new value into the registration field to update it

My current task involves adding a new text field to a React form using a button. I need this new input text field to be able to store data on a register. How can I go about setting this property? Typically, when creating a text field, you would utilize co ...

Using React to display data from a nested JSON object in a table

I am currently working on parsing a JSON object into a table using React. However, I am facing an issue with utilizing the .map() function to create a row for every unique combination of course code, name, transferable_credits, transferable_credits -> i ...

React 17 Form not registering the final digit during onChange event

I am currently experiencing an issue with a form that includes an input field of type "number." When I enter a value, the last number seems to be skipped. For example: If I input 99 into the box, only 9 is saved. Similarly, when typing in 2523, only 252 ...

Dynamic React animation with sliding elements

When jumping between the second and third "page" of content, I am unable to determine the reason why it is happening. The content is displayed as an absolute position. Check out the sandbox here: https://codesandbox.io/s/nostalgic-bhabha-d1dloy?file=/src ...

Angular fails to update input changes once ajax auto-complete populates several fields

I am currently working on a project that involves using jquery auto-complete with ajax to automatically populate 3 input fields: Product Code, Description, and Price. Additionally, there are two other fields, Quantity and Total, which utilize angular. How ...

Hidden IFrame for Jquery File Upload

I was looking for a quick guide on setting up an AJAX-style file upload using a hidden iframe. Below is the section of HTML code related to the form: <div id = "file" class = "info"> <form id="file_upload_form" method="post" enctype=" ...

Unable to generate a JSON string from the JavaScript object

I need help converting the object I receive from the server into a JSON file for use in a d3.js chart: data = { "dog ":"5", "cat ":"4", "fish ":"12", } The desired output is: { "name" : "animal", "children" : [ {"name":"dog" ...

Check an array of objects for duplicate key-value pairs by cross-referencing other key-value pairs within the array using JavaScript

let selectedFruit = "mango" let fruitArray = [{fruit:"apple",locale:"US"}, {fruit:"orange",locale:"US"}, {fruit:"banana",locale:"US"}, {fruit:"apple",locale:"US"}, {fruit:"orange",locale:"IT"}, {fruit:"apple",locale: ...

"Troubleshoot: Inadequate performance of table search in node.js due

Embarking on a journey of learning here excites me. I have an insatiable appetite for new knowledge! Grateful in advance for any assistance! Presenting a concise Node.js JavaScript code snippet of 30 lines for a standard table search process. The "table" ...

Error: Conditional formatting not compatible with JavaScript detected

I have a jQuery DataTable that is populated with data from a JSON file. Everything works smoothly, but I'm encountering an issue with conditional formatting. The script I'm using assigns a 'positive' class to all cells in column 2, even ...

Incorporating an image within a v-for loop in Vuetify

I am planning to incorporate images at a later stage, but I am currently utilizing v-for and facing a dilemma of how to seamlessly introduce the image within the loop without disrupting its flow. <template> <v-card> <p v-for="item ...

I need assistance in validating and processing an HTML form that takes input from a UI login interface while utilizing the Fiber framework in the Go programming language

Can you assist me in capturing input data using the Fiber Golang framework? <form action="/" method="POST" novalidate> <div> <p><label>Email Address:</label></p> <p><inp ...