Content View Slider

With the software in this article, content within a div slides left. Then it slides right. Back and forth, with a pause in between.

You specify the length of the pause. And you specify how fast the content slides.

When it slides, the content reveals more of itself from one side and hides some of itself at the other side. (A demonstration is further below.)

The sliding content can be text. It can be images. Or a combination.

The content may be a series of product images. It may be clues to a puzzle. It may be a news item.

The sliding content may be anything you wish so long as it takes up more horizontal room than the space you designated for it — so it can slide.

The technique uses the CSS transition property with the CSS positioning property, left.

JavaScript is used to change the CSS left property's value. The value of the CSS transition property specifies how fast the content slides.

I'll show you step by step.

Here is the demonstration using a bunch of arrows. Three seconds after the page loads, the arrows slide left. That takes 10 seconds. There is a pause of 3 seconds, then the arrows slide right.

Although the content slider can handle images as well as characters, all the arrows in the demonstration are characters and are published with HTML code. (The HTML code for the arrows can be found at the HTML Code for Arrows page.)

Implementation requires two HTML div tags and some JavaScript. Let's do the div tags first.

The Two HTML div Tags

One div contains the other div. The inside div contains the content to slide.

Here is source code for the two div Tags.

<div id="shifter-content-container" 
style="
   position:relative;
   overflow:hidden;
   height:22px; 
   outline:1px solid #ccc;
">
<div id="shifter-content" 
style="
   position:absolute; left:0; top:0; 
   transition:left 10s linear 0s; 
   white-space:nowrap; 
   font-size:18px;
">
[THE CONTENT TO SLIDE LEFT AND RIGHT]
</div><!-- id="shifter-content" -->
</div><!-- id="shifter-content-container" -->

For both of the div tags, there are some required CSS declarations. And both can be further styled for your custom design.

1. <div id="shifter-content-container" —

   • position:relative; is required so the next div can be positioned correctly.

   • overflow:hidden; is required so the overflow content doesn't display outside the div.

   • height:22px; is required, with a customization. The value 22px needs to be updated to exactly the height you want for the following shifter-content div. The reason this must be specified is because the absolute positioning of the shifter-content div does not give this shifter-content-container div any indication of what the actual height is.

   • The rest of the CSS declarations may be changed or removed. And other declarations may be added.

2. <div id="shifter-content" —

   • position:absolute; left:0; top:0; is required for correct positioning inside the shifter-content-container div.

   • transition:left 10s linear 0s; is required, with a customization. The value of 10s needs to be changed from 10 seconds to the number of seconds your sliding content shall use to completely slide in one direction.

   • white-space:nowrap; is required to keep the sliding content all in one line.

   • The rest of the CSS declarations may be changed or removed. And other declarations may be added.

   • For this shifter-content div content, replace [THE CONTENT TO SLIDE LEFT AND RIGHT] with your sliding content — text and/or images.

When you have the above pasted into a web page and ready to go, then it is time to add the JavaScript to make the slide work.

The JavaScript

Here is the JavaScript source code. There are 4 places to customize. Notes follow the source code.

<script type="text/javascript">
/*
Content View Slider
Version 1.0
October 23, 2021
Will Bontrager Software LLC
https://www.willmaster.com/
*/

// Customization
var ViewShifter_ContentContainerDivID = "shifter-content-container";
var ViewShifter_ContentDivID = "shifter-content";
var ViewShifter_TransitionLengthSeconds = 10;
var ViewShifter_SecondsBetweenShift = 3;
// End of customization

var ViewShifter_Timout = false;
var ViewShifter_PushInAmount = 0;
var ViewShifter_Shifted = 0;
function ViewShifter_Setup()
{
   if( ViewShifter_Timout ) { clearTimeout(ViewShifter_Timout); }
   document.getElementById(ViewShifter_ContentDivID).style.left = "0px";
   var viewWidth = 0;
   document.getElementById(ViewShifter_ContentDivID).style.whiteSpace="";
   viewWidth = document.getElementById(ViewShifter_ContentContainerDivID).clientWidth;
   document.getElementById(ViewShifter_ContentDivID).style.whiteSpace="nowrap";
   var textWidth = document.getElementById(ViewShifter_ContentDivID).scrollWidth;
   ViewShifter_PushInAmount = parseInt(textWidth-viewWidth);
   ViewShifter_Shifted = "-" + parseInt(ViewShifter_PushInAmount+10) + "px";
   if( ViewShifter_PushInAmount > 0 ) { ViewShifter_Timout=setTimeout(ViewShifter_Start,ViewShifter_SecondsBetweenShift*1000); }
}

function ViewShifter_Start()
{
   document.getElementById(ViewShifter_ContentDivID).style.left = ViewShifter_Shifted;
   ViewShifter_Timout=setTimeout(ViewShifter_End,(ViewShifter_TransitionLengthSeconds+ViewShifter_SecondsBetweenShift)*1000);
}

function ViewShifter_End()
{
   document.getElementById(ViewShifter_ContentDivID).style.left = "0px";
   ViewShifter_Timout=setTimeout(ViewShifter_Start,(ViewShifter_TransitionLengthSeconds+ViewShifter_SecondsBetweenShift)*1000);
}
window.addEventListener( 'resize', ViewShifter_Setup );
ViewShifter_Setup();
</script>

Notes —

There are four places that may be customized. Some will be okay as is, but still need to be reviewed.

1. shifter-content-container is the same as the div tag with that ID value in the source code further above. If that id value changes, it also needs to be changed here in the JavaScript.

2. shifter-content is the same as the div tag with that ID value in the source code further above. If that id value changes, it also needs to be changed here in the JavaScript.

3. 10 specifies how many seconds should elapse between starting a left or right content slide and ending that slide. This number should correspond to the number of seconds in the transition:left 10s linear 0s; CSS declaration in the div tag source code further above.

4. 3 specifies the number of seconds to pause between left and right shifts. It also specifies the number of seconds to wait before starting the first left shift. Change 3 to your desired length of pause.

Put the JavaScript in the source code of the same page as the div tags. The JavaScript may be pasted into the source code or pulled in from an external file.

You now have a nice way to present special content and to call attention to it.

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

Will Bontrager