JQuery Callouts

by ghayes

HTML

<div class="attendance-pull-tab" data-pulltab="left" data-target=".container-attendance">
            <div class="pulltab-count">
                <span class="attendees-count">
                    9 attendees for this event
                </span>
            </div>

        </div>
        
        <div class="container-attendance" style="display:none;">
               they are going to put me in the movies; they're going to make a big star out of me, they'll make a film about a mant hat's sad and lonley, and all i have to do is act naturally.  i bet you i'm going to be a big star, might win an oscar, you can never tell.  movies going to make me a big star, because i can play the part so well.  well i hope you come and see me in the movies, then i'll know that you will plainly see.  the biggest foul that ever hit the big time, and all i got to do is act naturally.
</div>

CSS

*[data-pulltab] {
  position:fixed;
  left: 0;
  top: 30px;
}

*[data-pulltab] > .pully {
  !float: right;
  height:250px;
  background: none;
}

*[data-pulltab] > div:last-child {
  !float:right;
}

.attendance-pull-tab {
    margin-top:110px;    
}

.pulltab-count {
  margin-top:30%;
  height: 57px;
  width: 90px;
  color: #fff;
  background-color:rgba(40,40,40,0.8);
  font-weight: bolder;
  padding-top:16px;
  padding-right:9px;
  cursor: pointer;
}

.pulltab-count:hover {
  background-color:rgba(100,100,100,0.8);
}

.container-attendance{
    width: 240px;
}

.bottom {
   height: 300px;
   background-color: rgba(200, 200, 200, 0.8);   
}

JavaScript

$(document).ready(function() {
        $('*[data-pulltab]').each(function() {
           target = $($(this).data('target'));
            if (target.size() == 0) {
              alert('target not found');
              return;
            };
            
            //pully = $('<div>').attr('class', 'pully');
            //tab = $('<div>').attr('class', 'the-tab');
            //$(this).children().appendTo(pully);
            //$(this).append(pully).append(target);
            $(this).append(target);
            target.hide().data('margin', -1 * target.width()).css({'margin-left':-1 * target.width()}).css({
                                                      'overflow':'hidden',
                                                      'transition':'margin 0.3s linear',
                                                      '-webkit-transition':'margin 0.3s linear',
                                                      '-moz-transition':'margin 0.3s linear',
                                                      '-o-transition':'margin 0.3s linear',
                                                      '-ms-transition':'margin 0.3s linear',
                                                      'padding': '0'
                                                     });
                                                     
            
            $(this).children().first().click(function() {
               target.trigger('toggle');
            });
            
            $(target).bind('toggle', function() {
                $(this).show();
                marginLeft = parseInt((new RegExp('([-]?[0-9]+)')).exec($(this).css('margin-left'))[1]);
                if (marginLeft < 0) {
                    $(this).css('margin-left', 0);
                } else {
                    $(this).css('margin-left', (-1 * $(this).width()));   
                }
            });
        });
    });