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();
}
}

Advertisements

OCR friendly auto generated form with SAHANA


During this week I mainly dedicated most of my time to finish the development of the OCR friendly auto generated form and by Friday I managed to achieve it successfully. From the previous week’s work I had a big problem of finding a method of placing the background images within the web page when it is subjected to print mode. So I googled a lot to find a successful method, after a long search I found several methods that explained ways to place background images but most of them didn’t not showed me a possible solution that meets my requirements, and at last I found that the browsers by default hide the background images and colors when the page is subjected to the print mode and we can manually enabled that feature in the respective browser.

You can enable it as follows:

  • Firefox browser
    • Goto File > Page Setup
    • Select the tab Format & Option
    • Enable Print Background(colors & images)
  • Internet Explorer
    • Goto Tools > Internet Options
    • Select the tab Advance
    • Enable Print background colors & images under Printing option

So after finding this feature with the browsers I finished the development and currently the functionality is there 100% with the FF Web Browser and I’m experiencing minor issues with IE and with few modifications I’ll be able to get it done.

Printable OCR form

Printable OCR form


Source: http://sahana.lk

My experinces with Richard M Stallman(RMS)


The week was full of activities and I must tell you that I was so fortunate enough to meet the father of Free Software Foundation Mr. Richard M Stallman, during his first visit to Sri Lanka. I first saw him at ICTA delivering a speech, after that he had lunch with us(SAHANA team).

RMS and SAHANA team

RMS and SAHANA team

After the lunch he played us several songs which he loved. I experienced that he loved traditional music of various countries rather modern fast music tracks, and there he played us the song which he took the music for his famous free software song. He told us that he found it very hard to get used to Sri Lankan food because in this part of the world people preferred having more chillies with meals.

During his short stay he has got the chance to visit Polonnaruwa, Anuradhapura, Sigiriya and Kandy, cities which are famous among local and foreign visitors for its rich ancient values. He was very impressed about the monuments saw at Sigiriya.

On 18th Friday he attend a seminar at SLIIT, In his speech he explains the importance and benefits we can gain by using free software, specially in the fields of education and social welfareand I believe that it is a best resource for us to make use of as a developing nation. I got myself an opportunity to present the project (SAHANA) at this seminar along with Ravith. I was my first public presentation apart from the ones did at university and I was so fortunate that I got the chance to be a part of this historic event.

Sudheera me and RMS

Auto generated form to OCR module in SAHANA


SAHANA system is mainly focus on providing an infrastructure in organizing an catering to relief activities during a disaster situation. When it comes to managing and recording details of people who got affected by any of the disasters ( it could be either natural or due to human involvement), the system has a very effective mechanism to track down the details of all parties.

Last Google Summer of Code SAHANA under LSF offered challenging project ideas that fulfills some of the requirements and enhance its functionality. Out of them very important module was the Optical Character Recognition module. With that it gives the functionality to the system to update the records directly by submitting a form in the digital form. At the moment system doesn’t have a direct mechanism to output the web forms directly from the system to the user when the user clicks on File > Print. So during these days I’m researching on a method using the CSS to convert the web form directly into the format that the OCR module can read. If we look at the beauty of CSS it gives the web developer the freedom to format the web page according to output format (screen, project, handheld, etc) he/she wants. In brief I’m trying to develop the print stylesheet for the system that can directly outputs the OCR friendly form to the users.

Currently I’m experiencing some problems in find a way to include the markers at the four corners of the page which is an essential thing with OCR module because it mainly depends on those markers to locate the content to be read and use another marker in between to identify the correct layout of the page. As a way out I experiment on placing an image having four black squares on four corners as the background of ahtml div element and according to the normal convention with CSS(with printable version) it makes the background images not to visible.

Using a single stylesheet to apply CSS


Today majority of the computer users use various kinds of browser agents to access resources over the Internet and the access to it has become a must with most of the information technology related activities. When it comes to users of accessing the information we can categorize them into various groups, such as desktop users, handheld device users, etc . If we look at the users’ we can see that their preference is mainly towards versions of Internet Explorer, well it could be due to the reason it comes bundled with the operating system itself and we can see that the use of Mozilla Foundation’s Firefox browsers it gaining popularity over the past few years.

Today most of the web developers faces a common problem of applying CSS that supports most of the famous browsers, such as Mozilla Firefox, Internet Explorer, Konqueror, Opera, etc. When it comes to versions of Internet Explorer most of the time we need to use separate hacks and need to get the help of conditional comments in linking specific CSS files to the XHTML/HTML source and CSS descendant selectors methods because currently available versions of IE browsers doesn’t support some of the W3C standards. So web developers mainly use the Firefox browser as the base when applying CSS to web sites and applications.

According to a article on IERoot hack it describes a method of using theStar-HTML hack within the main stylesheet. Just after the body element in the XHTML/HTML source we must include a div element having a unique ID, say for example ‘ie_root_hack’ and rest of the content comes within the div element having the id=’ie_root_hack’ and always remember that it reads by IE browsers only as shown in the following example.

<html>

<head>
<title> Star-HTML hack to answer </title>
</head>

<body>

<!– [ if IE ] –>
<div id=”ie_root_hack”>
<!– [ endif ] –>

<div id=”content”>
<p>Rest of the page related source goes within this block</p>
</div>

<!– [ if IE ] –>
</div> <!– /#ie_root_hack–>
<!– [ endif ] –>

</body>

</html>

« Older entries