jQuery addClass example

Change class name on click in jQuery

by ecropolis

HTML

<div class="superhero-chat" style="position:fixed; bottom: 20px; right:20px;"></div>
<div id="superhero-chat-pane" style="position:fixed; right: -2000px;background:#FFF;background:#CCC;padding 15px;">
  <div id="superhero-chat-out"></div>
  <div id="superhero-chat-cta"></div>
  <div id="superhero-chat-ctrl">
    <textarea id="superhero-chat-in"></textarea>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.superhero-chat {
  background: #0084ff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 80px;
}

#superhero-chat-pane,
#superhero-chat-ctrl{
  width:300px;
}


#superhero-chat-ctrl {
  position: absolute;
  bottom: 0;
  margin: 0 15px; 
}

#superhero-chat-ctrl textarea {
  width: 100%;
  margin: 0 15px; 
  line-height: 1em;
}

JavaScript

// find elements
//https://stackoverflow.com/questions/7882374/how-do-i-implement-jquery-noconflict
//https://github.com/getify/LABjs
var shc = {}
shc.$cht = $('#superhero-chat-pane');
shc.launch = $('.superhero-chat');
shc.vpH = $(window).height();
shc.$cht.css({'height':shc.vpH+'px',top:0});

shc.launch.on('click', function(e){
  shc.$cht.css({'right':'20px'});
});

this.submit = function(id, $form){
        var data = $form.serialize() + '&id=' + id;
        var d = $.Deferred();
        $.ajax({
            url:  $form.attr('action'),
            data: data,
            type: 'POST'
        }).done(function(res) {
            d.resolve(res);
        }).fail(function(){
            d.reject();
        });
        return d.promise();
    }