"Facebook Messenger Show Hide With Drag Move"
Bootstrap 3.3.0 Snippet by agiltriono

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="chat-fb" id="Chatbox">
<div class="chat-header">
Messenger
</div>
<div class='close-chatt' id="close-Box">
<i class="glyphicon glyphicon-ban-circle remove-chat"></i></div>
<div class="messages_chat">
<p>
Hai! You Can Send Anything Word Here... Thank You.</p>
<!-- You Can Add Your Facebook Page Plugin messenger Below -->
<script type='text/javascript'>
//<![CDATA[
document.write('<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fagieltriono%2F&tabs=messages&width=250px&height=310px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=308120199335019" width="250px" height="310px" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>');
//]]>
</script>
<!-- END IFRAME -->
</div>
</div>
<center>
<h2>
Chat With Me ?</h2>
</center>
<div class="button btn-centered">
<button id="open-box"><span class="glyphicon glyphicon-comment"></span> Open Messenger </button>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
/* chat */
.chat-fb{background:#fff;width:270px;height:435px;position:fixed;bottom:0px;right:14px;border:none;border-radius:5px 5px 0 0;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);box-shadow:0 10px 50px 0 rgba(0,0,0,0.25);overflow:hidden;z-index:1000000;display:none}
.messages_chat{cursor: move;text-align:center;text-decoration:none;display:block;height:100%;padding:5px 5px 15px}
.chat-header{margin:0 auto;padding:0 10px;height:35px;line-height:35px;font-size:16px;font-weight:700;color:#fff;text-align:left;display:block;cursor: move;background:#00b0ff}
.messages_chat p{color:#616161;font-size:14px;margin:10px}
.close-chatt{position:absolute;top:0;right:0;font-family:Arial;font-size:24px;font-weight:700;cursor:pointer;width:24px;color:#fff;height:35px;line-height:35px;text-align:center;opacity:.7}
.close-chatt:hover{opacity:1}
.Chat-box-on{display:block!important;}
.remove-chat {position: relative;top: 1px;left: -4px;display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: 400;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
button {border-radius:4px;color:#fff;outline:none;font-family:;font-size: 16px;line-height: none;border:none;background:#00b0ff}
button:hover,btn-default:hover{border-radius:4px;color:#ddd;border:#00b0ff}
.btn-centered{text-align:center}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function(){
$("#open-box").click(function () {
$('#Chatbox').addClass('Chat-box-on');
});
$("#close-Box").click(function () {
$('#Chatbox').removeClass('Chat-box-on');
});
})
$(function() { $( "#Chatbox" ).draggable({ containment: "window" }); });
//<![CDATA[
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
//]]>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard
Creating password field text hide show via a single class
Bootstrap Drag and Drop Upload
Show Dropdown Hover & Caret Up

Questions / Comments: