By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,761 Members | 1,969 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,761 IT Pros & Developers. It's quick & easy.

Simple sliding div animation accepts interrupt in every browser but Firefox. Why?

P: 1
I created a sliding div animation that is toggled by clicking a link. The div starts in a hidden state, and slides slowly open the first time the link is clicked. The second click hides the div immediately. This simple animation toggles between these two states.

In every browser I have tested (IE 6-8, Safari, Chrome), the animation can be interrupted as it opens by clicking on the toggle link. In other words, the command to hide the div can be accepted by the script at any time while it is opening. The div doesn't have to open completely before it will accept user input. This is true regardless of OS.

Firefox however is the exception. It must wait until the div is completely open before it accepts further input. This is true of Firefox on both Mac and PC. Is there a threading problem with Firefox? The only clue I can offer is that I use setTimeout to drive the animation.

The code is organized and easy to read. An online version can be found at http://www.pmtlogic.com/slidingdiv.html. The javascript can be found at the top of the source. It also uses some simple markup and css for demonstration purposes. I have also attached it as a text file that can be run from any desktop (change extension to .html).

Even a simple "alert('hi')" embedded in the onclick handler of the link itself will not be run until the animation has finished - in Firefox, that is, all other browsers work as expected. I searched for a while on the Internet but couldn't find my problem description exactly. It is much easier to demonstrate in a forum like this.

My guess is that there is either a simple explanation or someone with advanced understanding is required to solve the problem.

My deep appreciation in advance.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head></head>
  4.  
  5. <script type='text/javascript'>
  6. function SlidingContent () {
  7.    this.content = new Array;
  8.    this.add = function (obj) {
  9.       if ( ! obj.prompt ) {
  10.          obj.prompt = { open: "open", close: "close" };
  11.       }
  12.       if ( ! obj.state ) {
  13.          obj.state = 0;
  14.       }
  15.       if ( ! obj.rate ) {
  16.          obj.rate = 1;
  17.       }
  18.       obj.timeout = 0;
  19.       document.write("<a href='#' onclick='SLIDINGCONTENT.toggle("+ this.content.length +"); return false'><span id='" + obj.spanID + "'>" + obj.prompt.open + "</span></a>");
  20.       this.content[this.content.length] = obj;
  21.    }
  22.    this.toggle = function (index) {
  23.       var obj = this.content[index];
  24.       if ( obj.state == 0 ) {
  25.          obj.state = 1;
  26.          this.open (obj);
  27.       }
  28.       else {
  29.          obj.state = 0;
  30.          this.close (obj);
  31.       }
  32.    }
  33.    this.close = function (obj) {
  34.       if ( obj.timeout != 0 ) {
  35.          clearTimeout(obj.timeout);
  36.       }
  37.       var span = document.getElementById(obj.spanID);
  38.       span.innerHTML = obj.prompt.open;
  39.  
  40.       var container = document.getElementById(obj.containerID);
  41.       container.style.height = '0px';
  42.    }
  43.    this.open = function (obj) {
  44.       var span = document.getElementById(obj.spanID);
  45.       span.innerHTML = obj.prompt.close;
  46.  
  47.       var ref = this.increment(obj);
  48.       obj.timeout = setTimeout(ref, 10);
  49.    }
  50.    this.increment = function (obj) {
  51.       var self = this;
  52.       var content = document.getElementById(obj.contentID);
  53.       var container = document.getElementById(obj.containerID);
  54.  
  55.       return (function () {
  56.          if ( container.offsetHeight < content.offsetHeight ) {
  57.             if ( container.offsetHeight + obj.rate >= content.offsetHeight ) {
  58.                container.style.height = content.offsetHeight + 'px';
  59.             }
  60.             else {
  61.                container.style.height = (container.offsetHeight + obj.rate) + 'px';
  62.                self.open(obj);
  63.             }
  64.          }
  65.       });
  66.    }
  67. }
  68. var SLIDINGCONTENT = new SlidingContent ();
  69. </script>
  70.  
  71. <style type='text/css'>
  72. body {
  73. font: 12px verdana;
  74. }
  75. .expanding {
  76. padding: 0px 5px;
  77. width: 400px;
  78. }
  79. .slideheader {
  80. background-color: #eeeeee;
  81. padding-top: 5px;
  82. margin-bottom: 5px;
  83. }
  84. slideheader strong {
  85. display: block;
  86. float: left;
  87. padding-bottom: 2px;
  88. }
  89. .slideheader a {
  90. display: block;
  91. float: right;
  92. font-weight: bold;
  93. }
  94. .slidecontainer {
  95. width: 100%;
  96. height: 0px;
  97. overflow: hidden;
  98. clear: both;
  99. }
  100. .issue {
  101. clear: both;
  102. }
  103. </style>
  104.  
  105. <body>
  106. <P>
  107. <div class='expanding'>
  108.     <P class='slideheader'><STRONG>Click link to right and re-click before it finishes</STRONG>
  109.  
  110. <script type='text/javascript'>
  111. SLIDINGCONTENT.add({
  112.     contentID: "content1",
  113.     containerID: "container1",
  114.     spanID: "link1",
  115.     prompt: {
  116.         open: "open", 
  117.         close: "close"
  118.     },
  119.     rate: 1
  120. });
  121. </script>
  122.  
  123.     </p>
  124.  
  125.     <p class='issue'>Only firefox will not interrupt the section as it is sliding down. Why?</p>
  126.  
  127.     <div id='container1' class='slidecontainer'>
  128.         <div id='content1' class='slidecontent'>
  129.             <P>
  130.             hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content hidden content
  131.             </P>
  132.  
  133.         </div>
  134.     </div>
  135. </div>
  136. </P>
  137. </body>
  138. </html>
  139.  
  140.  
Attached Files
File Type: txt slidingdiv.txt (4.5 KB, 240 views)
Jan 12 '11 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.