Introduction Sharepoint Text Size zoom functionality is useful in organization for low resolution projector.
Here i have mentions step to integrate with sharepoint site. (1) Open Sharepoint Site in sharepoint Designer . (2) Open _catalogs folder and create new folder "JS" (3) Add new javascript into that rename as TextSize.js (4) Open Javascript and add below code into js and save it.
function FontSizeChange_SetAllDocumentFontSize(size)
{
FontSizeChange_ChangeAllElements(document, size);
for(var i = 0; i < document.frames.length; i++)
{
FontSizeChange_ChangeAllElements(document.frames[i].document, size)
}
}
function FontSizeChange_RestoreDefault()
{
FontSizeChange_ReloadWindow(true);
}
function FontSizeChange_ReloadWindow(refresh)
{
if(refresh)
{
var url = window.location.href;
if(url.indexOf("#") == url.length - 1)
{
window.location.href = url.substring(0, url.length - 1)
}
else
{
window.location.href = url;
}
}
else
{
window.location.reload();
}
}
function FontSizeChange_ChangeAllElements(doc, size)
{
FontSizeChange_SetFontSizeByTagName(doc, "div", size);
FontSizeChange_SetFontSizeByTagName(doc, "span", size);
FontSizeChange_SetFontSizeByTagName(doc, "input", size);
FontSizeChange_SetFontSizeByTagName(doc, "a", size);
FontSizeChange_SetFontSizeByTagName(doc, "td", size);
FontSizeChange_SetFontSizeByTagName(doc, "th", size);
FontSizeChange_SetFontSizeByTagName(doc, "select", size);
FontSizeChange_SetFontSizeByTagName(doc, "font", size);
FontSizeChange_SetFontSizeByTagName(doc, "textarea", size);
FontSizeChange_SetFontSizeByTagName(doc, "IE:MENUITEM", size);
}
function FontSizeChange_Increase()
{
var font=document.getElementById('txtFont').value;
if(font <20)
{
document.getElementById('txtFont').value=parseInt(document.getElementById('txtFont').value) + 1;
}
var fontSize = font.toString() + "px";
FontSizeChange_SetFontSize(fontSize);
}
function FontSizeChange_SetFontSize(size)
{
FontSizeChange_SetAllDocumentFontSize(size);
}
function FontSizeChange_Decrease()
{
var font=document.getElementById('txtFont').value;
if(font > 8)
{
document.getElementById('txtFont').value=parseInt(document.getElementById('txtFont').value) - 1;
}
var fontSize = font.toString() + "px";
FontSizeChange_SetFontSize(fontSize);
}
function FontSizeChange_SetFontSizeByTagName(doc, tag, size)
{
var elements = doc.getElementsByTagName(tag);
for(var i = 0; i < elements.length; i ++)
{
elements[i].style.fontSize = size;
}
}
(5) Open Master page and add below script. (6) Also add below code into master page top corner. <a title="Decrease Text Size"></a>
<a title="Default Text Size"></a>
<a title="Increase Text Size"></a>
<input id="txtfont" value="12" type="hidden" />
Add image as per your requirement.After complete this procedure, feature is look like below. That'a all , thank you for reading and your time.
|