What is the best way to ensure that TwentyTwenty.js images are always positioned in the

Looking to utilize the TwentyTwenty.js code for image comparison, but facing an issue where the images are aligned to the left side. Is there a way to keep them centered without explicitly setting the width on the container?

<div id="beforeafter" class="twentytwenty-container">
  <img src="https://lorempixel.com/800/300/sports/2/">
  <img src="https://lorempixel.com/800/300/sports/3"/>
</div>

$(window).load(function() {
  $("#beforeafter").twentytwenty();
});

http://codepen.io/anon/pen/EmEYjQ

Setting a fixed width on the container centers the images, but I'd prefer not restricting their width, except ensuring they're not wider than the screen.

Tried using flex centering, but it causes the handle to not be in the center.

  display: flex;
  justify-content: center;

Answer №1

I struggled with this issue as well!
I dedicated a considerable amount of time researching CSS solutions.

After much searching, I discovered a straightforward fix:

$(window).load(function() {
  // Previous code snippet.
  $("#beforeafter").twentytwenty();

  // Calculate the width of your images and divide by 2.
  var imgWidth = $("#beforeafter img").width()/2;

  // Set the container position to be centered on the screen minus half the image width.
  $("#beforeafter").css({"position":"relative","left":"calc(50% - "+ imgWidth+ "px)"});
});

Check out the CodePen 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

What is the best way to implement CSS Background-size: cover; while also making room for a menu?

Recently, I came across the CSS property background-size: cover, but I encountered a problem. I want the area behind my navigation on the left to be black. However, when I leave black space in the image itself, it gets cropped off when the image resizes. ...

Implementing Image Data in AngularJS: A Guide to Binding Images to IMG Tags

Allow me to explain the problem further. I am retrieving a user's profile picture by calling an API that returns image data, as shown in the screenshot below https://i.stack.imgur.com/t8Jtz.jpg https://i.stack.imgur.com/pxTUS.png The reason I canno ...

What is the best way to eliminate excess elements from overflow:hidden?

Whenever I click on a modal, it changes my body to overflow:hidden. As a result, the scrollbar disappears and my page becomes unscrollable. Once I close the modal, my body reverts back to overflow:auto allowing the page to scroll again. These functionaliti ...

Resetting text in an input field using CSS

Here is the fiddle link for reference: http://jsfiddle.net/a765q/1/. I noticed that when I click the reset button, the text color changes to grey. Any ideas on how to fix this? ...

What steps do I need to take in order to implement a basic ZeroClipboard copy-to-clipboard feature in jQuery on jsFiddle with just one click?

I'm having trouble implementing ZeroClipboard in a jQuery environment. My goal is to have the text within each div with the class copy copied when clicked. The following jsFiddle demonstrates the functionality with double click using the stable ZeroC ...

Adjusting Picture Sizes to Fit the Dimensions of a Photo Frame

Currently, I am in the process of developing a website that incorporates two distinct image types: Portrait photos https://i.sstatic.net/rmIXQ.jpg Landscape photos https://i.sstatic.net/Z7mr3.jpg As you can see, there are two different categories of ...

What is a sneaky way to conceal CSS specifically from iPhones without affecting other browsers?

I have a solution to conceal CSS from all browsers except for iPhones. You can find the details here: How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing? Now, my question is: How can I hide CSS specifically from iPhones ...

Reveal the hidden div by sliding it up from the bottom

I have a container with brown branches resembling the image, and I'm looking to hide it. When a button is clicked, I want it to reveal from the bottom to the top, almost like it's being unmasked. I've ruled out a typical bottom-up slide anim ...

What is the best way to incorporate web components into a React Js project?

I am currently unfamiliar with web components. My main goal is to integrate Google Material Components into my React.js project. Google Material Web Component can be found here: https://github.com/material-components/material-components-web Is there a ...

When sending an ajax request with HTML data as the payload

While working on an MVC program, I encountered an issue when trying to send data from a TextArea to the controller upon a button click. Everything worked fine until I had HTML-based data inside the TextArea. Here's a snippet of the HTML code: <te ...

Identifying added elements that respond to link hover effects

I've been working on a project where I'm trying to replace the default browser cursor with an SVG one using jQuery. Everything seems to be working smoothly, except for changing the cursor when it hovers over links - nothing I've tried so far ...

yet another problem with overflow-x being hidden while overflow-y is visible

I am currently working on creating a tab overflow user interface that is similar to what Firefox uses. This involves utilizing a combination of fixed width containers and a fluid width container in the middle to hold the tabs. The challenge arises when th ...

Mastering the Art of Tab Selection with Jquery

I am trying to implement a tabs control using jQuery. Here is the HTML code I have: <div id="tabs" class="news1"> <ul> <li><a href="#tabs-1">Track</a></li> <li><a href="#tabs-2">History&l ...

What is the best way to add three dots at the end of text when it exceeds the available space?

What CSS property is utilized to display three dots at the end of text when it overflows? ...

Using jQuery in an external JavaScript file may encounter issues

As a newcomer to jQuery, I decided to try writing my jQuery code in an external js file rather than embedding it directly into the head of the HTML file. Unfortunately, this approach did not work as expected. Here is what my index.html looks like: < ...

How is it possible for a JavaScript variable sharing the same name as a div Id to automatically pass the div?

This is just ridiculous. Provided HTML <p id = "sampleText"></p> Javascript var sampleText = "Hello World!"; Execution console.log(sampleText); // prints <p id = "sampleText"></p> How is this even possible? I ...

Enhancing 2D video viewing with Threejs interactivity

I want to create an interactive 2D video using three.js and maintain the aspect ratio of the video when resizing the browser window. Here is the code I am currently using: var camera, scene, renderer; var texture_placeholder, distance = 500; init() ...

Include an additional feature to an already established design

I have been attempting to move an element to the left using the transform property. However, there is already a pre-existing style with transform, which appears as: transform: translate3d(tx, ty, tz) What I am aiming for is to incorporate another property ...

Using Javascript to Assign Value to Variables

I have been working on this code snippet: http://jsfiddle.net/9B84H/26/ function autosuggest() { var input = document.getElementById('location'); var options = {types: [],}; var autocomplete = new google.maps.places.Autocomplete(input, o ...

Prevent iPhone from automatically changing phone numbers to grey text color

For some reason, the iPhone keeps changing the phone numbers on my site to grey, despite using Drupal 7. I've heard that this is because the iPhone wants to make them stand out for users to interact with. I tried adding the following code to the head ...