␡
- Getting Started
- Text Zooming
- Using the Text Zoom Component
- Component Reusability
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Using the Text Zoom Component
Once the component is created, we simply add it to a directory called js and include it in the head of our HTML sample page.
Including the Text Zoom Component (index.html)
<script type="text/javascript" src="js/TextZoom.js"></script>
To create the actual functionality in our page, we need to add icons to trigger the two methods in our component. For the sake of the sample, we will simply add a + and — symbol that when clicked will trigger the appropriate method in our component. I have also floated the symbols to the right to keep them in the top-right corner of the page for quicker identity.
Using the Text Zoom Component (index.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">
<head>
<title>InformIT: Enhancing Text Readability Through Code</title>
<script type="text/javascript" src="js/TextZoom.js"></script>
</head>
<body>
<div style="width: 500px; padding: 20px; border: 1px #333 solid;">
<div style="float: right">
<a href="javascript:TextZoom.Out(’title’, ’description’);">-</a>
<a href="javascript:TextZoom.In(’title’, ’description’);">+</a>
</div>
<b id="title" style="font-size: 18px; line-height: 24px;">Enhancing Text Readability Through Code</b>
<br/><br/>
<div id="description" style="width: 500px; font-size: 11px; line-height: 18px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent nisl erat, dictum at, pulvinar in, consequat et, leo. In hendrerit enim quis tellus. Quisque nunc felis, blandit id, tincidunt sed, gravida vel, mi. Nullam in mi quis lacus placerat viverra. Etiam eros. Proin pharetra. Nam mauris neque, molestie sit amet, malesuada et, rhoncus in, nisi. Pellentesque vehicula, massa ac semper varius, nunc diam venenatis leo, et aliquam ligula erat nec nunc. Integer rhoncus convallis odio. Suspendisse eget mi. Sed eget arcu non augue iaculis mollis. Fusce nibh leo, interdum id, mattis ut, rutrum eu, orci.
<br/><br/>
Mauris lobortis velit volutpat turpis. Phasellus ac felis eu diam venenatis pharetra. Ut laoreet enim id metus. Nulla facilisi. Etiam et velit. Curabitur tortor lectus, luctus ut, pharetra sit amet, ultricies ut, mauris. Vivamus pretium. Sed ligula. Morbi laoreet vulputate mauris. Proin sem dolor, lacinia ac, imperdiet ac, vehicula et, sapien. Cras augue nisi, vestibulum id, sollicitudin vel, facilisis vel, orci. Curabitur blandit ultrices nulla. Cras eu erat. Sed non lectus. Nulla feugiat, risus non venenatis commodo, nibh felis ullamcorper dui, vel laoreet mi augue tempor ligula. Sed et nulla. Nunc euismod nunc at pede. Curabitur consectetuer arcu in augue. Morbi ipsum augue, vehicula sit amet, ultrices rutrum, lobortis eu, augue.
</div>
</div>
</body>
</html>