Has anyone implemented an ‘increase, decrease text size’ java script function in a Sharepoint web site?
I’m attempting it using the getElementByTagName and getElementByID functions but they don’t seem to be doing much and behaving very oddly - by not selecting the correct tag at all.
All the examples on the web have really simple markup and css, and sharepoint being sharepoint this is not the case at all.
It depends on a few things. Makesure you are running the javascript after the dom has loaded, either using a callback function for the window.load, as a triggered event from a target or placing the code at the bottom of the document which will be run immediately.
How are you applying the increase to font size?
for(var obj in document.getElementsByTagName("div")){
document.getElementsByTagName("div")[obj].style.fontSize = "16px";
}
or
document.getElementById("youeElementID").style.fontSize = "16px";
For example I have drummed up a quick html example. Please run to see the effects
<html>
<head>
<title></title>
<script type="text/javascript">
function useByTag(){
for(var i = 0; i < document.getElementsByTagName("div").length; i++){
document.getElementsByTagName("div")[i].style.fontSize = "22px";
}
}
function useByID(){
document.getElementById("Element1").style.fontSize = "18px";
}
</script>
</head>
<body>
<a href="javascript:useByTag()">Test ByTag</a>
<a href="javascript:useByID()">Test ByID</a>
<br/>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div>Some text</div>
<div id="Element1">Some text</a>
</body>
</html>