How to create a hidden show shoutbox

In this first article I will membertahu how to make the show hidden shoutbox. you can use it as a widget on your blog or website. The following is the source code from the hidden show shoutbox.

demo hidden show shoutbox

<br /> <br /> <style type="text/css"><br /> #gb{position:fixed;top:50px;z-index:+1000;}<br /> * html #gb{position:relative;}<br /> .gbtab{height:100px;width:30px;float:left;cursor:pointer;background:#000000 url(http://i48.tinypic.com/2iswqxw.gif) no-repeat;}<br /> .gbcontent{float:left;border:2px solid #FF0000;background:#000000;padding:10px;}<br /> </style><br /> <script type="text/javascript"><br /> function showHideGB(){<br /> var gb = document.getElementById("gb");<br /> var w = gb.offsetWidth;<br /> gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);<br /> gb.opened = !gb.opened;<br /> }<br /> function moveGB(x0, xf){<br /> var gb = document.getElementById("gb");<br /> var dx = Math.abs(x0-xf) > 10 ? 5 : 1;<br /> var dir = xf>x0 ? 1 : -1;<br /> var x = x0 + dx * dir;<br /> gb.style.right = x.toString() + "px";<br /> if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}<br /> }<br /> </script><br /> <div id="gb"><br /> <div class="gbtab" onclick="showHideGB()"> </div><br /> <div class="gbcontent"><br /> <div align="center"><a style="color:#FF0000; font-size:20px; font:Arial, Helvetica, sans-serif; font-weight:bold" href="http://scriptexample.blogspot.com" rel="dofollow">Free Script and Source Code</a></div><br/><br /> <br /> <i>" input your shoutbox code here "</i><br /> <br /> <div style="text-align:right"><br /> <a style="color:#FF0000; text-decoration:none; font-weight:bold" href="javascript:showHideGB()"><br /> [close]<br /> </a><br /> </div><br /> </div><br /> </div><br /> <script type="text/javascript"><br /> var gb = document.getElementById("gb");<br /> gb.style.right = (30-gb.offsetWidth).toString() + "px";<br /> </script></div></div><br />

CSSJavascriptWidget

By Blogger Biasa - January 03, 2010 - Add Comment