Resizing a DIV

[enceladus311]

I've read through a number of links that discuss various methods of
resizing a div; however, nothing seems to work correctly for me. The
basic idea is that I would like to implement is a panel that can be
hidden (to save space), but collapses smoothly, rather than all at
once.

I've tried setting the div's style.height property. Doing so does, in
fact, resize the div (at least in Firefox 2.0); however, the inner text
does not disappear as the div is resized. Should I apply another CSS
style to the inner text or is there another method of obtaining the
desired results?

My attempt can be found at:

http://mail.capitalgenomix.com/sean/

Thank you in advance,

 

[pcx99]

I've read through a number of links that discuss various methods of
resizing a div; however, nothing seems to work correctly for me. The
basic idea is that I would like to implement is a panel that can be
hidden (to save space), but collapses smoothly, rather than all at
once.

I've tried setting the div's style.height property. Doing so does, in
fact, resize the div (at least in Firefox 2.0); however, the inner text
does not disappear as the div is resized. Should I apply another CSS
style to the inner text or is there another method of obtaining the
desired results?

My attempt can be found at:

http://mail.capitalgenomix.com/sean/

Thank you in advance,

Add

overflow: hidden

to your css class for the division.

 

[enceladus311]

Add

overflow: hidden

to your css class for the division.

That did it. Thank you very much!

 

[Matt Kruse]

I've read through a number of links that discuss various methods of
resizing a div; however, nothing seems to work correctly for me. The
basic idea is that I would like to implement is a panel that can be
hidden (to save space), but collapses smoothly, rather than all at
once.

I haven't polished this lib yet, but it works:

http://www.javascripttoolbox.com/lib/toggle/

Give it a try and let me know what you think.

 

[ASM]

(e-mail address removed) a écrit :

I've read through a number of links that discuss various methods of
resizing a div; however, nothing seems to work correctly for me. The
basic idea is that I would like to implement is a panel that can be
hidden (to save space), but collapses smoothly, rather than all at
once.

I've tried setting the div's style.height property. Doing so does, in
fact, resize the div (at least in Firefox 2.0); however, the inner text
does not disappear as the div is resized. Should I apply another CSS
style to the inner text or is there another method of obtaining the
desired results?

My attempt can be found at:

http://mail.capitalgenomix.com/sean/

Thank you in advance,

CSS :
=====
#myDiv { -khtml-opacity:0; -moz-opacity:0; opacity:0;
filter:alpha(opacity=0);}

JS :
=====

function $(id) { return (typeof(id)=='string')?
document.getElementById(id) : id; }
function fadder(what, duration, opacity, sens)
{
sens = typeof(sens)=='undefined'? 1 : sens;
opacity = typeof(opacity)=='undefined'? 3 : opacity;
what = $(what);
opacity = (opacity == 100)? 99.999 : opacity;
// IE/Win
what.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
what.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
what.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
what.style.opacity = opacity/100
if(sens>0 && opacity<99 || sens<0 && opacity>2) {
opacity += 2*sens;
setTimeout(function(){
fadder(what, duration, opacity, sens);},duration);
}
return false;
}

HTML :
======

<a href="#" onclick="fadder('myDiv',50)">see</a>
<div id="myDiv">
blah
</div>