drop down box based on JS. how to add fade effect?

[LetItBe]

javascript

function getposOffset(overlay, offsettype)
{
var totaloffset = (offsettype == "left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl = overlay.offsetParent;
while (parentEl!= null)
{
totaloffset = (offsettype == "left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl = parentEl.offsetParent;
}
return totaloffset;
}
function overlay(curobj, subobjstr, opt_position)
{
if (document.getElementById)
{
var subobj = document.getElementById(subobjstr);
subobj.style.display = (subobj.style.display!= "block")? "block" : "none";
var xpos = getposOffset(curobj, "left") + ((typeof opt_position!= "undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth - curobj.offsetWidth) : 0); 
var ypos = getposOffset(curobj, "top") + ((typeof opt_position!= "undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0);
subobj.style.left = xpos + "px";
subobj.style.top = ypos + "px";
return false;
}
else return true;
}
function overlayclose(subobj)
{
document.getElementById(subobj).style.display = "none";
}

..and html code:

<p>open popup <a href="#" onClick="return overlay(this, 'popup', 'top')">here</a>.

simply: this opens div which has id="popup". the problem is that div is opened sharply, without any effects. all i need is to add a special JS code which makes div fade in by opening it and fade out by closing it. any ideas how this should look like i JS language?

thanks a lot.

[DrDoc]

What do you mean by "fade in"?
Are you talking about something that sizes into view, or something that goes from transparent and goes solid?

Both can be done ...

size (assuming a final width of 200px and a final height of 300px)

function overlay(curobj, subobjstr, opt_position) { 
  ... 
  var subobj = document.getElementById(subobjstr); 
  h = 0; 
  w = 0; 
  subobj.style.height = h + "px"; 
  subobj.style.width = w + "px"; 
  while(w < 200) { 
    h = h + 30; 
    w = w + 20; 
    setTimeout("sizeMe(subobj, " + h + ", " + w + ")", w * 5); 
  } 
  subobj.style.display = (subobj.style.display!= "block")? "block" : "none"; 
  ... 
} 
function sizeMe(subobj, h, w) { 
  subobj.style.height = h + "px"; 
  subobj.style.width = w + "px"; 
}

opacity

function overlay(curobj, subobjstr, opt_position) { 
  ... 
  var subobj = document.getElementById(subobjstr); 
  op = 0; 
  subobj.style.filter = "alpha(opacity=" + op + ")"; 
  subobj.style.opacity = op; 
  while(op < 100) { 
    op = op + 10; 
    setTimeout("solidMe(subobj, " + op + ")", op * 10); 
  } 
  subobj.style.display = (subobj.style.display!= "block")? "block" : "none"; 
  ... 
} 
function solidMe(subobj, op) { 
  subobj.style.filter = "alpha(opacity=" + op + ")"; 
  subobj.style.opacity = op / 100; 
}

Change the timeouts to suit your needs.

[LetItBe]

hey,

i mean opacity..

thanks for the code.. but when i insert code i get error:

"error: 'subobj' is undefined"

i don't get what's wrong here... could you look please?

thanks

[DrDoc]

Aah, perhaps if I had tested things first ... ;)

Ok, make these few changes then:

Change:

setTimeout("solidMe(subobj, " + op + ")", op * 10);

to:

setTimeout("solidMe(subobj[b]str[/b], " + op + ")", op * 10);

Change:

function solidMe(subobj, op) {

to:

function solidMe(subobj[b]str[/b], op) {
var subobj = document.getElementById(subobjstr);

Also, you may want to change all instances of:

subobj.style.filter = "alpha(opacity=" + op + ")";

to:

subobj.style.filter = "[b]progid:DXImageTransform.Microsoft.A[/b]lpha(opacity=" + op + ")";

[edited by: DrDoc at 7:58 pm (utc) on July 12, 2007]

[LetItBe]

yeah, i made such a changes and this is how code looks now:

function overlay(curobj, subobjstr, opt_position)
{
if (document.getElementById)
{
var subobj = document.getElementById(subobjstr);

op = 0;
subobj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + op + ")";
subobj.style.opacity = op;
while(op < 100) {
op = op + 10;
setTimeout("solidMe(subobjstr, " + op + ")", op * 10);
}

subobj.style.display = (subobj.style.display!= "block")? "block" : "none";
var xpos = getposOffset(curobj, "left") + ((typeof opt_position!= "undefined" && opt_position.indexOf("right")!=-1)? -(subobj.offsetWidth - curobj.offsetWidth) : 0);
var ypos = getposOffset(curobj, "top") + ((typeof opt_position!= "undefined" && opt_position.indexOf("bottom")!=-1)? curobj.offsetHeight : 0);
subobj.style.left = xpos + "px";
subobj.style.top = ypos + "px";
return false;
}
else return true;
}

function solidMe(subobjstr, op) {
var subobj = document.getElementById(subobjstr);
subobj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + op + ")";
subobj.style.opacity = op / 100;
}

seem to be everything correct, just like you wrote...
but now i get error telling: 'subobjstr' is underfined

x-files are happening here... any ideas how to solve the problem? :/

thanks

[LetItBe]

any? ;)

[Drag_Racer]

I don't see the problem in your posted code.

It must be on whatever is calling the function or that 'id' is not found in the page.