Bits & Bytes

Posts Tagged ‘web’

Handling Overflow in HTML Block Elements with CSS

The overflow property is used to specify how a block element handles content that is too large to fit inside it. There are five possible values for the overflow: visible, hidden, scroll, auto, and inherit. Inherit specifies that the element is to have the same value as the element it is contained in. The other values are explained and demonstrated below.

The code for the first example is shown here with the overflow specification in bold:

<div style="background-color:#DDDDDD; width:300px; height:160px; padding:10px; border:5px solid #444444; margin:30px; overflow:visible;">


<p style="width:300px;">(Proverbs 30:11-14) "There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men."</p>

</div>

visible

The value visible is the default that is used when no value is specified, and it means that all of the content is displayed whether or not it fits inside the element. As shown below, this can look sloppy if you are not careful.

(Proverbs 30:11-14) “There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men.”

hidden

Using the value hidden, fixes the problem of the sloppy look and it forces all of the content outside the element to be clipped. Unfortunately, this can make some of the content unreadable.

scroll

Setting the overflow value to scroll, forces the element to add scroll bars that allow the user to scroll through all of the content. This makes it possible for the user to see all of the content even if it does not fit inside the element. Unfortunately, the scroll bars are displayed whether we need them or not. Notice that the horizontal scroll is not needed in this example. However, the horizontal scroll bar is still there taking up space.

auto

The final setting, auto, adds scroll bars only when and where they are needed. On the left, we have an element that has been stretched so that it can fit all of the content without needing scroll bars. On the right, we have a shorter block that requires only a vertical scroll bar. Both of these are specified as auto.

Creating a Simple Javascript Animation Using Recursion

The animation that we create in this example is a simple progress bar. Above, you can see a light gray rectangle with a darker gray rectangle inside it. The darker gray bar is the progress bar that moves from left to right across the screen.

The code for this animation is below. You can copy code into an empty file with a .html extension or just download the HTML file using this link. Just right-click that link and left-click “Save Link As…” and select a location to save it to. Then double-click the file to open it with a browser.

As you can see in the code below, we define two styles: animbkgd and animbar. These are used to create div elements for the background and the progress bar, respectively. The div elements are created inside the body tag near the bottom of the file.

At the bottom of the head section, we have script tags to define the Javascript code section. We begin by defining three variables: qpBkdg, qpBar, and iWidth. The first two are used to refer to background and progress bar div sections and are set inside the Initialize() function. The third variable keeps track of the width of the progress bar.

The animation is started after the page is loaded with code

window.onload = Initialize;

that sets the Initialize() function to be the callback function for when the page loads.

When Initialize() is called, is initializes the two variables and then calls the animation loop function Loop(). The Loop() function updates the width variables and then sets itself to be called again in 20 milliseconds. That is the effect of the call

setTimeout(Loop,20);

The setTimeout() function calls a function after a specified period of time. Here, it is set to call Loop() after 20 milliseconds. So, the code creates a recursive loop where Loop() is called every 20 milliseconds to create the animation.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <title>XoaX.net's Javascript Recusive Animation Example</title>
<style type="text/css">

#animbkgd {

    position:absolute;

    width: 480px;

    height: 50px;

    background:#aaaaaa;

    margin: 30px;

}
#animbar {

    position:absolute;

    width: 0px;

    height: 20px;

    background:#000000;

    left: 0px;

    top: 20px;

}

</style>
<script type="text/javascript">

/*<![CDATA[*/

var qpBkdg = null;

var qpBar = null;

var iWidth = 0;
function Loop() {

    qpBar.style.width = iWidth+'px';

    iWidth = ((iWidth + 1) % 480);

    setTimeout(Loop,20);

}
function Initialize() {

    qpBkdg = document.getElementById('animbkgd');

    qpBar = document.getElementById('animbar');

    Loop();

}
window.onload = Initialize;

/*]]>*/

</script>

</head>
<body>
<div id="animbkgd">

    <div id="animbar">

    </div>

</div>

</body> </html>

Centering HTML Elements with CSS Absolute Positioning

Here, we have a medium gray, outer div element with a lighter gray div inside it. The inner div is 300 pixels by 250 pixels and has a 5 pixel wide border with a padding width of 10 pixels. So, the inner div is 2*5 + 2*10 + 300 = 330 pixels wide and 2*5 + 2*10 + 250 = 280 pixels high. The outer div has a 30 pixel margin around it for presentation.

(Proverbs 20:1-4) Wine is a luxurious thing, and drunkenness riotous: whosoever is delighted therewith shall not be wise. As the roaring of a lion, so also is the dread of a king: he that provoketh him, sinneth against his own soul. It is an honour for a man to separate himself from quarrels: but all fools are meddling with reproaches. Because of the cold the sluggard would not plough: he shall beg therefore in the summer, and it shall not be given him.

To center a block element both vertically and horizontally within another element, we use negative margins. However, first we set the left and top positions at 50%. This places the upper-left corner of the inner div in the center of the outer div. To correct this placement and put the center of the inner div in the center of the outer div, we use a negative margin that is half the size of the inner div in both the horizontal and vertical directions. These values are 330/2 = 165 and 280/2 = 140, respectively. So, the left and top margins are set to -165px and -140px. The HTML and CSS to create the effect above is shown below.

<div style="position:absolute; width:480px; height:360px; background-color:#aaaaaa; margin:30px;">


<div style="position:absolute; background-color:#DDDDDD; width:300px; height:250px; padding:10px; border:5px solid #444444; left:50%; top:50%; margin-left:-165px; margin-top:-140px;">
<p>(Proverbs 20:1-4) Wine is a luxurious thing, and drunkenness riotous: whosoever is delighted therewith shall not be wise. As the roaring of a lion, so also is the dread of a king: he that provoketh him, sinneth against his own soul. It is an honour for a man to separate himself from quarrels: but all fools are meddling with reproaches. Because of the cold the sluggard would not plough: he shall beg therefore in the summer, and it shall not be given him. </p>
</div>