Chat Box đẹp với chức năng Ẩn và Hiển thị hộp thoại Chat

Hộp Chat Box dạng thu gọn giúp bạn tối ưu hoá hình ảnh của Weblog do ưu điểm không chiếm không gian trên các trang Page, khi cần sử dụng bạn chỉ cần click vào chữ "Chat Box" thì hộp thoại sẽ hiện ra, và cũng thao tác đó bạn ẩn giấu chúng một cách nhanh chóng.

<style type='text/css'>
#gb{
position:fixed;
top:31px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:81px;
width:24px;
float:left;
cursor:pointer;
background:url(&#39;http://lh3.ggpht.com/_rVQLxDFDz0A/SsV-6MbJNAI/AAAAAAAAB8c/gM04HoC_fZA/chatbox.png&#39;) no-repeat;
}
.gbcontent{
float:left;
border:2px solid #f38d02;
background:#e49b00;
padding:3px;
}
</style>

<script type='text/javascript'>
function showHideGB(){
var gb = document.getElementById(&quot;gb&quot;);
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 24-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById(&quot;gb&quot;);
var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>

<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<strong>Chat Box</strong>

<center><!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe scrolling="auto" width="300" frameborder="0" src="http://www2.shoutmix.com/?chinhnd" height="450" title="chinhnd">

<a href="http://www2.shoutmix.com/?chinhnd">View shoutbox</a>

</iframe>

<!-- End ShoutMix --></center>

<div style="text-align: right;">

<a href="javascript:showHideGB()">
<span style="color: #660000;">[Ẩn Chat Box]</span>
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (24-gb.offsetWidth).toString() + "px";
</script>

Posted by nguyen dinh chinh on 11/19/2009. Filed under Blogger, Thu thuat, Widget . You can follow any responses to this entry through the RSS 2.0