Slides animated

A script for sliding in uniformly structured div elements

Some demos first

The div has position: relative and slides in from the top.

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

The div has position: absolute and slides in from the left.

The div has position: fixed and slides in from the right.

The div has position: absolute and slides in from the bottom.

The script, the div elements and the css

This script (customizable, see lines at the top of the script) enables us to slide in divs all having (almost) the same general form. Divs that we want to slide in vertically look like this:

<div class="sliding_div_vert" id="some_div1" style="position: ...">
<div>
<div onclick="slide_out_vert('some_div1')">
<span>X</span>
</div>
</div>
<div>
<div>
Content content content content
</div>
</div>
</div>

Horizontal slides look like this:

<div class="sliding_div_hor" id="some_div2" style="position: ...">
<div>
<div onclick="slide_out_hor('some_div2')">
<span>X</span>
</div>
</div>
<div>
<div>
Content content content content
</div>
</div>
</div>

Basic css (required)

The classes (sliding_div_vert and sliding_div_hor) are needed in order for the script to work properly (for the links that activate the script, see below). The css for the classes:

.sliding_div_vert, .sliding_div_hor {
margin: 0;
padding: 0;
width: 0;
height:0;
overflow: hidden;
opacity:0;
-webkit-transition: height 1s;
transition: height 1s;
}

.sliding_div_vert {
-webkit-transition: height 1s;
transition: height 1s;
}

.sliding_div_hor {
-webkit-transition: width 1s;
transition: width 1s;
}

More css for the main div

We might want to add more css to the main div. Example: <div class="sliding_div_hor" id="some_div2" style="position: absolute; left:10px; border: 1px solid silver; box-shadow: 5px 5px 5px gray" >. But we should not add values for padding, width, height, overflow, opacity, -webkit-transition and transition. If the main div has position: relative, we should not add margin values.

Css for the inner divs

We should not add any css to the inner divs. But we can wrap the content area in a new div and give that div all the styles we want. For instance, we could replace Content content content content in the divs above width <div style="text-decoration: underline">Content content content content</div> .

The links for the script

They should look like this:

<a style="cursor:pointer" onclick="slide_in('slide_in1', '450px', '300px')">slide in a div having ID='slide_in1'</a>
<a style="cursor:pointer" onclick="slide_in('slide_in2', '450px', 'auto')">slide in a div</a>
<a style="cursor:pointer" onclick="slide_in('slide_in3', window.innerWidth/3 + 'px', '400px')">slide in a div</a>
<a style="cursor:pointer" onclick="slide_in('slide_in4', window.innerWidth/3 + 'px', window.innerHeight/2 + 'px')">slide in a div</a>
<a style="cursor:pointer" onclick="slide_in('slide_in5', '450px', '3000px')">slide in a div</a>
etc.

The dimensions of the divs that we want to slide in can only be given in pixels, but we can easily mimic percentages. In the first example, the div that slides in is 450px width and 300px high. In the second example, the div adapts its height ('auto') to the vertical space needed by the div's content. The (inner) width of the window is used in the third example for giving the div a width that is a percentage of the window's width (here: 33.3%). In the fourth example, we use both window.innerWidth and window.innerHeight for sizing the div in percentages (width: 33.3%, height: 50%).
As for the last example, the vertical size of the div is extremely high here, much too high. It's done on purpose to demonstrate that whenever a div receives a wrong height (too big), the script will correct this by replacing the height with 'auto' (see above for this value). In this regard, it should also be mentioned that the script knows when a div having position: fixed in too high with respect to the height of the window. When this happens, the height of the div is automatically adapted and a scrollbar is added to the div. Without this feature, the bottom of the fixed div would be inaccessible.

Sliding in from left, top, right, bottom

Divs that have no values for right or bottom will slide in from the left or the top. If we want them to slide in from the right, we must give them a value for right, for instance right: 50px. If we want them to slide in from the bottom, we must give them a value for bottom, for instance bottom: 50px. In both cases, the div must have position: absolute or position: fixed (or position: sticky).

That's it.
Arie Molendijk, mesdomaines.nu.