Vishal Kothari

Recently I had to show Videos & Images in a Lightbox. A year back I had shown Videos with Lightbox using FancyBox, but that was not a very clean approach. So this time I decided not to use that & try something better.

I found out about Videobox. It is built only to show Videos in a lightbox. I tweaked it to also show images. It was working fine until I tested it in IE 8. Later I found out that this is an outdated lightbox application & the last known updated to it was in 2007. When I heard this, I abandoned it at that very moment.

The next I found was Shadowbox.js. The integration was very simple & at the same time, compatible across all browsers. It was up & running in 5 mins. Wow! Along with a free version, it also has a commercial license.

Blogging after almost 10 months…Whew…long time!

Today I was trying to resolve an issue wherein an image was being displayed dynamically, but it wasn’t visible in it’s proper width & height only in IE 8.  The height & width were being set by:

img.setAttribute(”width”,”50px”);

img.setAttribute(”height”,”50px”);

It didn’t take much time to resolve this issue. The issue was that IE 8 (Not sure of other versions) didn’t like the above method of setting the width & height. Instead, I had to use the below:

img.style.width = “50px”;

img.style.height = “50px”;

This worked like a charm in all browsers.

Problems with Internet Explorer don’t seem to have an end…Recently I came across a few problems while using IE 6 & a few friends told me to “Screw that” and move on to IE 8 as it is much like Firefox with an inbuilt debugging tool & ofcourse with lesser issues than IE 6. Trusting them, I did move to IE 8.

But one problem that was persistent across both IE 6 & IE 8 was a simple AJAX functionality that used to work in Firefox but not in IE 6 or IE 8.

I discovered that the AJAX call was working fine & the response was also being returned same in both browsers, but the issue was while updating the element after getting the response. The element in question here was a table i.e. I had code like:

<table id=’id_to_update’>

It was giving me an error “Unknown runtime error”.

I was trying to find a solution to this & found quite a few options like changing the case of XMLHTTP to XMLHttp, of trying to create an ActiveXObject before creating an XMLHTTP object. I tried all that, but didn’t work. Later I found that in IE, it is not possible to update a ‘table’ content through ‘innerHTML’. It worked only after I put the table inside a ‘div’, so the code was:

<div id=’id_to_update’>

<table>….</table>

Where the “<table>, </table>” part was the one that was being updated through AJAX.

Recently I was working on a piece of code where the requirement was to create buttons dynamically on click of another link/button. The code was:

var button1=document.createElement(’INPUT’);
button1.name =’button1_name’;
button1.setAttribute(”type”,”button”);
button1.setAttribute(”id”,”button1_id”);
button1.setAttribute(”value”,”Submit”);

The above code was working perfect in Firefox. However, in IE 6, this code did not create a button. It simply didn’t work! While trying to find a solution, I came across a link that said while creating dynamic buttons through Javascript, the ‘type’ attribute can’t be set dynamically using setAttribute() in IE 6. What needed in IE 6 was:

var button1=document.createElement(’<input type=”button” name=”button1_name” />’);

The above code will also work for Firefox, thus to make it cross-browser, had to hard-code the tag as written above.

I was getting this strange error when I was trying to write a function as simple as asking for confirmation while deleting a particular record. On click of the ‘Delete’ link, it used to give me this error “Object Expected” in IE 6.

The code that I had written before the error was like:

<script language=”javascript” type=” text/javascript”>
function deleteConfirmation(id)
{
var answer = confirm(”Are you sure you wish to delete this entry?”);

if (answer){
location.href = ’some url’;
}
else{
return false;
}
}
</script>

In the first glance, I am not sure how many of you will be able to point out what the error is. The code after correcting this error looks like:

<script language=”javascript” type=”text/javascript”>
function deleteConfirmation(id)
{
var answer = confirm(”Are you sure you wish to delete this entry?”);

if (answer){
location.href = ’some url’;
}
else{
return false;
}
}
</script>

Well, the difference between the two pieces of code lies in the first line:

<script language=”javascript” type=”text/javascript”>

The error was occurring as there was a space preceding in the value given in the ‘type’ attribute. I removed the extra space before “text/javascript” and that’s all what it took to resolve this error. Oh yes, this error was occurring only in IE 6 & not in Firefox.

I was working on a piece of code in which I needed to hide a row (’tr’) on click of a link & show it again on a similar event. Tried to achieve that using the usual display:none & display:block methods.

That method gave me problems across browsers. Then I read somewhere that to show a tr using css, we could use:

style.display = ‘table-row’

This worked, but not across all browsers. Finally read somewhere that if we use:

style.display = ”

This would make the browser take the default values whether it’s table-row or display:block. This one worked for both IE & Firefox.