Hide and show divs on click with animation of absolute position & remove them on hide

I want to:

  1. click on the "NEW" button adds new DIV into "CONTAINER" - this works fine

  2. click on the "MOVE" button - take $array - then move container to good position - then for .each item in $array append new 'DIV' in "CONTAINER" - then animate "CONTAINER to "left: 0" - this doesn't work

  3. click on the "REMOVE" button - animate "CONTAINER" out of screen, and remove all DIVs from "CONTAINER"

  4. JsFiddle Example

  5. Why it does not work on web?

HTML

<div class="panel">
    <button class='new'> + </button>
    <button class='move'> &gt; </button>
    <button class='remove'> &lt; </button>
</div>
<div class="container">
</div>

CSS

.block {
   margin       : 0px;
   width        : 200px;
   display      : inline-block;
   border-right : thin dashed #aaa;
   opacity      : 0;
}
.head {
   margin : 0px;
   padding: 5px;
   height : 30px;
   background-color: red;
   color  : white;
}
.body {
   margin : 0px;
   padding: 5px;
   height : 190px;
   background-color: #ddd;
   color  : black;
}
.panel {
   position  : absolute;
   top       : 50px;
   padding   : 5px;
   color     : #FFF;
   font-size : 15px;
   background: #d30;
   height    : 25px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   cursor    : pointer;
}
.container {
   position: absolute;
   top  : 90px;
   left : 0px;
}
button{
   width   : 25px;
   background  : none;
   cursor      : pointer;
   font-family : 'voltaeftu-regular',Times New Roman;
   font-size   : 18px;
   color   : #fff;
   border  : none;
   margin  : 0px;
   padding : 0px;
}

jQuery:

$(".remove").click(function(){
    var x_width = $('.container').find('.block').width();
    var x_all = $('.container').find('.block').size();
    var all_width = -10 - ( x_width * x_all ) ;
    $(".container").animate({
        left: all_width
    }, 500 );
 });

$(".new").click(function()  {
       $('.container').append( $('<div class="block" id="new"><div class="head">HEADER</div><div class="body">text text text</div></div>', {
           css: {
               display: 'inline-block',
               opacity: 0
           }
       }).animate({ opacity: 1  }) );
});

// array
var $array = [ '001', '002', '003', '004', '005' ];

$(".move").click(function(){
   var array_length = $array.length;
   var array_width = 0 - array_length * 200;
   $('.container').css ({ left: array_width});
   $.each( $array , function(item, value){
               $('.container').apped('<div class="block" id="'+value+'"><div  class="head">HEADER '+value+'</div><div class="body">text text  text</div></div>', {
                       css: {
                           display: 'inline-block',
                           opacity: 0
                           }
                   }).animate({ opacity: 1  });
           });
    $('.container').animate({ left: 0});
});

Answers


One issue you are having is that you are not counting the width of the original block when moving it to left:0, here is a fix:

var block_width = $(".block").width();
var array_width = (array_length * block_width) - block_width;
$('.container').css ({ left: array_width});

Before, you were moving it over the width of itself * the length of the array, which means it got pushed off the screen since it's already existing width wasn't figured in.

But after I fix that, the divs just kind of stack up. I assume you want them to line up horizontal?


Whenever I have done javascript, the order in which you declare the DOM object and event handler matter. In your web example(on number 5) your jquery event handling (click, etc) is set before those DOM objects are even created with HTML. Try moving your js script to the bottom of the page right before the end body tag.


You should have all those javascripts inside the $(document).ready() function:

$(document).ready(function() {
   // put all your jQuery goodness in here.
 });

Need Your Help

Web Map API needed for displaying multiple locations to user

map geolocation

What is a good map API that can display not just a static image, but the ability for the user to interact, zoom in and out. Additionally, what is a map API that can accept a street address and not ...