скрипт баннера в правом нижнем углу

J
На сайте с 06.07.2011
Offline
150
1316

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


<script>function popclose() { document.getElementById('popwindow').style.display='none'; }</script>
<div id=popwindow style='width: 300px; position: fixed; bottom: 10px; right: 10px; z-index: 1000000;'>
<div style='width: 290px; padding: 5px; font-family: monospace; font-size: 10px; background-color: #000000; color: #FFFFFF; text-align: center; cursor: pointer; float: left;' onClick='javascript:popclose(); return false;'>CLOSE ... [X]</div>
<div style='width: 300px; float' left;'>

код баннера

</div>
</div>

Но он не расширяется под мобильные устройства. Если вот ставить код от какой-нибудь мобильной партнёрки - то баннер идёт на весь экран, как нужно.

Sly32
На сайте с 29.03.2012
Offline
262
#1

А как вы хотите чтоб он у вас расширялся, если там фиксированная ширина?

сделайте ширину блока плавающей, пропишите отдельные стили для мобильных через @media

Информации на эту темы чуть более чем достаточно

Крошка
На сайте с 23.12.2009
Offline
80
#2

Вместо


<div id=popwindow style='width: 300px; position: fixed; bottom: 10px; right: 10px; z-index: 1000000;'>
<div style='width: 290px; padding: 5px; font-family: monospace; font-size: 10px; background-color: #000000; color: #FFFFFF; text-align: center; cursor: pointer; float: left;' onClick='javascript:popclose(); return false;'>CLOSE ... [X]</div>
<div style='width: 300px; float' left;'>

делаете


<style>
#popwindow
{width: 300px; position: fixed; bottom: 10px; right: 10px; z-index: 1000000;}

.b1
{width: 290px; padding: 5px; font-family: monospace; font-size: 10px; background-color: #000000; color: #FFFFFF; text-align: center; cursor: pointer; float: left;}

.b2
{width: 300px; float' left;}

@media screen and (max-width: 450px) {
.b1
{width: 100%;}

.b2
{width: 100%;}
}

<style>
<div id=popwindow>
<div class='b1' onClick='javascript:popclose(); return false;'>CLOSE ... [X]</div>
<div class='b2'>
LinkBoss.net - Трастовые ссылки для увеличения трафика в 10 раз! (http://linkboss.net/)
J
На сайте с 06.07.2011
Offline
150
#3
Крошка:
Вместо


<div id=popwindow style='width: 300px; position: fixed; bottom: 10px; right: 10px; z-index: 1000000;'>
<div style='width: 290px; padding: 5px; font-family: monospace; font-size: 10px; background-color: #000000; color: #FFFFFF; text-align: center; cursor: pointer; float: left;' onClick='javascript:popclose(); return false;'>CLOSE ... [X]</div>
<div style='width: 300px; float' left;'>



делаете


<style>
#popwindow
{width: 300px; position: fixed; bottom: 10px; right: 10px; z-index: 1000000;}

.b1
{width: 290px; padding: 5px; font-family: monospace; font-size: 10px; background-color: #000000; color: #FFFFFF; text-align: center; cursor: pointer; float: left;}

.b2
{width: 300px; float' left;}

@media screen and (max-width: 450px) {
.b1
{width: 100%;}

.b2
{width: 100%;}
}

<style>
<div id=popwindow>
<div class='b1' onClick='javascript:popclose(); return false;'>CLOSE ... [X]</div>
<div class='b2'>

Спасибо, но всё равно не растягивается на весь экран. Пробовал так же в пустой хтмл вставить, думал может код у сайта кривой.

---------- Добавлено 16.06.2016 в 14:20 ----------

Sly32:
А как вы хотите чтоб он у вас расширялся, если там фиксированная ширина?
сделайте ширину блока плавающей, пропишите отдельные стили для мобильных через @media
Информации на эту темы чуть более чем достаточно

Спасибо за ответ, я думаю есть же у кого-нибудь рабочий уже вариант. Если не трудно, поделились бы.

dmkich
На сайте с 18.09.2009
Offline
68
#4

Дайте урл где он у вас выводиться

LinkBoss.net - Трастовые ссылки для увеличения трафика в 10 раз! (http://linkboss.net/)
Sly32
На сайте с 29.03.2012
Offline
262
#5
jano:
Спасибо, но всё равно не растягивается на весь экран. Пробовал так же в пустой хтмл вставить, думал может код у сайта кривой.

---------- Добавлено 16.06.2016 в 14:20 ----------



Спасибо за ответ, я думаю есть же у кого-нибудь рабочий уже вариант. Если не трудно, поделились бы.

Вам полезнее будет разобраться один раз самому. Готового кода нет, в том что вам дали - явная ошибка. На скорую руку я бы сделал так для мобилки добавить к вашему коду


@media screen and (max-width: 450px) {
#popwindow{
width: 100%;
position: fixed;
bottom: 1px; //тут отступ от низа какой вам надо
}
}
J
На сайте с 06.07.2011
Offline
150
#6
dmkich:
Дайте урл где он у вас выводиться

Вставил в пустой хтмл такой код:


<script>function popclose() { document.getElementById('popwindow').style.display='none'; }</script>
<style>
#popwindow
{width: 300px; position: fixed; bottom: 10px; right: 10px; z-index: 1000000;}

.b1
{width: 290px; padding: 5px; font-family: monospace; font-size: 10px; background-color: #000000; color: #FFFFFF; text-align: center; cursor: pointer; float: left;}

.b2
{width: 300px; float' left;}

@media screen and (max-width: 450px) {
.b1
{width: 100%;}

.b2
{width: 100%;}
}

</style>
<div id=popwindow>
<div class='b1' onClick='javascript:popclose(); return false;'>CLOSE ... [X]</div>
<div class='b2'>

Здесь код баннера

</div>
</div>

Проверил на мобильном, всё равно баннер маленький. Баннер стоит iframe-ом.

---------- Добавлено 16.06.2016 в 21:16 ----------

Sly32:
Вам полезнее будет разобраться один раз самому. Готового кода нет, в том что вам дали - явная ошибка. На скорую руку я бы сделал так для мобилки добавить к вашему коду


@media screen and (max-width: 450px) {
#popwindow{
width: 100%;
position: fixed;
bottom: 1px; //тут отступ от низа какой вам надо
}
}

Спасибо - но всё равно не работает.

Sly32
На сайте с 29.03.2012
Offline
262
#7

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

Инспектируйте и смотрите, какие стили работают. Это азы

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий