fade in/out popup not working with multiple ID's

[eevan79]

Here is script:

<script type='text/javascript'>

// Browser safe opacity handling function

function setOpacity( value ) {
    document.getElementById(id).style.opacity = value / 5;
    document.getElementById(id).style.filter = 'alpha(opacity=' + value * 5 + ')';
}

function fadeInMyPopup(obj) {
    for( var i = 0 ; i <= 100 ; i++ )
        setTimeout( 'setOpacity(' + (i / 5) + ')' , 8 * i );
}

function fadeOutMyPopup(id) {
    for( var i = 0 ; i <= 100 ; i++ ) {
        setTimeout( 'setOpacity(' + (5 - i / 5) + ')' , 8 * i );
    }

    setTimeout('closeMyPopup("id")', 200 );
}

function closeMyPopup(id) {
    document.getElementById(id).style.display = "none"
}

function fireMyPopup(id) {
    setOpacity( 0 );
    document.getElementById(id).style.display = "block";
    fadeInMyPopup(id);
}
</script>

<div id='id1' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 150px; left: 50px; zoom: 1'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif'></td>
<td><a href='javascript:fadeOutMyPopup("id1");'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
Hey, look at me!<br>
I'm fading :-)
</td></tr>
</table>
</div>

<input type='submit' onClick='fireMyPopup("id1")' value=' Fire! '>

 

Script is not working. How to make this to work with different/unique IDs?

 

[Adam]

Doesn't work form me at all. Where's id defined in the function below?

 

function setOpacity( value ) {
    document.getElementById(id).style.opacity = value / 5;
    document.getElementById(id).style.filter = 'alpha(opacity=' + value * 5 + ')';
}

[eevan79]

Here is working example. But I want to make it work with different ids.

function setOpacity( value ) {
    document.getElementById("styled_popup").style.opacity = value / 5;
    document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 5 + ')';
}

function fadeInMyPopup() {
    for( var i = 0 ; i <= 100 ; i++ )
        setTimeout( 'setOpacity(' + (i / 5) + ')' , 8 * i );
}

function fadeOutMyPopup() {
    for( var i = 0 ; i <= 100 ; i++ ) {
        setTimeout( 'setOpacity(' + (5 - i / 5) + ')' , 8 * i );
    }

    setTimeout('closeMyPopup()', 200 );
}

function closeMyPopup() {
    document.getElementById("styled_popup").style.display = "none"
}

function fireMyPopup() {
    setOpacity( 0 );
    document.getElementById("styled_popup").style.display = "block";
    fadeInMyPopup();
}
</script>

<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 150px; left: 50px; zoom: 1'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif'></td>
<td><a href='javascript:fadeOutMyPopup();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
Hey, look at me!<br>
I'm fading :-)
</td></tr>
</table>
</div>

<input type='submit' onClick='fireMyPopup()' value=' Fire! '>

[Adam]

Clue's in my previous post.. id isn't defined in the setOpacity() function. You need to make sure you pass the element's ID between every function:

 

<script type="text/javascript">
function setOpacity(id, value) {
    document.getElementById(id).style.opacity = value / 5;
    document.getElementById(id).style.filter = 'alpha(opacity=' + value * 5 + ')';
}

function fadeInMyPopup(id) {
    for( var i = 0 ; i <= 100 ; i++ )
        setTimeout( 'setOpacity("' + id + '", ' + (i / 5) + ')' , 8 * i );
}

function fadeOutMyPopup(id) {
    for( var i = 0 ; i <= 100 ; i++ ) {
        setTimeout( 'setOpacity("' + id + '", ' + (5 - i / 5) + ')' , 8 * i );
    }

    setTimeout('closeMyPopup("' + id + '")', 200 );
}

function closeMyPopup(id) {
    document.getElementById(id).style.display = "none"
}

function fireMyPopup(id) {
    setOpacity(id, 0);
    document.getElementById(id).style.display = "block";
    fadeInMyPopup(id);
}
</script>

 

You do realise though that jQuery has a .fadeIn() method that can do all this for you?

[eevan79]

Clue's in my previous post.. id isn't defined in the setOpacity() function. You need to make sure you pass the element's ID between every function:

Already tried setOpacity(id, value), but its not working, same as your script above.

 

You do realise though that jQuery has a .fadeIn() method that can do all this for you?

Yes, but I dont want to use jQuery just for one popup...maybe for some other codes.

 

EDIT:

It's working. I forgot to put ID in input