Fade In/Out and create/hide <DIV> with javascript

Question

Hi I'm creating some on runtime. For that I'm using this function:

function creatediv(id, html, left, top) {

if (document.getElementById(id)) 
    {
     document.getElementById(id).style.display='block';
     fadeIn(id, 300);
    }
    else
    {
     var newdiv = document.createElement('div');
     newdiv.setAttribute('id', id);
     newdiv.setAttribute("class", "warningDiv"); 
     newdiv.style.position = "absolute";
     newdiv.innerHTML = html  + '<h1>(click to close)</h1>';
     newdiv.style.left = left;
     newdiv.style.top = top;
     newdiv.onclick=function(e) {
      fadeOutAndHide(id, 300);
     };  
     document.body.appendChild(newdiv);
     fadeIn(id, 300);
    }

}

This function doesn't work with IE, and I don't know why. I get no error-warnings with this javascript. These are de Fade-in functions:

function fadeOutAndHide (id,millisec)
{
    var object = document.getElementById(id).style;
    var opacStart = 100;
    var opacEnd=0;
    var speed = Math.round(millisec / 100);
    var timer = 0;

    for(i = opacStart; i >= opacEnd; i--) {
     setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
     timer++;
    } 

    var elemento = document.getElementById(id);
    if (opacEnd==0){
    elemento.style.display='none';
    }
}


function opacity(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;

    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
     }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
     }
    }
}

Another problem that I have: The fadeout function doesn't work properly. The div fades, but the event "click" is fired when the div is hide. This is the function for fadeout:

function fadeOutAndHide (id,millisec)
{
    var object = document.getElementById(id).style;
    var opacStart = 100;
    var opacEnd=0;
    var speed = Math.round(millisec / 100);
    var timer = 0;

    for(i = opacStart; i >= opacEnd; i--) {
     setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
     timer++;

    } 

    var elemento = document.getElementById(id);
    if (i==1){
    elemento.style.display='none';
    }
}

So, what can I do to fix this issues?

Thanks

Answer 1

Sorry, I don't know what's wrong with your code, but I strongly recommend you use an existing javascript library (such as jQuery or mootools) which allows you to achieve things like fade in/out with one line of code and should work in most browsers.

Answer 2

Hello, why it doesnt work in IE is because you must set the height and width attribute of the element before the fade works. I have the same problem. Looking for a good solution on the net. Best Regards Martin W