When button is clicked, the div jumps out of place

Question

Problem

When I click the buttons for playoff season or regular, the divs that holds the content players-list and players-regular appear to jump out of place when they fade in and out. How do I prevent this from happening?

I've tried using position fixed on some of elements, but things would get way out of place. I've included a JSFiddle here: http://jsfiddle.net/onlyandrewn/gcthaffs/

Click listener

 // Click listener, toggles between sheets
    $('button').click(function() {
        $('button').removeClass("active");
        $(this).toggleClass("active");

        if ($('button.regular').hasClass('active')) {
            $('#players-list').fadeOut(500);
            $('.note').fadeOut(500);
            $('#players-regular').fadeIn(2000);
        } else {
            $('#players-regular').fadeOut(500);
            $('#players-list').fadeIn(2000);
            $('.note').fadeIn(2000);
        }
    });

index.html

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8">
    <title>Wheat Kings' leading point scorers</title>
    <meta name="description" content="Wheat Kings' leading point scorers">
    <meta name="author" content="Andrew Nguyen">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
</head>
<body>
    <h1>Wheat Kings leading goal scorers</h1>
    <p class="year"></p>
    <button class="playoffs active">Playoffs</button>
    <button class="regular">Regular Season</button>

    <div class="top">
        <div id="players-list"></div>
        <div id="players-regular"></div>

        <p class="note">Note: Since there was a five-way tie for 6th place, players who scored two goals were then ranked by their total points in the playoffs. The other two players not listed here are Nolan Patrick and Macoy Erkamps.</p>
    </div><!-- /.top -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

    <!-- This is where the template for facts goes -->
    <script id="players" type="text/x-handlebars-template">
        <div class="container">
            <div class="group">
                <div class="{{row}}">
                    <p class="goals">{{goals}}</p>
                    <img src="{{image}}" alt="" class="head">
                    <p class="name">{{name}}</p>
                    <p class="position">{{position}}</p>
                </div><!-- /.group -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </script>

    <script type="text/javascript">
    // Click listener, toggles between sheets
    $('button').click(function() {
        $('button').removeClass("active");
        $(this).toggleClass("active");

        if ($('button.regular').hasClass('active')) {
            $('#players-list').fadeOut(500);
            $('.note').fadeOut(500);
            $('#players-regular').fadeIn(2000);
        } else {
            $('#players-regular').fadeOut(500);
            $('#players-list').fadeIn(2000);
            $('.note').fadeIn(2000);
        }
    });

      // Original
      var public_spreadsheet_url = "https://docs.google.com/spreadsheets/d/1RMN49oyRlTxW5kv8MnYJwQRttis2csgVFH46kyORCaQ/pubhtml";

      $(document).ready( function() {
        Tabletop.init( { key: public_spreadsheet_url,
            callback: showInfo,
            parseNumbers: true } );
      });
      function showInfo(data, tabletop) {
        var source   = $("#players").html();
        var template = Handlebars.compile(source);

        // The actual name of the sheet, not entire .csv
        $.each(tabletop.sheets("Playoffs").all(), function(i, fact) {
            var html = template(fact);

          // You need an element with this id or class in your HTML
          $("#players-list").append(html);
          $('.container').eq(i).addClass(data.Playoffs.elements[i]);

          // This logs all the objects in the sheet
          // console.log(data);

          // This logs just validity
          // console.log(data.Playoffs.elements[i]);
      })

        // If you need to get data from a second sheet in single Google Doc
        $.each(tabletop.sheets("Regular").all(), function(i, fact) {
            var html = template(fact);

          // You need an element with this id or class in your HTML
          $("#players-regular").append(html);
          $('.container').eq(i).addClass(data.Regular.elements[i]);

          // This logs all the objects in the sheet
          // console.log(data);

          // This logs just validity
          // console.log(data.Regular.elements[i]);
      });
    }
</script>
</body>
</html>

base.scss

/*----------------------------------
MAIN STYLES
----------------------------------*/

html {
  font-size: 62.5%; /* 10px browser default */
}

body {
    max-width: 600px;
    padding: 10px;
}

.top {
    max-width: 600px;
}

#players-list,
#players-regular {
}

h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
}

.note {
    position: relative;
    width: 95%;
    left: 3%;
}

Answer 1

This is happening because the fadeOut is not done when the fadeIn starts. You end up with both divs visible for a short period of time, and when the fadeOut is done the first div is hidden and you see the jump.

How about something like this:

$('#players-list').fadeOut(500, function() {
     $('#players-regular').fadeIn(500);
 });

This way the second div is displayed only when the first one is completely hidden. Also, decrease the animation duration a bit, it makes for better user experience ;).

When button is clicked, the div jumps out of place

Question

Problem

Click listener

index.html

base.scss

1 answers

solution1
2 ACCPTED 2015-04-17 20:46:08

When button is clicked, the div jumps out of place

Question

Problem

Click listener

index.html

base.scss

1 answers

solution1 2 ACCPTED 2015-04-17 20:46:08

solution1
2 ACCPTED 2015-04-17 20:46:08