Hide a Web Part depending on the Web Browser version 

In this blog post I'm going to explain how to hide a Web Part depending on the browser version using a simple JavaScript.Some SharePoint users use IE7 as their web browser. Sometimes they face difficulties of viewing certain web parts properly. 

This blog post is relevant to a project which I did. The Bamboo Solutions World Clock & Weather Web Part allows users to display local time and weather for selected major cities around the globe.SharePoint websites support third party web parts, by adding the Bamboo Solutions World Clock & Weather Web Part  to a web page it doesn't display properly in IE7 browser. According to the client's requirement they need to view the World Clock & Weather Web Part properly in IE7 as well, but in this blog I'm hoping to explain how to hide a particular Web Part depending on the users browser type. In this blog I have hidden the  World Clock & Weather Web Part in IE7 browser.

The process is very simple. First of all you need to find the ID of the Web Part which you wish to hide. You can find it by viewing the source code of the page. Then you should write a simple JavaScript as shown below to hide that web part depending on the web browser. ( Note that the 'wepart_world_clock_ie' is the div ID which the web part contains)

<script type="text/javascript">


_spBodyOnLoadFunctionNames.push("hide"); 


function getInternetExplorerVersion()
    // Returns the version of Windows Internet Explorer or a -1
    // (indicating the use of another browser).
    {
        var rv = -1; // Return value assumes failure.
        if (navigator.appName == 'Microsoft Internet Explorer')
           {
            var ua = navigator.userAgent;
            var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
            if (re.exec(ua) != null)
             rv = parseFloat(RegExp.$1);
  }
else
 {rv = -1;}
return rv;
   }


function hide() { 
var x = getInternetExplorerVersion();
if(document.getElementById("webpart_world_clock_ie") != null) {


if(x <= 7.0){ 
document.getElementById("webpart_world_clock_ie").style.display ='none';
 }
if(x == -1){
document.getElementById("webpart_world_clock_ie").style.display ='block';
}


if(x >= 8.0) {
document.getElementById("webpart_world_clock_ie").style.display ='block';
}
}
}
</script>

Then you have to upload the JavaScript file. I have uploaded the file in Scripts folder inside the Style Library.(Go to Site Actions and then select Site Settings and then choose Style Library under the Libraries)

                             

After uploading the file, get the path of that JavaScript file (Right click the file and select Copy Shortcut).Make sure that you check in and publish the JavaScript file which you have uploaded.

Then you have to create a Content Editor Web Part. In order to do it go to Site Actions and then select Edit Page. Then add a Web Part. Select a Content Editor Web Part under the Media and Content category.

                     

Then right click on the Content Editor Web Part and select Edit Web Part. 

                 

Then add the path of the JavaScript file to the Content Link

                           

Then select the Appearance and select 'None' as the Chrome Type. In Layout select the 'Hidden' check-box.

·   

            

Finally apply the changes and Save.

Now if you open the page in IE7 browser you will not see the Web Part.