.click doesn't work for changing tab container's height

Question

I am using domtab on my site . ( between 'TOUS LES FILMS' and 'AFFICHAGE HORAIRE' ) However the height is not automatically set, that is why I am trying to use jquery to modify it each time I click to them.

Here is the HTML structure of the tab

    <div id="domtab1" class="domtab">
          <ul class="domtabs">
            <li><a id="fl1A" href="#t1">TOUS LES FILMS</a></li>
            <li><a id="fl1B" href="#t2">AFFICHAGE HORAIRE</a></li>
          </ul>
          <div class="flip1A" id="fli1A">
            <h2><a name="t1" id="t1"></a></h2>

               <ol class="rounded-list">

                                            <li><a href="#">Spiderman</a></li>
                                            <li><a href="#">Pokemon</a></li>
                                            <li><a href="#">X men</a></li>
                                            <li><a href="#">Blanche Neige</a></li>
              </ol>

            <p><a href="#top">back to menu</a></p>


          </div>
          <div id="fli1B" class="flip1B" >
            <h2><a name="t2" id="t2"></a></h2>

            <div class="heading2">
               <hr class="gradient_one" />
                <p class="hours_gradient">12h10</p>
              </div>
               <ol class="rounded-list">
                    <li><a href="#">Spiderman</a></li>
                     <li><a href="#">Pokemon</a></li>
                </ol>
              ...

            <p><a href="#top">back to menu</a></p>
          </div>
    </div>

And here are the jquery code I tried but none worked:

              $('#fl1B').on("click", function (e) {
                    var maxHeight2 = document.getElementById("fli1B").scrollHeight;
                    $("#text_var").html(maxHeight2);
                    $("#flip-tabs").css({
                        'height': maxHeight2 + 'px'
                    });
                });

                $("#fl1B").click(function () {
                    var maxHeight2 = document.getElementById("fli1B").scrollHeight;
                    $("#text_var").html(maxHeight2);
                    $("#flip-tabs").css({
                        'height': maxHeight2 + 'px'
                    });
                });

                $('#fl1B').live('click', function () {
                    var maxHeight2 = document.getElementById("fli1B").scrollHeight;
                    $("#text_var").html(maxHeight2);
                    $("#flip-tabs").css({
                        'height': maxHeight2 + 'px'
                    });
                });

Be sure to put your click events inside a dom ready function. See http://api.jquery.com/ready/ for more info — Kevin, Jul 15 '13 at 07:48

Balint Bako · Accepted Answer · 2013-07-15T07:51:54.670

1

Your handlers work fine, actually all of them is correct. I've tried the first one:

$('#fl1B').on("click", function (e) {
    var maxHeight2 = document.getElementById("fli1B").scrollHeight;
    console.log("New height: " + maxHeight2);
    $("#text_var").html(maxHeight2);
    $("#flip-tabs").css({
        'height': maxHeight2 + 'px'
    });
});

There is no element with id flip-tabs in your html, so I cannot tell more about the issue. If this is not the issue itself :)

I've added a div with this ID, so you can see that the css call is working too: Check here: http://jsfiddle.net/balintbako/9WYpL/ I'm assigning the handler in the $(document).ready() block, which can be difference in your code.

edited Jul 15 '13 at 07:51

answered Jul 15 '13 at 07:46

Balint Bako

2,500
1
14
13

Thanks for your answer, the issue is indeed because the code wasn't in a `$(document).ready()` block, but for some reason `maxHeight2` = 0 when I click (instead of +1100 ) – Exia0890 Jul 15 '13 at 08:02
Probably the height is 0 when it is not visible (only a guess). Check here: http://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery – Balint Bako Jul 15 '13 at 08:17

.click doesn't work for changing tab container's height

1 Answers1