Resizing a DIV

[enceladus311@yahoo.com]

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,

--
Sean

[pcx99]

Re: Resizing a DIV

enceladus311@ya hoo.com wrote:

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.



--
http://www.hunlock.com -- Musings in Javascript, CSS.
$FA

[enceladus311@yahoo.com]

Re: Resizing a DIV

pcx99 wrote:

Add
>
overflow: hidden
>
to your css class for the division.

That did it. Thank you very much!

--
Sean

[Matt Kruse]

Re: Resizing a DIV

enceladus311@ya hoo.com wrote:

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.

--
Matt Kruse

http://www.JavascriptToolbox.com

http://www.AjaxToolbox.com

[ASM]

Re: Resizing a DIV

enceladus311@ya hoo.com 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(op acity=0);}

JS :
=====

function $(id) { return (typeof(id)=='s tring')?
document.getEle mentById(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.filt er = "alpha(opacity: "+opacity+" )";
// Safari<1.2, Konqueror
what.style.KHTM LOpacity = opacity/100;
// Older Mozilla and Firefox
what.style.MozO pacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
what.style.opac ity = opacity/100
if(sens>0 && opacity<99 || sens<0 && opacity>2) {
opacity += 2*sens;
setTimeout(func tion(){
fadder(what, duration, opacity, sens);},duratio n);
}
return false;
}

HTML :
======

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


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date