javascript strange behavior

I am facing an issue with my code that is attempting to display images based on their height. Strangely, the code seems to work fine when I test it with 2 images, but fails when trying with 3 or more.

Check out the site:

Upon clicking a menu button, the images should be displayed one below the other within a width defined by a black line. When clicking the first button to create 2 thumbnails, they work as expected, but the other buttons do not function.

View the code here: http://jsfiddle.net/5qt3s/

I have stripped away any irrelevant details to simplify the code as much as possible. Any insight into what could be going wrong would be greatly appreciated. Thank you!

javascriptcssposition

Answer №1

Your website, euroscala.balkanium.com, is currently only displaying two small images:

images/shkalla/small/1.jpg
images/shkalla/small/2.jpg

The image images/shkalla/small/3.jpg is missing, causing an error when the program tries to load it within the loop in createThumbs. Instead of triggering the img.onload event, it triggers img.onerror because the image cannot be found. As a result, the count for totalLoaded never reaches totalThumbs, and redrawThumbs does not execute.

You have two options: either create the missing image or handle the img.onerror event to bypass loading the image entirely.

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

Passing specific props to child components based on their type in a React application using TypeScript

Sorry if this question has already been addressed somewhere else, but I couldn't seem to find a solution. I'm looking for a way to pass props conditionally to children components based on their type (i.e. component type). For example, consider ...

javascriptreactjstypescript

Creating React components through the use of the map function

Utilizing the hackernews api, I am attempting to extract the "data" property from my response object in order to display each story title individually on the browser. Initially, the data is structured as an array of id's representing individual storie ...

javascriptreactjs

Incorporate a PHP GET parameter through an onclick event to redirect using window.location in JavaScript when a button is

I am trying to modify the onclick event of buttons that look like this: <button class="buttons" onclick="window.location='page_test.php?VAR=1&VAR2=2'">BUTTON 1</button> <button class="buttons" onclick="window.location='p ...

javascript

What is the best way to show an error message on a field when using a custom form validator?

In my JavaScript code, I have created a form validator that is capable of validating different input fields based on specific attributes. However, I need assistance with implementing error handling and scrolling to the erroneous field. For each <input& ...

javascriptjqueryhtmlformsvalidation

JS custom scrollbar thumb size issues in relation to the scroll width of the element

I recently implemented a custom scrollbar for a component on my website. To determine the length of the scrollbar thumb, I use the formula viewportWidth / element.scrollWidth;. This provides me with a percentage value that I then apply to the thumb elemen ...

javascripthtmlcssreactjs

Having issues with Bootstrap flip div not functioning properly when clicked on a mobile device?

I am currently working on a website and encountering an issue. Here is the code snippet I am using: https://jsfiddle.net/3caq0L8u/ The objective is to flip a div when a button is clicked. The button responsible for flipping the div resides in both the " ...

javascriptjqueryhtmlcsstwitter-bootstrap

We apologize, but Google Pay encountered an unexpected developer error that caused the request to fail. Please try again later

When attempting to make a payment using Google Pay on a real device in the TEST environment, I am encountering the error mentioned in the title. I have followed the guidance provided in the Google docs and tried converting 'gateway' to a string, ...

javascriptreact-nativegoogle-paypayment-request-api

Styles for Material UI 5 class names

After upgrading from Mui 4 to 5, I am facing a challenge in using class names effectively. While the SX property allows me to apply styles to individual components, I am struggling with applying the same class to multiple components. In version 4, my code ...

cssreactjsmaterial-uiemotioncss-in-js

Delving into the World of ReactJS Routing Components and Rendering

I recently developed a basic booking app consisting of 3 essential files - App.js, Booked.js (1st child), and Details.js (2nd child). My current dilemma involves attempting to access App.js for the purpose of deleting data using the 2nd child (Detail.js). ...

javascriptreactjsreact-routerreact-router-domreact-router-component

Adding values to a knockout data table without refreshing the page

I am currently experiencing difficulties with refreshing my knockout.js DataTable. I have a data table that loads correctly on page load using the attached function method. I also have multiple buttons (Display All, Allowed, Not Allowed) that display the t ...

javascriptjqueryajaxknockout.jsdatatables

When altering the color of a mesh in Three.js, only a single face is impacted by the modification

I have a GLB model with multiple parts and hierarchy. My goal is to highlight a specific part of the assembly on mouseover. The code snippet I am using for this functionality is as follows: raycaster.setFromCamera( pointer, camera ); ...

javascriptthree.jsgltf

Having trouble figuring out how to update a list using ajax in Yii

I need to modify a JavaScript function that filters the content of a list. The current code looks like this: var id = $(this).data('id'); $.fn.yiiListView.update('contests-list', { data: {category: 2} }); I couldn't find any ...

javascriptphpjqueryyii

Comparing `height: calc(100vh);` to `height: 100vh;` in CSS can reveal a few

Currently tackling a project where the previous developer utilized: .main-sidebar { height: calc(100vh); } Unfortunately, I can no longer reach out to them, and I am curious about the variance (if any) between the two approaches. (Am I in the approp ...

htmlcssuser-interfacecross-browser

The module 'react/lib/React' could not be located within the file 'ReactTestUtils.js'

Setting up unit-tests for a React Native project using ReactTestUtils is causing an issue with npm test. The error message I receive is: Cannot find module 'react/lib/React' from 'ReactTestUtils.js' I suspect that my dependencies are ...

javascriptnode.jsreactjs

Use multiple lines to create a stunning visualization using morris.js. Let your data

I need help creating a graph using morris.js with 2 lines. I have two sets of data in one array, but I can't seem to display both lines on the graph simultaneously. When I use todos[0], only the first line is visible, and when I use todos[1], only the ...

javascriptphphtmlcssmorris.js

Interested in trying out Express and socket.io for chatting?

I've successfully set up the chat application, but now I'm faced with a dilemma: how can I make the chat work on the default port:80, where my main site is hosted? One solution that comes to mind is using an iframe - but is there another way? B ...

javascriptnode.jssocketsexpress

What's causing all my carousel slides to stack on top of each other instead of presenting in a

Whenever I click 'run' or 'preview' in a browser, specifically using Chrome, all three slides are displayed stacked from 1 to 3 in a static view. They do not toggle through each slide as intended. This issue only occurs on Codeply, a p ...

htmlcsscarouselbootstrap-5

Is there a way to shift the display of inline-block to the right?

I'm struggling with positioning a div that's nested within a display:inline-block. How can I align it to the right side of the container? <div style='width:100%'> left <div style='display:inline-block;position:relative;r ...

htmlcss

The radio buttons are stuck and not changing their selection

Having a group of radio buttons with the same name, when one is checked, it automatically selects another one in the group. Here is my current code: <input name="a" type="radio"> <input name="a "type="radio" checked> JS $("input[type='r ...

javascripthtml

Looping through NavItems component using JavaScript or Angular

My Angular project includes a navbar component with an app sidebar that has a navItems attribute. Below is the content of my navBar: <app-header style="background-color : #e65100;" [fixed]="true" [navbarBrandFull]="{ src: &a ...

javascriptangulartypescript