Hack used for indentifying versions of IE


Last month I had to find a way to place content in the IE based browser versions when the content’s width exceeds the clients viewable width, such as when you have a table exceeding the viewable width of the client and normally what should happen is it should adds the horizontal scroll bar where user can scroll to view the content, but with our system the IE shifted the whole content down leaving a blank space on the top. So I had to apply a small hack using Javascript to keep the content in its normal location by resizing it to match the width. And this acted differently with IE 6 and IE 7, so here is the code I used

function resize_wrapper_ie6(){
var result=document.getElementById('result');
var content=document.getElementById('content');
var wrapper=document.getElementById('wrapper');

if(result){
if(document.documentElement.clientWidth < document.body.clientWidth)
wrapper.style.width=(document.body.clientWidth+200)+"px";
}
if(content){
if(document.documentElement.clientWidth < document.body.clientWidth)
wrapper.style.width=(document.body.clientWidth+200)+"px";
}
}

function resize_wrapper_ie7(){
var map=document.getElementById('map');
var wrapper=document.getElementById('wrapper');
var table = document.getElementById('result').getElementsByTagName('table')[0];
if(table){
if((document.documentElement.clientWidth) > (document.body.clientWidth -205)){
wrapper.style.width=(document.documentElement.clientWidth+210)+"px";
}
}
if(map){
if((document.documentElement.clientWidth) > (document.body.clientWidth -205)){
wrapper.style.width=(document.documentElement.clientWidth+210)+"px";}
}
}

When trying to identify the exact browser version of IE I used the normal javascript method navigator.userAgent and it gave Mozilla/4.0 (compatible; MSIE 6.0; Windows NT; DigExt) so I used the following method to extract the exact version number by parsing the value passed from the navigator.userAgent


function
getIEVersion(versionString){
return parseFloat(versionString.substr(30,3));
}

Here is the code I used to identify the specific versions of IE

function ie_hack_for_large_tables(){

var browser_name=navigator.appName;
var agent = navigator.userAgent;
if ((browser_name=="Microsoft Internet Explorer") && ( 7 == getIEVersion(agent))){
resize_wrapper_ie7();
}
if ((browser_name=="Microsoft Internet Explorer") && ( 6 == getIEVersion(agent) )){
resize_wrapper_ie6();
}
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: