Adjust modal size dynamically from the middle with JavaScript and CSS

Take a look at this fiddle example: http://jsfiddle.net/c2mmQ/

In the fiddle, I have implemented a modal using jQuery that fades in and scales up with CSS animations when the show link is clicked. Inside the modal, there is another link that is supposed to resize the modal from the center, much like how popups work on an Xbox 360.

However, two issues arise. Firstly, the resizing does not trigger the transition end event, causing the centering code not to execute after the resize. Secondly, the resizing does not occur from the center as intended.

Do you have any suggestions on how to address these problems?

The code snippet is provided below:

 // Code Block containing jQuery functions...
javascriptjquerycss

Answer №1

Prepare yourself for a facepalm moment!

$('modal').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
            $('.modal').centerImage();
        });

needs to be 

$('.modal').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
            $('.modal').centerImage();
        });

http://jsfiddle.net/robschmuecker/c2mmQ/1/

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

Can someone assist me in completing a Vertical Dots Navigation feature that activates on scroll?

I'm struggling to create a vertical dots navigation that dynamically adds the "active" class based on the section currently in view while scrolling. For example, if you are on the first section, the first dot should be white and the rest transparent. ...

jqueryhtmlcss

If tall, then the height is set to 100%; if wide, then the width is set

My image-generating algorithm produces images of various sizes, some tall and some wide. How can I ensure that the images always fit perfectly within their parent container? They should be 100% height if they are tall and 100% width if they are wide. .im ...

htmlcss

Encountering an error while using *ngIf to filter within a loop in Angular

I'm having trouble using *ngIf to filter out items in a list generated by looping, and it's throwing an error. Can someone please assist me with this issue? abc.component.html <ul> <li *ngFor="let x of students" *ngIf="x.age < ...

javascriptangularangular-directivengforangular-ng-if

Transform an array of values into a new array with a set range

Looking for a solution in JavaScript! I currently have an array of values: var values = [3452,1234,200,783,77] I'm trying to map these values to a new array where they fall within the range of 10 to 90. var new_values = [12,48,67,78,90] Does anyo ...

javascript

Using AJAX to send an array of values to a PHP script in order to process and

I have very little experience with javascript/jquery: My ajax call returns entries displayed in an html table format like this: Stuff | Other stuff | delete stuff ------|----------------|------------------------- value1| from database | delete this ...

javascriptphpjqueryajax

Is it possible to update the background image of my iframe video?

I'm looking to customize the play button on a video displayed through an iframe on my website. Here is the code snippet I've been working with: .ytp-cued-thumbnail-overlay-image { background: url(https://www.example.com/images/video-play-butt ...

htmlcss

Tiny containers are positioned outside the boundaries of the larger container

click here to view image description Having trouble with my dashboard layout When adding small boxes, they exceed the page boundaries when moving to a new row The boxes in the first row display correctly, but issues arise with subsequent rows Seeking advi ...

phphtmlcssbootstrap-4

Tips on adjusting section height as window size changes?

Working on a website that is structured into sections. Initially, all links are aligned perfectly upon load. However, resizing the window causes misalignment issues. Check out my progress at: karenrubkiewicz.com/karenportfolio1 Appreciate any help! CSS: ...

htmlcss

Angular Group Formation Issue

I keep encountering the following error: formGroup expects a FormGroup instance. Please pass one in. This is how it looks in HTML: <mat-step [stepControl]="firstFormGroup"> <form [formGroup]="firstFormGroup"> And in my Typ ...

javascriptangulartypescript

"Encountering a problem with jQuery AJAX - receiving an error message despite the status code being

Attempting to make a jQuery Ajax request using the following code: $.ajax({ url: '<MY_URL>', type: 'POST', contentType: 'application/json;charset=UTF-8', data: JSON.stringify(data), dataType: 'a ...

javascriptjqueryajax

Using vue.js to make an HTTP GET request to a web API URL and display

I am currently utilizing vue.js to make an http request to a web api in order to retrieve a list of projects and display them in a list. However, I am encountering an issue where only one item from the response array of eight items is being rendered. Any a ...

javascriptvue.jsvue-resource

CORS (Cross-Origin Resource Sharing) Request Failed

Whenever I utilize axios to send a XMLHttpRequest, an error occurs. Error: XMLHttpRequest cannot load . The preflight request is unsuccessful because there is no 'Access-Control-Allow-Origin' header present on the requested resource. Hence, acce ...

javascriptvue.jscross-origin-read-blocking

Having trouble getting pure css to load properly in a Ruby on Rails application

Using pure.css to load "_form.html.erb" in my rails app. The css is styling the regular HTML below it, but not the rails portion. Important: The additional HTML was added to verify that the css is working correctly. Below is an example from the _forms.ht ...

htmlcssruby-on-railsruby

While attempting to retrieve images from S3 using the AWS-SDK Nodejs, users may experience issues with downloading

My goal is to retrieve images from AWS S3 using the AWS-SDK for Node.js. Although the file is successfully downloaded and its size appears correct, it seems to be corrupted and displays a Decompression error in IDAT. async download(accessKeyId, secretAcce ...

javascriptnode.jsaws-sdk-nodejs

Tips for aligning social media icons above an image on a webpage

Image I am seeking advice on how to position three social media icons on top of each picture, aligned to the left but in line with the image. Below is the code snippet I have been working on: body { background-color: #1a1a1a; } #downloadbutton{ width: ...

htmlcss

Avoid the selection of child elements in jQuery

I have been trying to create a dropdown box similar to the "Most Recent" dropdown on Facebook. My goal is to have a wrapper that includes both the element that triggers the dropdown and the dropdown box itself. Here is the structure I have set up: <di ...

jqueryjquery-selectorsdrop-down-menu

I'm unable to modify the text within my child component - what's the reason behind this limitation?

I created a Single File Component to display something, here is the code <template> <el-link type="primary" @click="test()" >{{this.contentShow}}</el-link> </template> <script lang="ts"> imp ...

javascripthtmltypescriptvue.js

Need help troubleshooting a problem with the <tr><td> tag in vue.js?

I have a table that updates when new data is created, and I want to achieve this using Vue.js I decided to explore Vue.js Components and give it a try. <div id="app1"> <table class="table table-bordered"> <tr> ...

javascriptvue.jsvue-component

The Ajax request is not successfully communicating with the PHP script

I am struggling with an issue regarding ajax calling a PHP code without changing the current page. Despite checking the php_error.log, I cannot find any reference to the PHP file. There are no errors displayed on screen, leaving me clueless about how to re ...

javascriptphpajax

When the button is clicked, the input values in Javascript vanish

I'm currently working on a project where I need to simulate data entry for a form using vanilla Javascript. Unfortunately, I am unable to edit the HTML itself. Everything seems to be working fine with my code until I click the final save button and a ...

javascripthtmlinput