Finding an Object's Visible Area The width and height of an object tell you the maximum area of the element (see "Determining an Object's Properties" earlier in this chapter). When an object is clipped (see "Setting the Visible Area of an Element" in Chapter 8), the maximum area is cut down, and you can view only part of the object's total visible area. Using JavaScript, you can find not only the width and height of the visible area, but also the top, left, bottom, and right borders of the clipping region. However, unlike other CSS values, the clip values are in an array. In this example (Figures 14.11 and 14.12), the object has been clipped. Clicking one of the controls at the top will produce an alert showing the value for that clip dimension, either extracted from the array or calculated from array values. Figure 14.11. The clipped element, with controls above to find its clipping properties. 
Figure 14.12. An alert appears, telling us the location of the top border of the clip region. 
To find the visible area and borders of an object: | | 1. | function setClip(objectID, clipTop, clipRight, clipBottom, clipLeft) {...}
Add the setClip() function to your JavaScript (Code 14.7). This function sets the initial clip region of objects when the page first loads, with values the same as those set in the CSS.
Code 14.7. The functions findClipTop(), findClipRight(), findClipBottom(), findClipLeft(), findClipWidth(), and findClipHeight() find the clip region and borders of an individual object in the window.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD  /xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML & Ajax | Finding an Objects Clipped Area</title> <script type="text/javascript"> function setClip(objectID, clipTop, clipRight, clipBottom, clipLeft) { var object = document.getElementById(objectID); object.style.clip = 'rect(' + clipTop + 'px ' + clipRight + 'px ' + clipBottom + 'px ' + clipLeft +'px)'; } function findClipTop(objectID) { var object = document.getElementById(objectID); if (object.style.clip !=null) { var clip = findClipArray(object.style.clip); return (clip[0]) ; } return (null); } function findClipRight(objectID) { var object = document.getElementById(objectID); if (object.style.clip !=null) { var clip = findClipArray(object.style.clip); return (clip[1]) ; } return (null); } function findClipBottom(objectID) { var object = document.getElementById(objectID); if (object.style.clip !=null) { var clip = findClipArray(object.style.clip); return (clip[2]) ; } return (null); } function findClipLeft(objectID) { var object = document.getElementById(objectID); if (object.style.clip !=null) { var clip = findClipArray(object.style.clip); return (clip[3]) ; } return (null); } function findClipWidth(objectID) { var object = document.getElementById(objectID); if (object.style.clip !=null) { var clip = findClipArray(object.style.clip); return (clip[1] - clip[3]) ; } return (null); } function findClipHeight(objectID) { var object = document.getElementById(objectID); if (object.style.clip !=null) { var clip = findClipArray(object.style.clip); return (clip[2] - clip[0]) ; } return (null); } function findClipArray(clipStr) { var clip = new Array(); var i; i = clipStr.indexOf('('); clip[0] = parseInt(clipStr.substring(i + 1, clipStr.length), 10); i = clipStr.indexOf(' ', i + 1); clip[1] = parseInt(clipStr.substring(i + 1, clipStr.length), 10); i = clipStr.indexOf(' ', i + 1); clip[2] = parseInt(clipStr.substring(i + 1, clipStr.length), 10); i = clipStr.indexOf(' ', i + 1); clip[3] = parseInt(clipStr.substring(i + 1, clipStr.length), 10); return clip; } </script> <style type="text/css" media="screen"> .dropBox { text-align: right; padding: 4px; background-color: #FFFFFF; border: 2px solid #f00; cursor: pointer; } #object1 { position: absolute; top: 60px; left: 0; overflow: hidden; clip: rect(15px 350px 195px 50px) } </style> </head> <body onload="setClip('object1',15,350,195,50)"> Clip Dimensions || <a onclick="alert('Clip on Top: ' + findClipTop('object1') + 'px')" href="#">Top </a>| <a onclick="alert('Clip on Left: ' + findClipLeft('object1') + 'px')" href="#">Left </a>| <a onclick="alert('Clip on Bottom: ' + findClipBottom('object1') + 'px')" href="#">Bottom </a>| <a onclick="alert('Clip on Right: ' + findClipRight('object1') + 'px')" href="#">Right </a>|| <a onclick="alert('Clip Width: ' + findClipWidth('object1') + 'px')" href="#">Width </a>| <a onclick="alert('Clip Height: ' + findClipHeight('object1') + 'px')" href="#">Height </a> <div > <img src="/books/3/292/1/html/2/alice31.gif" height="480" width="379" border="0" /></div> </body></html>
|
| | | 2. | function findClipTop(objectID) {...}
Add these functions to your JavaScript: findClipTop(), findClipRight(), findClipBottom(), and findClipLeft().
All these functions do the same thing on different sides of the object. They use the ID of the object to be addressedpassed to the function as the variable objectIDto find the object on the Web page. They use the findClipArray() function to determine the clip array and then access that array by using 0, 1, 2, 3 for top, right, bottom, and left, respectively.
| 3. | function findClipWidth(objectID) {...}
Add the functions findClipWidth() and findClipHeight() to your JavaScript.
These functions use the ID of the object to be addressedpassed to them as the variable objectIDto find the object. The functions then use the object to capture the visible area's height and width by subtracting the top from the bottom value for the height or the left from the right values for the width.
| 4. | function findClipArray(str) {...}
Add the findClipArray() function to your JavaScript.
This function translates the string of characters used to store the four clipping sides into an array of numbers, with each number in the array corresponding to a clip dimension.
| 5. | #object1 {...}
Set up the CSS rules for your objects with position and visibility properties. In your HTML you will define <div> tag, using this object as its ID.
| | | 6. | onload="setClip(...);"
In the <body> tag, use the setClip() function to initialize the clip area of all the object(s).
| 7. | onclick="alert(...);"
Trigger the functions in Steps 3 and 4 from an event handler.
|
 Tips
Mozilla browsers can also access the clipping values using the clip.height, clip.width, clip.top, clip.left, clip.bottom, and clip.right objects to directly access the values. However, since Microsoft Internet Explorer does not support this, the array method described here is preferred. Like other CSS visibility properties, browsers can't easily read the clipping values until they've been set dynamically. I'll show you a relatively easy workaround for this problem laterchanging the clipping area (see "Changing an Object's Visible Area" in Chapter 16). An alternate (though no less complex) method for finding the clip area of any object without first setting it using JavaScript is presented in "Finding a Style Property's Value" in Chapter 18.
|
