Форум SAPE.RU

Форум SAPE.RU (http://forum.sape.ru/index.php)
-   Контекстная реклама (http://forum.sape.ru/forumdisplay.php?f=56)
-   -   Хотите задолбать своих посетителей? (http://forum.sape.ru/showthread.php?t=96828)

e-visitor 03.08.2016 10:17

Хотите задолбать своих посетителей?
 
Слепил тут скрипт. Не сам, конечно, а используя мировой опыт: http://shpargalkablog.ru/2013/09/scroll-block.html .
Блок прилипает к верхнему краю браузера. Как, например, здесь.

Подключается легко.
Файл sticky_top_block.js

**************
/*<script>*/
(function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными
var a = document.querySelector('#top_sticker_id'), b = null; // селектор блока, который нужно закрепить
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100%
function Ascroll() {
if (b == null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями
var Sa = getComputedStyle(a, ''), s = '';
for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя
if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
}
}
b = document.createElement('div'); // создать потомка
b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок
var l = a.childNodes.length;
for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков плавающего блока (итого: создан потомок-обёртка)
b.appendChild(a.childNodes[1]);
}
a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение
a.style.padding = '0';
a.style.border = '0'; // если элементу присвоен padding или border
}
if (a.getBoundingClientRect().top <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
b.className = 'stick_to_top';
} else {
b.className = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width
}, false); // если изменить размер окна браузера, измениться ширина элемента
}
})()
/*</script>*/
**************

Расположен в a_lib/js_sticky/

Подключается:
<div id="top_sticker_id" class="sticker_top_block">
Здесь код рекламы
</div>

<!-- Подключать скрипт блока необходимо ПОСЛЕ вывода блока. Иначе не работает -->
<?php echo <<<HERE
<script type="text/javascript" src="$cfg_site_root/a_lib/js_sticky/sticky_top_block.js" charset="windows-1251"></script>
HERE;
?>

Здесь $cfg_site_root - корень вашего сайта. У меня определяется в файле config: либо localhost, либо url.

Вот не знаю, если Гуглорекламу таким образом подключить, Гуглобосс обидится?
Скажите, если кто в курсе.


А, ещё CSS забыл:

/* Блок, прилипающий к верху страницы */
.sticker_top_block {
background: rgba(255,255,255,0.8);
max-width: 100%;
}

.stick_to_top {
position: fixed;
top: 0px; /* если ноль заменить на число (и в скрипте тоже), то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом. Применим, например, при фиксированном сверху меню */
z-index: 101;
}

Anadonam 03.08.2016 10:48

это всё устарело

надо вот так - http://warfiles.ru/show-125210-rossi...r-v-sakah.html
заголовок, картинка. а до текста добраться надо скроллер вниз покрутить , а на нем аккурат баннер висит не промахнетесь.

без мата не оставляю этот сайт как читать захожу. потому как 50% ошибаюсь и кликаю мимо прокрутки по баннеру

e-visitor 03.08.2016 11:30

Да не. Вы шутку юмора не допоняли.
На самом деле, я вовсе не хотел посетителей задолбать.
Просто, если они, вдруг, забыли кликнуть по рекламе, нужно им предоставить такую возможность. :)
А, вообще (ну, в случае, если деньги не нужны), можно в этом блоке меню разместить или ещё что...

SergejF 03.08.2016 11:48

Цитата:

Сообщение от e-visitor (Сообщение 1473811)
Слепил тут скрипт. Не сам, конечно, а используя мировой опыт: http://shpargalkablog.ru/2013/09/scroll-block.html .

Это и css легко делается. О чем, собственно, по Вашей ссылке и говорится.


Цитата:

Сообщение от e-visitor (Сообщение 1473811)
Вот не знаю, если Гуглорекламу таким образом подключить, Гуглобосс обидится?

В правилах AdSense это явно запрещено. Но на некоторых сайтах висят.

e-visitor 03.08.2016 13:25

Цитата:

Сообщение от SergejF (Сообщение 1473819)
Это и css легко делается. О чем, собственно, по Вашей ссылке и говорится.

Пробовал, не получилось. Если Вы умеете (ну хотя бы Гуглорекламу) - код в студию.
А, вообще, этот код мне больше нравится. Здесь реклама со средины страницы к верху прилипает. Слабо такое с CSS сделать?


Нашёл по случаю (к теме отношения не имеет):
http://bigspaceship.github.io/shine.js/
Красиво?
Кто-нибудь работал с этим?
Хочу рекламу таким шрифтом замутить.

SergejF 03.08.2016 14:49

Цитата:

Сообщение от e-visitor (Сообщение 1473821)
Пробовал, не получилось. Если Вы умеете (ну хотя бы Гуглорекламу) - код в студию.

Вот так, например:

Код:

#reklamaleft {
        font-size:1000%;
        color:#800000;
        width: 125px;
        height: 160px;
        position: fixed;
        //position: absolute;
        top:expression(eval(document.documentElement.scrollTop)+20);
        top: 5px;
        left: 0;
        z-index: 1;
}

#reklamaright {
        font-size:100%;
        color:#800000;
        width: 125px;
        height: 600px;
        position: fixed;
        //position: absolute;
        top:expression(eval(document.documentElement.scrollTop)+20);
        top: 5px;
        right: 0;
        z-index: 1;
}


Цитата:

Сообщение от e-visitor (Сообщение 1473821)
Здесь реклама со средины страницы к верху прилипает. Слабо такое с CSS сделать?

Прилипающую сделать не пробовал. Только фиксированную. Смотреть надо.

e-visitor 03.08.2016 15:54

Ну, и что за хрень получилась (смотреть справа)
http://www.stroyoffis.ru/mds_metodic...80_15_2000.php
Эту страницу можно читать?
Реклама закрывает текст.
Отпишитесь, как посмотрите. Нужно скорее удалить.

Добавлено через 27 минут
Да ну на. Отключил (у меня там люди). Захотите посмотреть - черкните, включу.

SergejF 03.08.2016 16:47

Цитата:

Сообщение от e-visitor (Сообщение 1473835)
Ну, и что за хрень получилась (смотреть справа)
http://www.stroyoffis.ru/mds_metodic...80_15_2000.php
Эту страницу можно читать?
Реклама закрывает текст.

В чём там у Вас проблема была? Неподвижный блок на одной из сторон, который Вы сделали по css, закрывал текст? Так и Ваш вертикальный блок сверху тоже закрывает текст!

e-visitor 03.08.2016 16:52

Цитата:

Сообщение от SergejF (Сообщение 1473841)
В чём там у Вас проблема была? Неподвижный блок на одной из сторон, который Вы сделали по css, закрывал текст? Так и Ваш вертикальный блок сверху тоже закрывает текст!

Но этот текст можно читать, прокрутив страницу.

SergejF 03.08.2016 17:13

Цитата:

Сообщение от e-visitor (Сообщение 1473842)
Но этот текст можно читать, прокрутив страницу.

Ну так поставьте "свой" блок сбоку и текст также нельзя будет читать.

Или сделайте поля по сторонам не менее ширины неподвижного блока и проблема опять будет решена.

К слову сказать, Вам не кажется, что контент "Стройоффиса" следует расположить в блоке, шириной 900-1200 пикселей, а не растягивать по всему экрану?


Часовой пояс GMT +3, время: 20:03.

Работает на vBulletin® версия 3.8.7.
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Перевод: zCarot
SAPE.RU — система купли-продажи ссылок с главных и внутренних страниц сайтов.