Here we will implement in a very small way. The solution I have provided is not complete, but you need to take it forward and modify if you need to use it in blogs or sites. For experiencing a good implementation of Section 508 check out this.
The Requirement:
As a simple statement: Provide keyboard shortcuts to increase and decrease font size in a browser. Usually sites will have button where users can select the size, font
and even colour of the page’s text. In this work, we will focus on to provide button to increase and decrease font size and also provide keyboard shortcut.Why Keyboard shortcut?
Until recently, web application never supported keyboard shortcuts. They have become famous through Gmail and Google Reader and it has been success ever since. Providing shortcuts to you web applications and web pages can improve the productivity of the user. It can also help in quick navigation. But the problem is providing a “standard” set of shortcuts which will work on all browsers. For example, you can increase the font size in Firefox with “Ctrl + Plus”, but this is not applicable in IE.
Our implementation:
We will have a non-standard keyboard shortcut to increase and decrease the font in our implementation. :( (I can’t help it!). To handle keyboard events through javascript you will find many libraries available on web. I will be using the openjs library and the reason? It’s a simple, single file library. To keep your implementation simple and easy to handle we will have the styles, script and HTML in one file.
To start with, we will be using CSS to apply style to all content in your page. Let say we have many styles, but what we need is the list of CSS class which needs to be updated when user request to increase or decrease font size. We will update all these CSS styles through JavaScript when user click on the appropriate button or hit the keyboard shortcut. To handle keyboard, we will initialize listeners in an init method.
shortcut.add("Ctrl+Shift+A",increment);
shortcut.add("Ctrl+Shift+Z",decrement);This method will be called on onLoad event of the web page. We will track Ctrl+Shift+A and Ctrl+Shift+Z keystrokes and the appropriate methods will be called (increment and decrement).To modify the font attributes, we need to search through styleSheets object list of a document. I have created my own method to do so.
Given a CSS class name, the method traverse through the styleSheets objects and return the style object. In this example we will modify only one style, but if you need to modify multiple CSS styles, you will have to stores these names in an array.
function getStyleByName(styleName) {
for (i=0; i<document.styleSheets.length; i++) {
if (document.styleSheets[i].cssRules) {
for (j=0;j<document.styleSheets[i].cssRules.length; j++) {
if (document.styleSheets[i].cssRules[j].selectorText == styleName) {
return document.styleSheets[i].cssRules[j].style;
}
}
} else {
for (j=0;j<document.styleSheets[i].rules.length; j++) {
if (document.styleSheets[i].rules[j].selectorText == styleName) {
return document.styleSheets[i].rules[j].style;
}
}
}
}
}
Now have a look at the complete code:
<html>So, there you go! Remember, this is NOT complete and you can take it forward.
<head>
<style>
.divStyle {
color: red;
}
.newStyle {
font-weight: bold;
}
</style>
<script type="text/javascript" src="shortcuts.js"></script>
<script type="text/javascript">
//<![CDATA[
function getStyleByName(styleName) {
for (i=0; i<document.styleSheets.length; i++) {
if (document.styleSheets[i].cssRules) {
for (j=0;j<document.styleSheets[i].cssRules.length; j++) {
if (document.styleSheets[i].cssRules[j].selectorText == styleName) {
return document.styleSheets[i].cssRules[j].style;
}
}
} else {
for (j=0;j<document.styleSheets[i].rules.length; j++) {
if (document.styleSheets[i].rules[j].selectorText == styleName) {
return document.styleSheets[i].rules[j].style;
}
}
}
}
}
function testStyleSheet() {
var styleObj = getStyleByName(".divStyle");
if(styleObj) {
alert('style.font-size: ' + styleObj.fontSize);
} else {
alert('style not found.');
}
}
function increment() {
var styleObj = getStyleByName(".divStyle");
if(styleObj) {
styleObj.fontSize = "20px";
} else {
alert('style not found.');
}
}
function decrement() {
var styleObj = getStyleByName(".divStyle");
if(styleObj) {
styleObj.fontSize = "10px";
} else {
alert('style not found.');
}
}
function init() {
shortcut.add("Ctrl+Shift+A",increment);
shortcut.add("Ctrl+Shift+Z",decrement);
}
//]]>
</script>
</head>
<body onLoad="init()">
<input type="submit" onclick="increment()" value="Increment Size"/>
<input type="submit" onclick="decrement()" value="Decrement Size"/>
<input type="submit" onclick="testStyleSheet()" value="Test StyleSheet"/>
<hr/>
<div class="divStyle">A sample text</div>
<div> Without the disStyle class attched to the DIV tag. the fonts will not increment and decrement. The big trouble is the key combination in mozilla.
http://www.openjs.com/scripts/events/keyboard_shortcuts/
</div>
<div class="divStyle newStyle"> This is a test </div>
</body>
</html>
Keep programming :)
1 comment :
Thank you! Nicely summed up. I ended up putting sth like this in my page:
<a href="#" onclick="if (document.styleSheets[0].cssRules) {document.styleSheets[0].cssRules[0].style.fontSize = '10px'} else {document.styleSheets[0].rules[0].style.fontSize = '10px'}">Smaller</a>
because the first rule in my first css file is the body rule, where i set the font-size: 12px
all other font-sizes are in %
Post a Comment