Панель в левой части сайта на куках by webo4ka. Данная панель будет находится в левой части экрана, примерно п середине, при прокрутки страницы панелька будет опускаться вместе с вами, так же если не нее не наводить, то она будет иметь прозрачность, для того что бы можно было просмотреть что за ней находится, при нажатии на кнопку зеленого цвета, выдвинется панелька и кнопка поменяет цвет на красны, тем самым показывая, что при нажатии на нее панелька закроется, если панель была открыта и вы обновили страницу, то она будет не закрытой, что очень удобно, я в нее ничего не вставлял, я предоставляю эту возможность вам, можете вставть туда например мини-профиль, мини-чат, навигацию по сайту и т.д, но главное не забывайте менять размер окошка в зависимости от того, что вы в него вставите... во общем то на этом всё!
Установка: После
<body> вставляем:
Code
<div onclick="setCookie('openCookieWebo4kaRu', 1, 365); eraseCookie('closeCookieWebo4kaRu'); otkritieWebo4kaRu();" id="openWebo4kaRu" class="openWebo4kaRu"><font color="green" style="font-size: 20px;font-weight: bold;"><br><br><br>></font></div>
<div onmouseover="this.style.opacity='1.0'; document.getElementById('closeWebo4kaRu').style.opacity='1.0';" onmouseout="this.style.opacity='0.7'; document.getElementById('closeWebo4kaRu').style.opacity='0.7'" id="bodyWebo4kaRu" class="bodyWebo4kaRu">
гуляю на webo4ka.ru
<br>
(Панель в левой части сайта на куках by webo4ka)
</div>
<div onclick="setCookie('closeCookieWebo4kaRu', 1, 365); eraseCookie('openCookieWebo4kaRu'); zakritieWebo4kaRu()" onmouseover="this.style.opacity='1.0'; document.getElementById('bodyWebo4kaRu').style.opacity='1.0';" onmouseout="this.style.opacity='0.7'; document.getElementById('bodyWebo4kaRu').style.opacity='0.7'" id="closeWebo4kaRu" class="closeWebo4kaRu"><font color="red" style="font-size: 20px;font-weight: bold;"><br><br><br><</font></div>
<script type="text/javascript">
// by webo4ka.ru
function setCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
setCookie(name, "", -1);
};
if(getCookie('openCookieWebo4kaRu'))
{
function otkritieWebo4kaRu()
{
document.getElementById('openWebo4kaRu').style.display='none';
document.getElementById('bodyWebo4kaRu').style.display='block';
document.getElementById('closeWebo4kaRu').style.display='block';
}
setTimeout(otkritieWebo4kaRu);
}
if(getCookie('closeCookieWebo4kaRu')) {}
else
{
function otkritieWebo4kaRu()
{
document.getElementById('openWebo4kaRu').style.display='none';
document.getElementById('bodyWebo4kaRu').style.display='block';
document.getElementById('closeWebo4kaRu').style.display='block';
}
function zakritieWebo4kaRu()
{
document.getElementById('closeWebo4kaRu').style.display='none';
document.getElementById('bodyWebo4kaRu').style.display='none';
document.getElementById('openWebo4kaRu').style.display='block'
}
}
</script>
<style>
.bodyWebo4kaRu {
background: white;
border:1px solid #666;
border-left:0px;
padding:5px;
word-wrap: break-word;
width:180px;
height:200px;
opacity:0.7;
position:fixed;
bottom:45%;
z-index:1000;
display:none;
}
.openWebo4kaRu {
background: #d4eabb;
border:1px solid #666;
border-left:0px;
padding:5px;
width:15px;
height:200px;
opacity:0.7;
position:fixed;
bottom:45%;
z-index:1000;
cursor: pointer;
}
.openWebo4kaRu:hover {opacity:1.0;}
.closeWebo4kaRu {
background:#eabbbb;
border:1px solid #666;
borger-left:0px;
border-left:0px;
padding:5px;
width:15px;
height:200px;
opacity:0.7;
position:fixed;
left:191px;
bottom:45%;
z-index:1000;
cursor: pointer;
display:none;
}
</style>
размеры ширины и высоты данной панели настраивайте в
width и
height...
Вот
демо готово!