Ẩn / hiện Chat Box (Ver 2)

/
chat box v2
Hôm nay lang thang trên Google thì tìm được đoạn code ẩn / hiện chat box khá hay.


Code này có thêm hiệu ứng smooth khá ấn tượng nhưng lại hoàn toàn không dùng đến Jquery hay Mootools, cho nên có thể yên tâm về vấn đề tốc độ. Mình có thiết kế thêm cái button.



Sau đây là code của Chat Box V2 (chèn phía trên thẻ </body>)
<style type='text/css'>
.gb_fixed{position:fixed;top:30px;right:0px;z-index:+10;}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:4px solid #bf3989;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#fff;
padding:0 3px 3px 3px;
}
</style>
<div class='gb_fixed'>
<table cellpadding='0' cellspacing='0' id='hidden_gb2'>
<tr><td><div><a href='javascript:void(0)' onclick='gb_showHideGB()'><b><center>[ Đóng Chat Box ]</center></b></a></div>

Code Shoutbox/Cbox

</td></tr></table></div>
<script type='text/javascript'>
//<![CDATA[
var gb_obj = document.getElementById("hidden_gb2");
var gb_finish = false;

function gb_setInitBehaviour(){
gb_obj.isHidden = true;
gb_setOpacity(gb_obj, "0.01");
}
function gb_setOpacity(obj, opacity){
opacity = opacity.substr(0, 4);
obj.style.opacity = opacity;
obj.style.filter = "alpha(opacity="+(Math.floor(parseFloat(opacity)*100)).toString()+")";
//writex(opacity);
}
function gb_showGB(){
gb_obj.style.display = "block";
gb_changeOpacityTo(1, "");
gb_obj.isHidden = false;
}
function gb_hideGB(){
gb_changeOpacityTo(0.01, "gb_obj.style.display = \"none\"");
gb_obj.isHidden = true;
}
function gb_changeOpacityTo(fin, funcStr){
var init = parseFloat(gb_obj.style.opacity.substr(0, 4));
var d = init <= 0.2 ? 0.04 : init <= 0.6 ? 0.08 : 0.20;
var m = fin>init ? 1 : -1;
var opacity = init + d * m;
if((fin-opacity)*(fin-init)<0){opacity = fin;}
gb_setOpacity(gb_obj, opacity.toString());
if(opacity != fin){setTimeout("gb_changeOpacityTo("+fin.toString()+", '"+funcStr+"')", 50);}
else{eval(funcStr);}
}
function gb_showHideGB(){
if(gb_obj.isHidden){gb_showGB();}
else{gb_hideGB();}
}
function writex(str){
document.getElementById("wx").innerHTML += str + " ";
}
gb_setInitBehaviour();
//]]>
</script>

<div class='gb_fixed' style='z-index:+5'>
<a href='javascript:void(0)' onclick='gb_showHideGB()'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdxPV-gobpNgoIaSv4yRe4aQ-gsKEgs3SxQ1hIiYhx0GGfImCs9IcMhdpeZ2OloCOI5KmiDHGz47M5Uw1y9jTW8g89kzVXiEMWcTG68Y7BXlZPIaCKbxE1TiU9ad-UUMzKFex3T0RJJeM/s1600/cbutton.png'/>
</a></div>

Do không biết ai là tác giả đoạn code nên ở đây không ghi nguồn.
Add a Comment

23 comments

:(( tuyệt vời ! chúc blog anh mạnh khỏe hùng mạnh =d>

1/23/2011 comment-delete

Cái này có vẻ hay hơn với cách cổ điển .
Cách cổ điển lúc click vào Chatbox nó chạy từ từ có cảm giác nặng nề .
Nice tut !

1/24/2011 comment-delete

Nhận thiết kế button chat box cho bác nào có nhu cầu chém gió nhé =))

1/24/2011 comment-delete

Đúng cái mình cần hehe

Phải công nhận một điều là sau khi đọc blog này mình có cái nhìn hoàn toàn khác về blogspot, trước đây nghĩ nó không có khả năng tùy biến cao như vậy @@ thật kinh dị

6/04/2011 comment-delete

Cho mình hỏi nhé
Cái này vậy chèn code của cbox vào đâu? nếu mình dùng chatango thì sao noct.

7/05/2011 comment-delete

Bạn đã đọc kĩ chưa ?

7/06/2011 comment-delete

Dùng Chatango ko đc Noct ơi

7/25/2011 comment-delete

Cái này muốn thay button làm sao anh Noct o_O! Mình có thể đưa shoutmix vào thay thế cbox được không anh??

10/29/2011 comment-delete

@Kelvinđược, thay vào đoạn màu đỏ ấy.

10/31/2011 comment-delete

Cái này có thể thay đổi vị trí nút màu đỏ "chat box" ra khu vực khác ko Noct ?

11/05/2011 comment-delete

hì cảm ơn bác noct, mình nhét đoạn code facebook vô cũng đc, đẹp lắm

11/07/2011 comment-delete

Anh Noct ơi, em em vẫn không hiểu lắm, muốn Ẩn / hiện Chat Box (Ver 2) cho blog thì blog phải có chèn Chatbox vào trước hả anh? Em dùng Cbox thì được rồi nhưng nó hiển thị theo kiểu Wiget, đâu có trượt theo thanh bên... Em không biết rõ về cái đó, em chèn đoạn code vào như anh bảo thì nó báo lỗi...

Cbox em tạo là cái này nè anh... http://ybclass.cbox.ws/

code này lỗi ở trình duyệt IE

11/18/2011 comment-delete

Cái này của noct khá hay đó nhưng có cách nào để khi nhấp vào thì nó mở khung chat box rồi nhấp tiếp thì nó đóng lại không noct?

12/01/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

12/12/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

12/12/2011 comment-delete

ban nao cho minh xin code
chatbox duoc khong

@GIÁO XỨ TRUNG NGHĨA Chat box như bên mình, thì bạn đăng ký tại http://chatango.com/ rồi tạo 1 chat box mới

@Võ Quốc AnNhấn Đóng Chat box là đóng thôi mà

Sao không dược bạn ơi, m copy hết code (bỏ chữ màu đỏ, pass trước thẻ /body> giống bạn chỉ;
M làm thử no chỉ hiện ra chữ "Đóng text box" thôi, không hiện khung để chat, giúp m với.

4/04/2012 comment-delete

@Rin Ledòng đỏ là code của khung chat, bạn xóa đi thì nó không hiện. Bạn cần đăng kí một dịch vụ chat (cbox, shout box...) thì sẽ nhận được đoạn code này.

4/04/2012 comment-delete

Dán code vào hiện khung thôi chứ nó không hoạt động ,chẳng vitế dc chữ gì trong đó cả.

11/02/2012 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License