Довольно интересно получилось, при клике по правилам с эффектом аккордеона
с верхней части сайта выскакивает окошко с правилами для мини-чата
Скрипт написан при помощи библиотеки jQuery, работает во всех браузерах
IE - Не тестировал
Довольно легко изменить под свой дизайн.
Установка: 1. Ставим где хотим видеть кнопку вызова окна с правилами :
Код
<div style="padding:2 1 6 1;">
<a class="button" style="padding:1px 23px 1px 23px;background:#363636;border:1px solid #424242;width:100%;" href="javascript://">Правила для этого чата</a>
</div>
Это в CSS:
Код
#box{
display:block;
background:#333;
height:165px;
padding:10 10 0 10;
width:450px;
border:2px solid #444;
color:#dedede;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
opacity: 0.9;
}
#box p{
display:block;
font-size:12px;
background:url('http://for-ucoz.my1.ru/scripts/warning.png') no-repeat 10px top;
padding-left:90px;
}
#box p b{
font-size:20px;
display:block;
}
Ставим в нижнюю часть сайта:
Код
<div id="box">
<p><b>В мини чате запрещается: </b>
1. Писать 3-и или более сообщений подряд. <br>
2. Использовать более 3 смайлов в 1 сообщении. <br>
3. Писать часто с включённым Caps-Lock'ом. <br>
4. Выражаться не культурными словами ( Матами ). <br>
5. Устраивать какие либо разборки ( Для этого есть ЛС ). <br>
6. Рекламировать свой сайт. <br>
7. Оскорблять пользователей.
</p>
</div>
Для подключения библиотеки jQeury, ставим данный код в верхнюю часть сайта:
Код
<script type="text/javascript" src="http://for-ucoz.my1.ru/scripts/jquery.min.js"></script>
<script type="text/javascript" src="http://for-ucoz.my1.ru/scripts/jquery.easing.1.3.js"></script>
<script>
$.fn.bounceBox = function(){
this.css({
top : '-30%',
marginLeft : -this.outerWidth()/2,
position : 'fixed',
left : '80%'
});
return this;
}
$.fn.bounceBoxShow = function(){
this.stop().animate({top:50},{easing:'easeOutBounce'});
this.data('bounceShown',false);
return this;
}
$.fn.bounceBoxHide = function(){
this.stop().animate({top:-this.outerHeight()});
this.data('bounceShown',false);
return this;
}
$.fn.bounceBoxToggle = function(){
if(this.data('bounceShown'))
this.bounceBoxHide();
else
this.bounceBoxShow();
return this;
};
</script>
<script type="text/javascript" src="http://for-ucoz.my1.ru/scripts/script.js"></script>
Войдите на сайт или Зарегистрируйтесь