VirtualMV/JavaScript/Accessibility
From WikiEducator
< VirtualMV | JavaScript
Overview
|
: JS for AccessibilityBy the end of this page you will be able to:
|
Text resizing
Example 1
A small bit of JavaScript based on code from Eric Wendelin (2008)[1] that will allow a user to increase/decrease/reset the font size (I have added the normal code - MV.). If no font size is attached to the body tag a 1.0em (the default) size is created first. Note this is different than resizing the web page(using [Ctrl]+[Wheel on mouse]).
function resizeText(intSize) { if (document.body.style.fontSize == "") { document.body.style.fontSize = "1.0em"; } if (intSize == "0") { document.body.style.fontSize = "1.0em"; } else { document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (intSize * 0.2) + "em"; } }
Create three images [A^] [A] [Av]
<img id="textplus" alt="Increase text size" src="images/TextPlus.jpg" onclick="resizeText(1)" /> <img id="textnormal" alt="Normal text size" src="images/TextNormal.jpg" onclick="resizeText(0)" /> <img id="textminus" alt="Decrease text size" src="images/TextMinus.jpg" onclick="resizeText(-1)" />
Example 2
<html> <head> <title>Creating a JavaScript Zoom feature</title> <script type="text/javascript"> function fnTxtSmall() { var objZoom = document.getElementById("container").style; // note that you can't attach fontStyle to the objZoom definition objZoom.fontSize = "80%"; } </script> </head> <body> <div id="container"> <span onclick = "fnTxtSmall()">[<]</span> A > <p> click on the [<] above to reduce the font size of this page</p>p> <h2>This is a heading</h2> <p>Adding a zoom feature can make enlarging the text on a web page easy for your users</p> <p>On a touch device you could use the pinch gesture</p> <p>On a PC you can hold the ctrl key and rotate your mouse scroll</p> <p> You can flash up this heaps.. for example, add a reset and enlarge<p> </div> </body> </html>
References
- ↑ Wendelin, E. (2008) Change Text Size On Click With Javascript. Retrieved October 7, 2009 from http://davidwalsh.name/change-text-size-onclick-with-javascript
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/JavaScript/Accessibility. (2024). In WikiEducator/VirtualMV wiki. Retrieved April 24, 2024, from http:https://wikieducator.org/VirtualMV/JavaScript/Accessibility (zotero)
|
