IE6 offsetTop : issue and solution

Most of the developers feel pain when it comes to IE6. Actually it a positive result for a developer to handle IE6 related issues through either CSS or Javascript or any server side language.

Here we will focus on ‘offsetTop‘ – a Javascript method for positioning the element on a web page. It could be used for menus or showing some contents in a DIV. So for that you can use

document.getElementById(id).style.top = element.offsetTop;

The above single line javascript code works fine in Firefox, Safari and in Chrome. But the javascript ‘offsetTop’ method does not support in IE6 directly. It will show up the position of the element on the top but not relative to the parent element. To overcome this there is another method called ‘parentNode‘ in javascript. What it does? It first checks the position of the parent element and then assign the position to the element in a pixel which we want to show on ‘onmouseover’ or ‘onclick’ event.

Here is a simple javascript function you will need to call:

function showSubElement(id){
   var msie = 'Microsoft Internet Explorer';
   var elementToShow = document.getElementById('elementID');
   var elementOnShow = document.getElementById(id);
   if (navigator.appName == msie){
      elementToShow.style.top = elementOnShow.parentNode.offsetTop  +  'px';
   }else{
      elementToShow.style.top = elementOnShow.offsetTop;
   }
   // To use ternary operators instead if-else, remove the if-else condition and un-comment following line.
   // elementToShow.style.top = (elementOnShow.offsetTop) + (navigator.appName == msie ? elementOnShow.parentNode.offsetTop : 'px');
}

Now call this function on anchor:
<a href=”javascript:void(0)” id=”a1″ onmouseover=”showSubElement(‘a1′)”>Show the contents on Mouseover</a>

Programming languages and the Natural languages

Anyone can learn any language. Its same with computer programming languages also. You just need to think and act in that language. That’s it!

For example:

1) I have to say ‘Hello World!’ in English, I need to know basic English language.

2) I have to say ‘Hello World!’ in PHP, I need to think in PHP way. What you need? You just need one line code. That’s It!

Isn’t this as simple as we learn our natural languages? YES it is!

There are more than 1.5 lakhs words in English language. But the fact is no one knows all the words. Same applies to programming languages also. No one knows all the ins and outs of any languages. Those who says that ‘I am a master of say PHP or C or C++ or ASP or RAILS or any other language’, they lies with the truth…

Javascript Random Image on page refresh or onload

Some times we need to randomize the images at same place with minimum script and occupy less memory and to decrease the size of a web page. There are lots of demos and examples available on net.I customize the code for one of my projects. It is tested and working fine on all today’s major browsers (IE7, Firefox 3, Safari 3, Google Chrome).

Lets dig into the code…

The Math.floor() method returns the floor of the specified number or expression. The floor of a number is the closest integer that is less than or equal to the number. The Math.random() method returns a random number between 0 and 1. I used a for loop to randomize the max number of images. So that I don’t need to specify each image name in my function. I am passing variable a in img[] array. And variable i will randomize the for loop.

Here is the complete working randomImage() function:

function randomImage(){
var img = new Array();
var img_path = “/path_of/images/”;
var img_name = “image_”;
var img_ext = “.gif”;
var img_id = document.getElementById(“image_id”);
for(var a= 0; a < 8; a++){
img[a] = img_path + img_name + a + img_ext;
}
var i = Math.floor (Math.random() * a);
img_id.src = img[i];
}

Now call the randomImage function in a page where you want to be.
<script type=”text/javascript”>window.onload=randomImage;</script>

You just need to specify the image tag with height and width of the image if all images are of same width and height.
<img id=”image_id” width=”214″ height=”259″ />

And your browser will render the following result:
<img height=”214″ width=”259″ id=”image_id” src=”/path_to/images/image_1.gif”/>

Save your document. And refresh it to get the above result.
If you want to make auto refresh the page use the meta tag:
<meta http-equiv=”refresh” CONTENT=”5;URL=html_document.html”>
Where 5 is the delay of seconds.

Custom Checkbox – The Easiest Way…

I was finding the solution on the net for custom checkbox for one of my projects. Yes there are lots of help and script available, but I found that those are very complicated and with huge scripts. To overcome this I created my simple and easy custom checkbox with crossbrowser compatibility,

What you will need?
1. Two Images: a) Empty Checkbox Image , b) Checked Checkbox Image
2. CSS
3. Two Javascript functions
… that’s it!

Lets build the custom checkbox.

First create the javascript functions:

function chked(field, image1, image2){
document.getElementById(image1).style.display = ‘none’;
document.getElementById(image2).style.display = ‘block’;
document.getElementById(field).checked = true;
}
function unchk(field, image1, image2){
document.getElementById(image1).style.display = ‘block‘;
document.getElementById(image2).style.display = ‘none’;
document.getElementById(field).checked = false;
}

Now build the CSS:

<div id=”checks“>
<img src=”nocheck.gif” width=”14” height=”14” id=”img1” onclick=”chked(‘check1‘, ‘img1‘, ‘img2‘);” />
<img src=”checked.gif” width=”14” height=”14” id=”img2” onclick=”unchk(‘check1‘, ‘img1‘, ‘img2‘);” style=”display:none;” />
<input type=”checkbox” name=”check1” id=”check1” class=”noBorder” />
</div>

This will look like below image:

And the result will be:

When the page gets load the unchecked image will be display and onlick event it goes away and checked image will popup instead and the checkbox field will also be checked on same event. So you can pass the value of checked checkbox for your rest of the functionality.

Compare my solution to others:
1. http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
2. http://slayeroffice.com/code/custom_checkbox/?chkbox1=1&chkbox2=2&chkbox3=3
3. http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/
4. http://www.insidedhtml.com/tips/elements/ts19/page1.asp

Google Chrome Browser – Features

Google Chrome Features:
1. Based on Apple Web Kit and also using Firefox plugins
2. Faster than IE, FF, Safari
3. Takes same time to download the homepage
4. Good support for Javascript
5. Good support for CSS2, CSS3
6. Great support for AJAX
7. Most of the time the entire page get refreshed
8. Legend of Fieldset in Prototype popup comes in a middle like Safari
9. The ‘File’ field displays similar to Safari’s
10. Better for all kinds of Google apps
11. Completely ignores the html comments

… chrome is in a developing process so its possible that some of google’s developer will fix the issues.

Detecting Chrome:
<script type=‘text/javascript’>
window.onload = function test(){
var chrome_name = navigator.appName;
var chrome_ver = navigator.appVersion;
alert(‘Your browser is: ‘+ chrome_name + ‘\nChrome Details:\n’ + chrome_ver);
}