Adding Mutiple iOS Homescreen icons for Your Sharepoint Mobile Website using Javascript

Posted by on Oct 8, 2013 in Mobile, Web | No Comments
Adding Mutiple iOS Homescreen icons for Your Sharepoint Mobile Website using Javascript

Here is a quick JavaScript / Jquery snippet that you can use to have multiple iOS (iphone, iPad) Home screen icons for different areas of you website. Our clients website which is created in Sharepoint 2010 has been re-designed for mobile with a new responsive layout. Now many areas of the site perform like Mobile applications. The business wanted to customei

  • iPhone and iPod Touch (Retina Display)
    Icon size: 114px by 114px
  • iPhone and iPod Touch (None Retina Display)
    Icon size: 57px by 57px
  • iPad (Retina Display)
    Icon size: 144px by 144px
  • iPad (None Retina Display)
    Icon size: 72px by 72px

Add this to you MasterPage inside the <HEAD> Tag


<%-- Add icons for Mobile and Tablets --%>

 


jQuery(document).ready(function () {
jQuery('.ms-WPHeaderTd').removeAttr('title');
repositionColumns();

/*Set the Home Column’s height but not in Edit Mode*/
if (jQuery(‘.ms-SPZone’).length === 0)
setEqualHeight(jQuery(‘.hcf-Columns-Home .hcf-Column’));

//Add the Collapsible behavior to the site but not in Edit mode
if ((jQuery(‘.hcf-Collapsible’).length > 0) &&
(jQuery(‘.ms-formfieldvaluecontainer’).length === 0)) {
Collapsible(true);
} else {
Collapsible(false);
}

/* Fixes the Fixes the Energy Services highlight bug */
if (window.location.pathname.substr(0, 26) === “/AlternativeEnergyServices”) {
$(“.menu-option4 .menu-item-text”).addClass(“current”);
}

/* changes apple icon for Home Energy Calculator */
if (window.location.pathname.substr(0, 30) === “/Rebates/HomeEnergyCalculator/”) {
$(“link[rel='apple-touch-icon'][sizes='57x57']“).attr(“href”, “/_layouts/images/fortisbc.branding/icons/calculator/apple-icon-57×57.png”);
$(“link[rel='apple-touch-icon'][sizes='72x72']“).attr(“href”, “/_layouts/images/fortisbc.branding/icons/calculator/apple-icon-72×72.png”);
$(“link[rel='apple-touch-icon'][sizes='114x114']“).attr(“href”, “/_layouts/images/fortisbc.branding/icons/calculator/apple-icon-114×114.png”);
$(“link[rel='apple-touch-icon'][sizes='144x144']“).attr(“href”, “/_layouts/images/fortisbc.branding/icons/calculator/apple-icon-144×144.png”);
}

});

 

Leave a Reply