Bits & Bytes

Posts Tagged ‘programming’

Clipping in JavaScript with Absolute Positioning

If you program games in JavaScript, you will often find it necessary to clip the region of an image that lies outside of the viewport. The solution is easy, but not obvious. The elements in a game are generally positioned using the “absolute” positioning designation: For example, the line qrMadonna.style.position = “absolute”; in the program below sets the positioning that the image of the Madonna, qrMadonna, refers to to absolute. (For an explanation of absolute positioning, see our post on positioning elements.)

Below, we have the code for an HTML file and a JavaScript file. The HTML file is essentially blank; it is simply used to call the JavaScript file, “ClipImage.js” and execute the code.

The file “ClipImage.js” contains four variables that refer to four nested HTML elements. The outermost element is the body; this element was created in the HTML file and is retrieved via a call to the getElementsByTagName() function, along with the array operator. After this, we create a div called qrOuterDiv to hold everything; this outer div is created to allow the code inside to flow normally, since it does not have absolute positioning (Otherwise, it is not needed.) The next element is qrInnerDiv, and it contains the image element that we are clipping; it is necessary that this element have its position as “absolute” and its overflow as “hidden”. Finally, the image element qrImage is 200×149 and is positioned at (125, 100) inside of the div, which is 300×200. So, the image hangs outside of the div by 25 and 49 pixels, respectively.

To illustrate this, we have an resulting image of what this clipping looks like below. The faint region that lies outside the dark gray rectangle is actually clipped. We show this region so that you can see what has been clipped. We also have the original image of the “Madonna and Child with Cherubs” that we used in the example, at the top of the article.

HTML File: “ClipImage.html”

<!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> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>XoaX.net's Javascript Clipping Example</title> </head> <body> <script type="text/javascript" src="ClipImage.js"></script> </body> </html>

JavaScript File: “ClipImage.js”

var qrBody; var qrOuterDiv; var qrInnerDiv; var qrImage;


function PageLoaded() {

    // Get the main body element, first/only element of array

    qrBody = document.getElementsByTagName("body")[0];
    qrOuterDiv = document.createElement("div");

    qrBody.appendChild(qrOuterDiv);
    qrInnerDiv = document.createElement("div");

    qrInnerDiv.style.backgroundColor = "#444444";

    qrInnerDiv.style.width = "300px";

    qrInnerDiv.style.height = "200px";

    qrInnerDiv.style.position = "absolute";

    qrInnerDiv.style.overflow = "hidden";

    qrOuterDiv.appendChild(qrInnerDiv);
    qrImage = document.createElement("img");

    qrImage.src = "MadonnaAndChildWithCherubs.jpg";

    qrImage.style.position = "absolute";

    qrImage.style.left = "125px";

    qrImage.style.top = "100px";

    qrInnerDiv.appendChild(qrImage);

}

window.onload = PageLoaded;

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>

</div>

Categories

Recent Posts