Text Swapping Without Page Jiggles

A common issue with swapping text within a div is that other page content jumps or jiggles.

Generally, the swaps have different amounts of text. They take up different amounts of space. When the text is swapped, other page content moves around to accomodate the different space requirement.

The jiggle can be annoying.

Some website owners restort to making an image of the various text presentations, each image with the same dimensions. Thus, when they swap there's no jiggle.

With that method, text editing can be a chore because a new image needs to be made and correctly sized.

There is another way.

The text swapping can occur within a div of dimensions required by the largest amount of text. The div size is determined automatically, at the time the page is loaded and whenever the browser screen dimensions change, for the browser and device the page is being viewed with.

In other words, the div both adjusts dimensions responsively and prevents page jiggles. No JavaScript required for that.

This article provides instructions for creating the responsive div the correct size to hold any of the swapped text without page jiggling. It should work with pretty much any text-swapping software.

Providing text-swapping software is outside the scope of this article. If you have none at hand, an option is the software at Click Replaces One Div With Another article.

An Illustration

The div below is large enough to accomodate two differently sized amounts of text, as they are swapped, without resizing the div.

Tap anywhere on the text to swap it for the other.

Another illustration is the Perspective of Trees page at Lightfocus. Above the first image, tap the "Tap for another perspective." link. Tap it two times to see all three "perspectives".

How it Works

The implementation consists of two divs. All the text swapping takes place within the two divs.

The first div — The code for the first of the two divs contains a copy of the largest amount of text that the text swaps will display. The copied text is transparent so it doesn't publish. The reason for the copy of the text is to establish the dimensions required to accomodate each text swap.

The second div — The code for the second of the two divs is within the code for the first div, inserted immediately below the transparent text. This second div nullifies the transparent text color so the CSS's normal text color is available. And it is within this second div that all the text swapping occurs.

Your visible text and text swapping functionality is entirely within the second div — except any JavaScript the swapping system uses may be placed elsewhere on the page.

The Code

The source code below is for the two divs. The div tags themselves don't need any editing, although you may add styling as necessary for your implementation.

<!-- This first div holds a copy of the largest text content for div sizing, font color transparent. -->
<div id="to-size-the-container-for-swapped-content" style="color:transparent; position:relative;">

[A COPY OF THE LARGEST SWAPPED TEXT GOES HERE]

<!-- This second div is to remove the transparent font color and position swapped content inside the sized container. -->
<div id="to-remove-transparency-and-hold-swapped-content" style="position:absolute; top:0; right:0; bottom:0; left:0; color:initial;">

[THE TEXT AND FUNCTIONALITY FOR SWAPPING GO HERE]

</div><!-- id="to-remove-transparency-and-hold-swapped-content" -->
</div><!-- id="to-size-the-container-for-swapped-content" -->

Implementing the code —

Paste the above code into a temporary web page.

When you have determined the text that will be swapped, copy the longest text that will be swapped and replace [A COPY OF THE LARGEST SWAPPED TEXT GOES HERE] with that text. If the text in the swap includes HTML markup, include the markup with the replacement.

Now, replace [THE TEXT AND FUNCTIONALITY FOR SWAPPING GO HERE] with your swapping functionality, whatever makes your text swap work. If, as is probably the case, your swapping functionality uses separate JavaScript, it may be included here or the JavaScript may be put elsewhere on the page.

What Is Good About It

Swapping text under certain conditions can be good, the conditions determined by the site owner.

Doing so without jiggling the web page is good, too, because it is best not to annoy wanted site visitors into abandoning your site.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager