"Interaction with jQuery causes button element to shift position upon resizing of browser

I am encountering an issue with a div element that has jQuery appended to it for a bounce effect. The element is absolutely positioned within its relative parent. However, when the browser is resized, the child element does not remain centrally aligned during resizing until the browser stops being resized.

Could anyone provide some advice on how to prevent this from happening?

Here is the HTML code:

<div class="row">
    <div class="col-md-12">
        <div class="test">
            <div id="buttonbounce"></div>
        </div>
    </div>
</div>

And here is the script:

$(document).ready(function() {
    function doAnimation() {
        $("#buttonbounce").effect( "bounce", {times:3}, 1000, doAnimation);
    }
    doAnimation();
});

To see this in action, please visit my CodePen link below:

View CodePen

jqueryhtmlcss

Answer №1

To resolve the issue, it is important to apply the margin:0 auto; property to the parent div rather than the button itself. This adjustment will correct the problem.

.example {position:relative;
      margin:0 auto;
      width: 45px;
      height: 45px;}

#buttonanimation {
    width: 45px;
    height: 45px;
    position: relative
    top:30px;    
    background-image: url(http://cdn.flaticon.com/png/256/26037.png);
    background-size: 45px;
    cursor: pointer;
    }

Answer №2

Check out this code snippet:

.sample {position:relative;
      margin:0 auto;
      width: 50px;
      height: 50px;}

#clickme {
    width: 50px;
    height: 50px;
    position: relative
    top:25px;    
    background-image: url(http://cdn.example.com/image.png);
    background-size: 50px;
    cursor: pointer;
    }

Try the Demo

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

How to utilize methods from different pages in Ionic 2

Looking to display the total number of items in an array on a card located on the home screen, but facing issues referencing methods outside of the typescript file they're written in. Trying to extract the array size method and utilize it in a differe ...

htmlangulartypescriptionic2

Achieving a task with the utilization of jQuery's `onchange` event handler, which mirrors the functionality of an `@Ajax

I have an ajax request that generates a link which, upon being clicked, replaces my "testDiv" div with some information obtained from my controller through the "ControllerMethod" function: <div class ="editor-field" id ="clickableAjax"> @Ajax.Ac ...

jqueryajaxasp.net-mvc

Searching for link href and text in a PHP DOM document

Within an html tag, there are the following elements: <ul class="l1nk"> <li class="dir online"> <a target="_blank" rel="nofollow" href="https://sample.com/embed/2882015?ref=7Qc" t ...

phphtml

How can I update the column values to NULL using the $_POST values for both columns?

Having some trouble updating a column ($_POST['dtf']) to a null value based on another column's value ($_POST['pid']). I've attempted various versions of the MySQL statement but haven't had any success. Trying to use AJAX ...

phpjquerymysqlajax

Issues with the Jquery feedback plugin's functionality are currently preventing it

I wanted to incorporate a feedback feature into my web application. To do this, I searched on Google and found a suitable jQuery plugin. I followed the documentation provided by the plugin, including the library in my HTML file, and then wrote the code as ...

javascriptjqueryhtml

jQuery Typeahead implementation malfunctioning when text matches either the first or last character

It seems like there is a problem with the .split() method, especially when the characters match the beginning or end of a name. To see the issue in action, visit this JSFiddle link: http://jsfiddle.net/5uebxvex/ I'm working with the Employees tabl ...

phpjqueryjsonajax

Leveraging jQuery for Custom Form Styling

.I prefer to utilize personalized form elements in my forms. <fieldset> <legend id="Cities">Urban Areas</legend> <div class="legend-underline"></div> <div class="filters" id="Cities-filters"> <div> < ...

jqueryhtmlforms

Transition/transform/translate3d in CSS3 may lead to significant flickering on the initial or final "frame" of the transition (specifically on an iPad)

Hello everyone, I am currently developing a web application specifically for the iPad and I have implemented a CSS3 transition to animate a div, moving it from left to right. Here is the structure of my class: .mover { -webkit-transition:all 0.4s ea ...

jqueryanimationcss

creating dynamic parameterized URLs in Laravel

For example: Here are a few names. - Mujib - Amjed - Anees When someone clicks on "Mujib," the URL should remain the same and only the parameter should change. When someone clicks on "Amjed," the URL parameter should change to . ...

javascriptphpjqueryajaxlaravel

Issues with EventListeners in Internet Explorer

Similar Inquiry: Issue with MSIE and addEventListener in JavaScript? I am currently attempting to detect a close event on a popup window created by the parent page. The objective is for users to fill out a form and then, via a popup window, grant perm ...

javascriptjquerydom-eventsonbeforeunloadonunload

Can the Caption Adapt to the Image?

Code snippet: <script type="text/javascript> function displayNextImage() { x = (x === images.length - 1) ? 0 : x + 1; document.getElementById("img").src = images[x]; } function displayPreviousImage() { x = ...

javascriptjqueryhtmlcssimage

Adding a new row to an HTML table using JavaScript

In the code snippet below, I am facing an issue with adding a row to an HTML table and inserting it into a database. I have tried using JavaScript to add the row in order to avoid postback, but so far, I have been unsuccessful. Can someone assist me in t ...

javascripthtmlasp.net

Issue with embedding inline Javascript in a PartialView

This query is related to a previous question I had about asynchronously loading a page into a DIV using jquery/ajax. The issue has been resolved and it's working perfectly :). However, now the problem lies in the View that is being loaded into the DIV ...

jqueryasp.net-mvcajax

JQuery not properly validating inputs with required attributes after creation

I am currently developing a contact form that includes an "alternative address" <div id='alt'> with toggleable visibility. Inside this div, there is a required <input> field. I encountered an issue where toggling #alt twice (thus hidi ...

javascriptjqueryhtmlcsscakephp

Animating Jquery to smoothly change opacity until it reaches 100% visibility

The script I have does several things, but the main issue lies in the last line where the opacity of the class doesn't seem to reach 100%.... $('.fa-briefcase').parent().on('click', function () { $("#colorscreen").remove(); ...

javascriptjqueryhtmlcss

I came across a fascinating finding during my JavaScript studies, but its origin remains a mystery to

I recently wrote some code and was surprised to find that it did not generate any output. Here is the snippet of code: var a1 = undefined; var a2 = 5; if(a1 > a2) alert(1); if(a1 < a2) alert(2); if(a1 >= a2) alert(3); if(a1 <= a2) ...

javascriptjqueryangularjs

Create a scrollable Bootstrap table without impacting the layout grid system

Is there a way to create a scrollable table without impacting the grid system layout? How do I make a table scrollable while keeping the col-xs tag intact? <table class="col-xs-12"> <thead> <th class="c ...

csstwitter-bootstraphtml-table

What is the best way to adjust the width of a column to perfectly fit its contents when using IE9 compatibility mode?

Within my HTML code, I've included the table displayed below. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <style type="text/css"> table, td, tr, th{ border:1px; } .onepx{ ...

htmlcssie-compatibility-mode

What is the best way to incorporate component-specific CSS styles in React?

This is the layout that I am attempting to replicate (originally from react-boilerplate): component |Footer |style.css |Footer.js In Footer.js, the styles are imported in a very elegant manner like this: import React from 'react'; im ...

javascripthtmlcssreactjswebpack-dev-server

Creating a JQGrid with interactive columns and a customizable search query functionality

Imagine that the data I have looks like this: Name Month Expense ---------- -------------- ---------- XYZ February 10 XYZ March 50 KLM March 20 ABC April 30 By fo ...

jqueryjquery-pluginsjqgrid