DHTML: DIV HEIGHT

IC · Jul 20 '05, 08:48 AM

Re: DHTML: DIV HEIGHT

"Richard Cornford" <Richard@litote s.demon.co.uk> wrote in message news:<bdqk4h$d3 v$1$8302bc10@ne ws.demon.co.uk> ...[color=blue]
> "IC" <ipcrowley@yaho o.com> wrote in message
> news:c0374d35.0 306300937.6908e d52@posting.goo gle.com...
> <snip>[color=green]
> >In the above code x.swf would load. When you click on x.swf,
> >y.swf would appear below it (i.e. like a dropdown). I want
> >to make a change, so that the dropdown swf does not appear
> >all at once. Rather it starts to appear from the top until,
> >after a few seconds, the entire dropdown is visible. I think
> >this can be down by dynamically changing and increasing the
> >div styles height value. For example, you click on x.swf and
> >the style height goes from 1 to 240. When you close the div,
> >the height would go from 240 to 0. Hopefully, this
> >makes sense to someone out there.[/color]
>
> The plugin for swf might be the biggest problem with this plan as it
> might not be happy to be clipped. However, setting the overflow property
> of a DIV to hidden and changing its size (height) over time could
> resemble a dropdown. This page demonstrates the animation of a dropdown
> like DIV. It will work with modern browsers and should be harmless on
> older browses like Netscape 4:-
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head><title> </title>
> <style type="text/css">
> #upper {
> width:100%;
> color:#000000;
> background-color:#FFFF00;
> }
> #lower {
> width:100%;
> color:#FFFFFF;
> background-color:#0000FF;
> overflow:hidden ;
> }
> #outer {
> margin:0px auto;
> padding:0px;
> width:40ex;
> }
> #lower UL {
> margin:2% auto 2% 10%;
> padding:0px;
> }
> </style>
> <script type="text/javascript">
> var TimedQue = function(){
> var base, timer;
> var interval = 40;
> var newFncs = null;
> function addFnc(next, f){
> function t(){
> next = next&&next();
> if(f()){
> return arguments.calle e;
> }else{
> f = null;
> return next;
> }
> };
> t.addItem = function(d){
> if(next){
> next.addItem(d) ;
> }else{
> next = d;
> }
> return this;
> };
> t.finalize = function(){
> return ((next)&&(next = next.finalize() )||(f = null));
> };
> return t;
> };
> function tmQue(f){
> if(newFncs){
> newFncs = newFncs.addItem (addFnc(null, f));
> }else{
> newFncs = addFnc(null, f);
> }
> if(!timer){
> timer = setTimeout(tmQu e.act, interval);
> }
> };
> tmQue.act = function(){
> var f = newFncs, strt = new Date().getTime( );
> if(f){
> newFncs = null;
> if(base){
> base.addItem(f) ;
> }else{
> base = f;
> }
> }
> base = base&&base();
> if(base){
> var t = interval - (new Date().getTime( ) - strt);
> timer = setTimeout(tmQu e.act, ((t > 0)?t:1));
> }else{
> timer = null;
> };
> };
> tmQue.act.toStr ing = function(){
> return 'TimedQue.act() ';
> };
> tmQue.finalize = function(){
> timer = clearTimeout(ti mer);
> base = base&&base.fina lize();
> slotIndex = 0;
> newFncs = [];
> };
> return tmQue;
> }();
> var running = false;
> var currentDivSize = 0;
> var direction = 1;
> var maxHeight = 240; // default value!
> function getDiv(iD){
> if(document.get ElementById){
> return document.getEle mentById(iD);
> }else if(document.all ){
> return document.all[iD];
> }
> return null;
> }
>
> function expand(but){
> var lowDiv,divStyle ,heightType,ste p = 8;
> function sizeDiv(){
> currentDivSize += direction * step;
> divStyle.height = currentDivSize + heightType;
> if((currentDivS ize <= 0)||(currentDiv Size >= maxHeight)){
> direction *= -1;
> running = false;
> but.value = (direction == 1)?' Expand ':'Contract';
> }
> return running;
> }
> if(!running){
> lowDiv = getDiv('lower') ;
> if(lowDiv){
> divStyle = lowDiv.style||l owDiv;
> heightType = (typeof divStyle.height == 'string')?'px': 0;
> if(currentDivSi ze){
> direction = -1;
> }else{
> direction = 1;
> }
> maxHeight = lowDiv.scrollHe ight||maxHeight ;
> but.value = '------------';
> running = true;
> TimedQue(sizeDi v);
> }
> }
> }
> function init(){
> var lowDiv = getDiv('lower') ;
> if(lowDiv){
> var divStyle = lowDiv.style||l owDiv;
> maxHeight =
> lowDiv.offsetHe ight||lowDiv.sc rollHeight||max Height;
> divStyle.height = 0 +
> ((typeof divStyle.height == 'string')?'px': 0);
> }
> }
> </script>
> </head>
> <body onload="init()" >
> <div id="outer">
> <div id="upper">
> <form name="aForm" action="#">
> <script type="text/javascript">
> if((document.ge tElementById)|| (document.all)) {
> document.write( '<input type="button"'+
> ' name="Expand" value="Expand"' +
> ' onclick="expand (this);">');
> }
> </script>
> </form>
> <p>XXXX XXXXX XXXXX XXXX XXXX
> XXX XXXX XXXXX XXXXX XXXX XXXXXX
> XXXX XXXX XXXX XXXX XXXX XXXXXX
> XXXXX XXXXX XXXXX XXX XXXX XXXX
> XXXX XXXX XXXXXX XXXX XXXX XXXX
> XXXX XXXX XXXX XXXXX XXXXX XXXX</p>
> <div>
> <div id="lower">
> <ul>
> <li>XXXX XXXX XXXX</li>
> <li>XXXX XXXX XXXX</li>
> <li>XXXX XXXX XXXX</li>
> <li>XXXX XXXX XXXX</li>
> <li>XXXX XXXX XXXX</li>
> <li>XXXX XXXX XXXX</li>
> <li>XXXX XXXX XXXX</li>
> <li>XXXX XXXX XXXX</li>
> <li>XXXX XXXX XXXX</li>
> <li>XXXX XXXX XXXX</li>
> </ul>
> </div>
> </div>
> </body>
> </html>
>
> You could have a go at inserting your object tags into the DIVs.
>
> Richard.[/color]

Thanks for your help!!!!

-Ian

DHTML: DIV HEIGHT

DHTML: DIV HEIGHT

Comment