www.webdeveloper.com
Results 1 to 7 of 7

Thread: No guarantee for a div to be "drawn" right away when the width or height is changed?

  1. #1
    Join Date
    Feb 2009
    Posts
    3

    No guarantee for a div to be "drawn" right away when the width or height is changed?

    Hello,

    I'm having a bit of a problem with creating a floating div that "grows" into its specified size when it's opened.

    Basically I've made a recursive function that uses setTimeout() to increase the size of the div slowly. While it animates beautifully in IE and Opera, I've noticed you don't see the animation (the div growing in size) in Firefox or Chrome. Instead you see a brief pause (while the div grows in size in the background) and then the div in its full size.

    When I wrote this I was assuming that whenever I set the div's style.width or style.height property, the browser would show the change immediately. Perhaps this isn't true? Or perhaps there's a function that forces the browser to redraw the div?

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    The browser is doing exactly what you want, however every time you set the height and width, the browser must reflow the page. Re-flowing the layout is an extremely expensive operation in processing time, and Firefox and Chrome are probably using so much of the processor that it has little left over to update the display of the page smoothly. Can you post your code? Maybe there are changes we can make to optimize this.

  3. #3
    Join Date
    Feb 2009
    Posts
    3
    Code:
    function animateOpeningDiv(curDivWidth, curDivHeight, maxDivWidth, maxDivHeight)
    {
     // DOESN'T ANIMATE IN FIREFOX OR GOOGLE CHROME... why?
     // Recursive function that will increase the size of the division until it reaches the maxCurWidth and maxCurHeight
     var theDiv = document.getElementById("popup");
     
        if (curDivWidth >= maxDivWidth)
    	{
    	    if (curDivHeight >= maxDivHeight)
    		{
    		 // curDivWidth is at max, curDivHeight is at max
    		 curDivWidth = maxDivWidth;
    		 curDivHeight = curDivHeight;
    		 theDiv.style.width = maxDivWidth + "px";
    		 theDiv.style.height = maxDivHeight + "px";
    		 return;
    		} else {
    		 // curDivWidth is at max, curDivHeight can increase
    		 curDivHeight = curDivHeight + 10;
    		 theDiv.style.height = curDivHeight + "px";
    		 theDiv.style.width = maxDivWidth + "px"; // in case it was incremented too high
    		 theDiv.style.display = "none";
    		 theDiv.style.display = "block";
    		 setTimeout(function(){animateOpeningDiv(maxDivWidth, curDivHeight, maxDivWidth, maxDivHeight)}, 10);
    		}
    	} else {
    	    if (curDivHeight >= maxDivHeight)
    		{
    		 // curDivWidth can increase, curDivHeight is at max
    		 curDivWidth = curDivWidth + 10;
    		 theDiv.style.width = curDivWidth;
    		 theDiv.style.height = maxDivHeight;
    		 theDiv.style.display = "none";
    		 theDiv.style.display = "block";
    		 setTimeout(function(){animateOpeningDiv(curDivWidth, maxDivHeight, maxDivWidth, maxDivHeight)}, 10);
    		} else {
    		 // curDivWidth can increase, curDivHeight can increase
    		 curDivWidth = curDivWidth + 10;
    		 curDivHeight = curDivHeight + 10;
    		 theDiv.style.width = curDivWidth;
    		 theDiv.style.height = curDivHeight;
    		 theDiv.style.display = "none";
    		 theDiv.style.display = "block";
    		 theDiv.style.value = ".";
    		 setTimeout(function(){animateOpeningDiv(curDivWidth, curDivHeight, maxDivWidth, maxDivHeight)}, 10);
    		}
    	}
    }
    Function call: animateOpeningDiv(10, 10, divWidth, divHeight);

  4. #4
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    What is with the

    theDiv.style.display = "none";
    theDiv.style.display = "block";

    one after another ?

    What does

    theDiv.style.value = ".";

    Do ?
    Last edited by slaughters; 02-03-2009 at 10:01 AM.

  5. #5
    Join Date
    Oct 2008
    Posts
    349
    You get the behavior you described because you forgot to add + "px" at a number of places in the code. In strict mode, setting length without specifying unit does not do anything.

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,674
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (29-December-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With three types of progression 'sin' and 'cos' and liner.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'.
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    // parameter 5 = (optional) to scale the effect time on a secified minimum/maximum.                        (array, see Note 5)
    //                 field 0 the minimum. (digits)
    //                 field 1 the maximum. (digits)
    // parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
    //                'sin' progression starts fast and ends slow.
    //                'cos' progression starts slow and ends fast.
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //  Note 5: parameter 5 is of particular use when re-calling the effect
    //          in mid travel to retain an constant rate of progression.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/\W/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2.06K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
     if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
     if (!obj||(!srt&&!fin)) return;
     var oop=obj[mde.replace(/\W/g,'')+'oop'];
     if (oop){
      clearTimeout(oop.to);
      if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
      else oop.update([srt,fin],ms);
     }
     else obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
    }
    
    function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
     this.srtfin=[srt,fin];
     this.to=null;
     this.obj=obj;
     this.mde=mde.replace(/\W/g,'');
     this.update([srt,fin],ms,scale,curve);
    }
    
    zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
     this.time=ms||this.time||2000;
     this.data=[srtfin[0],srtfin[0],srtfin[1]];
     this.ms=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
     this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
     this.inc=Math.PI/(2*this.ms);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*ms)):(this.data[2]-this.data[1])/this.ms*ms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  zxcOpacity(this.obj,this.data[0]);
     if (ms<this.ms) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    /*]]>*/
    </script>
    <script type="text/javascript">
    <!--
    
    function Open(id,mde,srtw,finw,srth,finh,spd){
     spd=spd||1000;
     var obj=document.getElementById(id);
     if (!obj.mde) obj.mde=false;
     clearTimeout(obj.to);
     obj.mde=!obj.mde;
     obj.style.display='block';
     zxcBAnimator('width#',id,srtw,finw,spd,[srtw,finw]);
     zxcBAnimator('height#',id,srth,finh,spd,[srth,finh]);
     if (!obj.mde) obj.to=setTimeout(function(){ obj.style.display='none'; },spd*parseInt(obj.style.width)/finw);
    }
    //-->
    </script></head>
    
    <body>
    <input type="button" name="" value="Open/Close" onclick="Open('tst','open',0,200,0,100,1000);">
    <div id="tst" style="display:none;width:0px;height:0px;background-Color:red;border:solid black 1px;"></div>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Feb 2009
    Posts
    3
    Quote Originally Posted by slaughters View Post
    What is with the

    theDiv.style.display = "none";
    theDiv.style.display = "block";

    one after another ?

    What does

    theDiv.style.value = ".";

    Do ?
    Sorry about that, that's actually left over code from previous desperate attempts at getting the division to refresh.

    Quote Originally Posted by voidvector
    You get the behavior you described because you forgot to add + "px" at a number of places in the code. In strict mode, setting length without specifying unit does not do anything.
    D'oh! I concatenated the "px" string at the end of half of the length and width strings but missed the rest. It works perfectly now, though. Thank you!
    Last edited by HearWa; 02-03-2009 at 10:49 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles