Smoothly moving a centered item (text) when width changes (text changes)

Question

I was wondering if there was a way to have a centered item shift smoothly when its width changes?

In my case, I have a piece of text on the left that stays the same, and the piece of text on the right will change depending on what page you are on.

<div id="title-container">
  <h1 class="inline-header">example.</h1>
  <h1 id="title-category" class="inline-header">start</h1>
</div>

The total width of this will change as a result, and it will shift abruptly.

Here is a jsfiddle demonstrating the problem.

https://jsfiddle.net/sm3j26aa/3/

I've currently worked around it by just fixing the left side using relative positioning and translates, but if I can get the smooth transition, I would rather do that.

Thanks for any help!

Answer 1

Instead of fading just the right portion in and out, you'll need to fade the entire line.

Also, there is no need for individual functions for each word change. Just have one function that accepts the new word as a parameter.

Lastly, don't use inline HTML event attributes to set up event handlers. It:

• creates spaghetti code that is more difficult to read
• creates anonymous wrapper functions that alter the this binding within the function
• doesn't follow W3C DOM Even Standards

Instead set up your event handlers in JavaScript.

 var $titleContainer = $('#title-container'); var $titleCategory = $('#title-category'); $("button").click(function(){ change(this.textContent); }) function change(text) { $titleContainer.fadeOut(300, function() { $titleCategory.text(text); $titleContainer.fadeIn(600); }) } 

 #title-container, #button-container { text-align: center; } .inline-header { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="title-container"> <h1 class="inline-header left">example.</h1> <h1 id="title-category" class="inline-header">start</h1> </div> <div id="button-container"> <button>Sample</button> <button>Hello</button> <button>SampleX2</button> </div> 

Answer 2

 var $titleCategory = $('#title-category'); function changeToSample() { $titleCategory.fadeOut(300, function() { $titleCategory.text('sample'); $titleCategory.fadeIn(600); document.getElementById('title-container').style.marginLeft = `calc(50% - 14em/2)`; }) } function changeToHello() { $titleCategory.fadeOut(300, function() { $titleCategory.text('hello'); $titleCategory.fadeIn(600); document.getElementById('title-container').style.marginLeft = `calc(50% - 12em/2)`; }) } function changeToDoubleSample() { $titleCategory.fadeOut(300, function() { $titleCategory.text('samplesample'); $titleCategory.fadeIn(600); document.getElementById('title-container').style.marginLeft = `calc(50% - 20em/2)`; }) } 

 #title-container { margin-left: calc(50% - 12em/2); transition: .2s; } #button-container { text-align: center; } .inline-header { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="title-container"> <h1 class="inline-header">example.</h1> <h1 id="title-category" class="inline-header">start</h1> </div> <div id="button-container"> <button onclick="changeToSample();">Sample</button> <button onclick="changeToHello();">Hello</button> <button onclick="changeToDoubleSample();">SampleX2</button> </div>