Friday, June 26, 2009

Free - SharePoint Text Size Zoom Feature

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.

<script language="javascript" src="../JS/TextSize.js" type="text/javascript"></script>

(6) Also add below code into master page top corner.

<a title="Decrease Text Size" href="javascript:FontSizeChange_Decrease();"><asp:image runat="server" ID="imgdecrease" ImageUrl="_layouts/IMAGES/_size_small.gif" ></asp:image></a>

<a title="Default Text Size" href="javascript:FontSizeChange_RestoreDefault()"><asp:Image ID="imgdefault" runat="server" ImageUrl="_layouts/IMAGES/_size_medium.gif"></asp:Image></a>

<a title="Increase Text Size" href="javascript:FontSizeChange_Increase();"><asp:Image ID="imgincrease" runat="server" ImageUrl="_layouts/IMAGES/font_size_large.gif" ></asp:Image></a>

<input id="txtfont" type="hidden" value="12" >


Add image as per your requirement.

After complete this procedure, feature is look like below.






Cheers it and enjoy it.