1

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.

Rob
  • 1,688
  • 4
  • 30
  • 43

1 Answers1

1

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>
REA_ANDREW
  • 10,666
  • 8
  • 48
  • 71
  • Thanks for replying, this example work fine, however when you apply it to a sharepoint page it doesn't seem to do anything. I think there are so many overriding styles applied after the div tag that the font increase is over-ridden entirely. – Rob Jul 24 '09 at 12:09
  • you can override any css class simply bt font-size:16px!important; So using the above try this: document.getElementById("Element1").style.fontSize = "18px!important"; Strange syntax if you have not seen it before, but that is its purpose. This will override any overdies as it where – REA_ANDREW Jul 24 '09 at 12:43