Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Папка это?
Всего ответов: 1128
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Разные скрипты

Выплывающий блок

Хочешь сказать спасибо? Кликни на рекламный баннер.

21.03.2012, 21:05
Данное решение идеально использовать для контактных форм или опросов на сайте. Расположить его можно с любого края страницы. Кроме этого, можно использовать красивую картинку для повышения кликабельности.

Первым делом подключаем скрипты и инициализируем функцию перед /head :
Code
<script src="http://mega.ucoz.ua/demo/vipliva_blok/hjquery.min.js" type="text/javascript"></script>
<script src="http://mega.ucoz.ua/demo/vipliva_blok/jquery.tabSlideOut.v1.2.js">

<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //класс элемента вкладки
pathToTabImage: 'http://mega.ucoz.ua/demo/vipliva_blok/login.png', //путь к изображению "обязательно"
imageHeight: '122px', //высота изображения "обязательно"
imageWidth: '40px', //ширина изображения "обязательно"
tabLocation: 'left', //сторона на которой будет вкладка top, right, bottom, или left
speed: 300, //скорость анимации
action: 'click', //опции=: 'click' или 'hover', анимация при нажатии или наведении
topPos: '200px', //расположение от верхнего края/ использовать если tabLocation = left или right
leftPos: '20px', //расположение от левого края/ использовать если tabLocation = bottom или top
fixedPosition: false //опции: true сделает данную вкладку неподвижной при скролле
});

});
</script>

Еще нам понадобится немного стилей оформления :
Code
<style>
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: #29216d 1px solid;
}
</style>

div с кодом, кстати его вставлять можно в любое место вашего документа.
Code
<div class="slide-out-div">
<a class="handle" href="ВАША ССЫЛКА">Content</a>
<h3>Контакты</h3>
<p>Тут может быть все, что угодно!!!</p>
<p>Даже форма обратной связи</p>
</div>

Как Вы можете заметить в коде сверху присутствует ссылка (http://ВАШ САЙТ). Она будет показана пользователям, у которых отключен javascript.
При копировании материала ссылка на источник материала обязательна .





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 4242 | Загрузок: 367 | Рейтинг: 3.4/5
Теги: Выплывающий блок, любой контент в блоке, скрипт, div блок
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Перед Второй Мировой Войной в Нью Йoркcкой телефонной книге насчитывалось 22 Гитлера... и ни одного после..


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта