The ball takes a bounce over the edge of the playing field

In my latest program update, I am facing an issue with the maxTop variable in my box div. It seems to be returning a NaN value, and I'm struggling to figure out why.

The problem I'm encountering is that when the ball moves, it bounces off the left and right walls but does not react correctly when it reaches the top or bottom. Any insights into why this might be happening?

Here are the variables I'm working with:


        currentLeftPos = parseInt($("#ball").css('left'));
        currentTopPos = parseInt($("#ball").css('top'));

        var newLeftPos = currentLeftPos + velocity_x;

        var newTopPos = currentTopPos + velocity_y;

        if( newLeftPos >= maxLeft || newLeftPos <= 0)
            velocity_x *= -1;

        if( newTopPos >= maxTop || newTopPos <= 0)
            velocity_y *= -1;

        maxLeft = parseInt($("#outerbox").css('width')) -parseInt($("#outerbox").css('border-left-width')) - parseInt($("#ball").css('width'));

        maxTop = parseInt($("#outerbox").css('top')) -parseInt($("#outerbox").css('border-left-top')) - parseInt($("#ball").css('top'));

Visit the program here

jqueryhtmlcss

Answer №1

Adjusting the border-top-width rather than the border-top-height will resolve the initial NAN issue.

The solution to your second problem is as follows:

var maxRight = parseInt($("#outerbox").css('width')) +maxLeft;
var maxBottom =  parseInt($("#outerbox").css('height')) - parseInt($("#ball").css('height'));

Make sure to update the upper value when changing dimensions and:

if( newTopPos >= maxBottom || newTopPos <= 0)
   velocity_y *= -1; // multiply the value by -1

 if( newTopPos >= maxRight || newTopPos <= 0)
   velocity_y *= -1; // multiply the value by -1

View the example on Fiddle Here.

Answer №2

The height of the property border is not defined

var maxTop =  parseInt($("#outerbox").css('height')) -parseInt($("#outerbox").css('border-top-width')) - parseInt($("#ball").css('height'));

alert(maxTop);

Visit this link for CSS reference on border width

UPDATE: Here's a functional jsfiddle showcasing how to make a ball bounce within a box, illustrating a simple bouncing ball game

Check out the jsfiddle demo here

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

Is there a way to set overflow-x to auto and overflow-y to visible simultaneously?

I'm facing a specific issue where I need to display overflow in a horizontal direction for scrolling, but not in the vertical direction. Perhaps an image can clarify this better. Is there a solution using CSS or JavaScript to achieve this? ...

javascripthtmlcssoverflowhorizontal-scrolling

Is it advisable to avoid using `&apos;` for escaping single quotes?

According to the insights shared in conversations about the popularity of single quotes in HTML and Jquery embedded quote in attribute, the Wikipedia page on HTML highlights that: The use of the single-quote character ('), as a way to quote an attri ...

htmlescapingquotes

Toggle draggable grid in jQuery

Imagine I have a grid set up using the following code: $( "#dragIt" ).draggable({ grid: [ 15, 15 ] }); Now, there is a checkbox located below the div. Is there a way for me to switch the grid on and off by toggling the checkbox? I've searched the of ...

javascriptjquerydraggable

Experience mind-bending timing functions in CSS animations with IE11

Despite working perfectly on Firefox, Chrome, and Edge, the animations on my website seem to have erratic timing on IE11. To see the animation as intended: However, on IE11, the animation behaves differently: I've attempted adjusting the animation- ...

htmlcssinternet-explorer-11ie11-developer-tools

Tips for ensuring all my onclick event are clickable in iOS browser

Currently, I am developing a web page using HTML5 and JQuery Mobile. I have encountered an issue where the onclick function does not work on iOS device browsers. Is there a way to change all onclick events to be accessible through tapping instead? This wou ...

javascripthtmljquery-mobile

Is there a method to receive real-time status updates using AJAX jQuery?

I'm attempting to retrieve a status from the database using jQuery AJAX. There are 3 potential options for the status: if it is pending, I want to continue loading the request; however, if the status is changed to success or error in the database, the ...

phpjqueryajax

Troubleshooting problem with sorting in Angular 4 material header

Using Angular 4 material for a table has presented me with two issues: 1. When sorting a table, it displays the description of the sorting order in the header. I would like to remove this. https://i.sstatic.net/5bHFO.png It displays "Sorted by ascending o ...

javascripthtmlangulartypescriptangular-cdk

Mobile compatibility in ECMAScript 5.1 is essential for creating seamless user

Is there a reliable source for information on ECMAScript 5.1 compatibility with mobile browser devices? ...

javascriptjqueryandroidiosmobile

"Implementing a function to automatically input a selected value from a dropdown menu into a text field

I'm facing an issue and need some help. I have a form with one select field and one text field. What I want is for the text field to display a value corresponding to the option selected in the select field. For example, if I choose "B" from the select ...

phphtmlcss

Troubleshooting the issue: Unable to shift a div to the left in a Rails app using jQuery and CSS when a mouseover event occurs

Hey there, I'm working on a div that contains a map. My goal is to have the width of the div change from 80% to 50% when a user hovers over it. This will create space on the right side for an image to appear. I've been looking up examples of jqu ...

jqueryhtmlruby-on-railscss

Disable automatic playback of HTML video

There is an HTML video with an image that loads initially and then disappears to play the video. I would like the image to always be visible until I click on it. Once clicked, the video should start playing. You can view the code on JSFiddle: http://jsf ...

javascriptjqueryhtmlcss

Divide the information in the table across several pages for easier printing

I have encountered an architectural challenge with my server-side React app. The app renders charts and tables with page breaks in between to allow a puppeteer instance to print the report for users in another application. The issue I'm facing is mak ...

javascripthtmlcssreactjs

Attempting to reveal or conceal the change_list filter within Django admin

Is there a way to hide the filter box (the grey box on the right) on the django admin change_list.html page? I attempted to create a basic JavaScript function and insert it into the extra head section like this: {% extends "admin/change_list.html" %} {% ...

javascriptjquerydjangodjango-admin

Navigational strip within the grid

My grid has a size of 300px. When there are more than 10 records, a vertical scroll bar appears, which is fine. However, at the same time, a horizontal scroll bar also appears, which I do not want to display. My CSS class for vertical scrolling is: .vstyl ...

cssag-grid

Retrieving the ID of a newly created object in Rails with the help of jQuery

Struggling to retrieve the ID of a newly created element using a query-AJAX-POST request. Despite numerous attempts, none have proven successful thus far. Currently at a standstill. Controller: def createuserlink @new_element = Link.new(element_params ...

jqueryruby-on-railsajaxhttp-post

Utilizing Rails for dynamic form validation with AJAX

As someone who is new to jQuery, AJAX, and JavaScript in general, I am facing a challenge with front-end validation for a Rails form that utilizes an ajax call to query the server. The validation works fine when I am debugging, giving enough time for the A ...

javascriptjqueryruby-on-railsajax

Adjusting the position of an iframe with a YouTube video when the window is resized

I'm struggling with resizing and moving a YouTube video embedded using the Youtube API. I'm not a web designer, so I'm facing some difficulties. When trying to resize the window, I can't seem to move or resize the video within an iframe ...

javascriptjqueryhtmliframe

Laravel 5.2 is designed to exclusively extract numerical values from AJAX post requests

When using AJAX to submit my form, I encountered an issue where only the numeric values were being passed through. Even though all variables appeared populated before submitting the form, only the numeric ones made it to the controller. AJAX: function ap ...

phpjqueryajaxlaravel-5

Could it be that this is a mysterious foreign alphabet or a problem with the encoding?

I'm facing a strange bug with characters on my website and I can't seem to figure out what's causing it. A foreign writer submitted an article to me, and when I received it, the font was displaying oddly. After some investigation, I've ...

javascripthtmlencodingutf-8character

Retrieve the raw text from the input field instead of the date object

Below is the HTML code for an input field: <div class="input-group input-group-md"> <input id="date" name="date" [readOnly]="disabled" type="text" placeholder="M0/d0/0000 Hh:m0:s0" [placeholder]="pl ...

htmlangulartypescript