0

I am having a requirement where user can increase (A+) or decrease (A-) using a link or button click to effect the font size of entire content in a SharePoint page. I am using SharePoint Online (Office365) for POC. I have tried using content editor webpart with html and js as:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('button').click(function()
{
var theElement = $("div").css("font-size");
var textSize = parseFloat(theElement, 10);
var unitOfMeasurement = theElement.slice(-2);

if ( (this).id == "largerTextLink")
{
textSize += 2;
}
else
{
textSize -= 2;
};

$('div').css("font-size", textSize + unitOfMeasurement);

return false;
});
});
</script>
<body>
<div class="font-button">
<button id="smallerTextLink">Smaller Text</button>

<button id="largerTextLink">Larger Text</button>
</div>
</body>

but the above code is not reflecting anything and just the page is refreshed. As a junior developer I don't know whether I am going in a right path. Is there any way or alternative to solve this requirement?

vrajb55
  • 131
  • 11

1 Answers1

0

You could use em's for this.

Here is a good answer/example on a similar question: https://stackoverflow.com/a/16461139/3021549

dylanvdb
  • 106
  • 18
  • Thanks for the reply. My question is related to SharePoint. Can I use content editor webpart or is there any other way to use the javascript or css you mentioned in the link? – vrajb55 Feb 16 '18 at 12:14
  • I'm not that familiar with custom SharePoint pages sorry. I thought you could do something like specifying the `body` `font-size` as `1.0em`, `#smallerTextLink` as `1.5em` for example and increment that `font-size` with javascript. Here is an example if that helps: http://jsfiddle.net/km4wnm90/6/ – dylanvdb Feb 16 '18 at 13:01