Show Hide Chatbox With Minimize Button

Ditulis oleh: Adhy Suryadi

Ditulis pada: 11/05/2015

Sebelumnya saya sudah sharing tentang cara membuat show hide chatbox, namun ada sedikit masalah ketika tombol Chat dibuat statis pada sebuah elemen seperti navigasi atau lainnya di bagian atas blog seperti pada blog ini. Artinya, tidak ada tombol standby di bawah blog ketika chatbox ditutup (close) dan pengguna harus mengangkat kursor lagi ke atas blog untuk klik tombol Chat.

Untuk itu saya menambahkan tombol minimize dan maximize pada show hide chatbox sehingga chatbox bisa disembunyian dengan standby di bawah blog dan untuk menampilkannya tinggal klik lagi chatbox-nya sehingga tidak perlu untuk mencari tombol Chat lagi seperti yang bisa dilihat pada animasi gif di atas.

Silahkan gunakan kode-kode di bawah ini:

1. Gunakan kode CSS di bawah ini, silahkan ganti kode CSS yang sudah Anda gunakan dari tutorial sebelumnya.

#chat,#chat:after,.chatbox{transition:all .4s ease-in-out}

#chat,#close-chat,.minim-button,.maxi-button,.chat-text{font-weight:700;cursor:pointer;font-family:Arial,sans-serif;text-align:center;height:20px;line-height:20px}

#chat,#close-chat,.chatbox{border:1px solid #A8A8A8}

#chat:after,#chat:before{position:absolute;border-style:solid;content:""}

.chatbox{position:fixed;bottom:0;left:50px;margin:0 0 -1500px;background:#fff;border-bottom:none;padding:28px 10px 10px;z-index:100000}

#close-chat{position:absolute;top:2px;right:2px;font-size:24px;border:1px solid #dedede;width:20px;background:#fefefe;z-index:2}

#minim-chat,#maxi-chat{position:absolute;top:0;left:0;width:100%;height:20px;line-height:20px;cursor:pointer;z-index:1}

.minim-button{position:absolute;top:2px;right:26px;font-size:24px;border:1px solid #dedede;width:20px;background:#fefefe}

.maxi-button{position:absolute;top:2px;right:26px;font-size:24px;border:1px solid #dedede;width:20px;background:#fefefe;}

.chat-text{position:absolute;top:5px;left:10px;font-size:16px;}

#chat{width:40px;border-radius:3px;padding:2px 8px;font-size:12px;background:#fff;-webkit-transform:translateZ(0);transform:translateZ(0)}

#chat:before{border-width:10px 11px 0 0;border-color:#A8A8A8 transparent transparent;left:7px;bottom:-10px}

#chat:after{border-width:9px 8px 0 0;border-color:#fff transparent transparent;left:8px;bottom:-8px}

#chat:hover{background:#ddd;-webkit-animation-name:hvr-pulse-grow;animation-name:hvr-pulse-grow;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate}

#chat:hover:after{border-color:#ddd transparent transparent!important}

.animated-chat{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}

@-webkit-keyframes tada{0%{-webkit-transform:scale(1)}

10%,20%{-webkit-transform:scale(.9)rotate(-3deg)}

30%,50%,70%,90%{-webkit-transform:scale(1.1)rotate(3deg)}

40%,60%,80%{-webkit-transform:scale(1.1)rotate(-3deg)}

100%{-webkit-transform:scale(1)rotate(0)}

}

@keyframes tada{0%{transform:scale(1)}

10%,20%{transform:scale(.9)rotate(-3deg)}

30%,50%,70%,90%{transform:scale(1.1)rotate(3deg)}

40%,60%,80%{transform:scale(1.1)rotate(-3deg)}

100%{transform:scale(1)rotate(0)}

}

.tada{-webkit-animation-name:tada;animation-name:tada}

@-webkit-keyframes hvr-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}

}

@keyframes hvr-pulse-grow{to{-webkit-transform:scale(1.1);transform:scale(1.1)}

}

2. Untuk kode HTML-nya silahkan ganti dengan kode di bawah ini (simpan di atas kode </body>)

<div class="chatbox" id="chatbox">

<span class="chat-text">Chatting Yuk!</span>

<script>

//<![CDATA[

KODE EKSTRAK SMARTCHATBOX JS

//]]>

</script>

<div id="close-chat" onclick="closeChatbox()">&times;</div>

<div id="minim-chat" onclick="minimChatbox()"><span class="minim-button">&minus;</span></div>

<div id="maxi-chat" onclick="loadChatbox()"><span class="maxi-button">&plus;</span></div>

</div>

<script>

//<![CDATA[

function loadChatbox(){var e=document.getElementById("minim-chat");e.style.display="block";var e=document.getElementById("maxi-chat");e.style.display="none";var e=document.getElementById("chatbox");e.style.margin="0";}

function closeChatbox(){var e=document.getElementById("chatbox");e.style.margin="0 0 -1500px 0";}

function minimChatbox(){var e=document.getElementById("minim-chat");e.style.display="none";var e=document.getElementById("maxi-chat");e.style.display="block";var e=document.getElementById("chatbox");e.style.margin="0 0 -460px 0";}

//]]>

</script>

Untuk mengganti KODE EKSTRAK SMARTCHATBOX JS silahkan simak lagi postingan sebelumnya.

Jika ternyata ketika Chatbox di-minimize terlalu ke atas atau ke bawah, silahkan atur angka -460px pada javascript di atas yang saya marking.

3. Untuk menampilkan tombol Chat-nya silahkan simpan kode di bawah ini di mana Anda ingin menampilkannya.

<div id="chat" class="animated-chat tada" onclick="loadChatbox()">Chat</div>

Live demonya silahkan coba pada iframe di bawah ini.