CODEWITHSUNDEEP
jqueryhtmlcss
Markus
Markus

Reputation: 4242

Why doesn't this simple jQuery toggle animation work properly?

Your help would be very very much appreciated. I spend 4 hours trying to figuring this out, but was not successful, albeit it is a very easy example:

Given the following (full running and Copy and Paste ready) example, I have two Strange Problems (occurring both on IE and Firefox):

1.) When having the line <div id="notexid" style="clear:both;"> with the following style tag: "style="clear:both;", the problem is, that the Toggle Display does not "hide/slide in the layer. Whenever you click the link, the Layer only slides out (but that is of course not intended. It should slide in on the first click and slide out on the next click....) => So the style="clear:both;" breaks the jQuery toggle Function, but why??

2.) If I remove the style="clear:both;" (which seem to cause this problem) then I get another strange behaviour that the Element to Toggle is displayed (=the rendering of the slide) not in its correct position but rather on the right hand side and jumps then after rendering to the final position. But why is this rendering done on the righthand side, when it later jumps back to the correct position??? (So jQuery knows where the correct position actually is....)

I would really be grateful if someone can just confirm this is a strange bug in jQuery so I can submit this as bug. Or if someone has a solution to the problem this would be even more great!

Thank you very much!!

<!DOCTYPE HTML PUBLIC"-// W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>
*.item {clear:both;}
*.item > *.label { display:block; float:left; width:150px; }
*.item > *.content { display:block; float:left; width:220px;}
  </style>

<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>


<body>
  <form method="GET" accept-charset="UTF-8" action="dddd">

    <div class="item">
      <span class="label">
        <label for="note">Label 0
        </label>
      </span>
      <span class="content">
        <textarea id="coafasf" name="casfasfasf" cols="30" rows="4">
        </textarea>
      </span>
    </div>


<script type="text/javascript">

        function toggleElement() {
          $("#notexid").slideToggle("slow");
        }

        $(document).ready ( function() {

          $("#notexid").before('<div class="item"><span class="label">&nbsp;<\/span><span class="content"><a href="javascript:toggleElement();"> CLICK HERE TO TOGGLE  <\/a><\/span><\/div>');

        }
        );

      </script> 


    <!-- INSERT style="clear:both;" Solves the formating Problem but results in a broken toggle -->

    <div id="notexid" style="clear:both;">
      <div class="item">
        <span class="label">
          <label for="note">Label 1
          </label>
        </span>
        <span class="content">
          <textarea id="test" name="test" cols="30" rows="2">
          </textarea>
        </span>
      </div>

    </div>      

    <div class="item">
      <span class="label">
        <label for="teasst">Label 2
        </label>
      </span>
      <span class="content">
        <input id="aaaaaa" name="asdfasfasf" type="text">
      </span>

    </div>


  </body>
</html>

Upvotes: 2

Views: 2391

Answers (1)

Shog9
Shog9

Reputation: 159590

The problem

You're floating everything that might otherwise give that div height. So when jQuery goes to animate it, and it checks the height to see if it should shrink or expand it, it sees 0 and decides to expand. Every time.

One solution

An easy (and common) fix for this is to simply put something after the floating children, set to clear them and therefore force the parent to have height - for instance:

<div id="notexid" style="clear:both;">
  <div class="item" >
    <span class="label"><label for="note">Label 1</label></span>
    <span class="content">
      <textarea id="test" name="test" cols="30" rows="2" ></textarea>
    </span>
  </div>

  <br clear="all"> <!-- you could probably find something less useless... -->

</div>

But that's ugly. You have to modify your markup, and keep adding these extra trailing elements, regardless of whether or not you have any use for them.

A better solution

Instead, I suggest modifying your styles to reduce the number of floating elements:

*.item > *.label { display:block; float:left; width:150px; }
*.item > *.content { display:block; width:220px; overflow:hidden; }

Now, only the labels float. The content sits and takes up space normally, letting the labels float nearby. Note the addition of the overflow:hidden style: this keeps oversized children from breaking out of the content blocks and ruining your layout.

Upvotes: 4

Related Questions