Оценки читателей
0 Лайк 0 Лавки 0 Ахахах! 0 Ого! 0 Восторг 0 Печаль 0 Грусняшь
Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Авторские работы
- Другие модули
- ScreenBlock - Минимальное разрешение сайта
DEMO
+
Всем привет. Сегодня у нас скрипт который дополнит meta viewport а именно добавит блок о не соответствии экрана если оно ниже рекомендуемых по дизайну вашего сайта. Установка и настройка проста.
Установка:
1. Добавим HTML:
2. Добавим js:
В скрипте находим 1024 и 768 и меняем на свое минимальное разрешение сайта, также в HTML указываем его.
3. Добавим CSS:
Установка:
1. Добавим HTML:
Код
<div id="minimal">Ваше разрешение не соответствует нашему сайту!.<br><br>Текущее:<em><i></i>x<i></i>px</em> рекомендуем от 1024х768px.<br><span>ПРОДОЛЖИТЬ</span></div>
2. Добавим js:
Код
function MinScreen() {
var wMinScreen = $(window).width();
var hMinScreen = $(window).height();
if(wMinScreen > 1024) { $('div#minimal em i:eq(0)').html(''+wMinScreen+''); } else { $('div#minimal em i:eq(0)').html('<div>'+wMinScreen+'</div>'); }
if(hMinScreen > 768) { $('div#minimal').hide(); $('div#minimal em i:eq(1)').html(hMinScreen); } else { $('div#minimal em i:eq(1)').html('<div>'+hMinScreen+'</div>'); $('div#minimal').show(); }
}
MinScreen();
$(window).on('resize',function() {
MinScreen();
});
$('div#minimal span').click(function() {
$('div#minimal').remove();
});
var wMinScreen = $(window).width();
var hMinScreen = $(window).height();
if(wMinScreen > 1024) { $('div#minimal em i:eq(0)').html(''+wMinScreen+''); } else { $('div#minimal em i:eq(0)').html('<div>'+wMinScreen+'</div>'); }
if(hMinScreen > 768) { $('div#minimal').hide(); $('div#minimal em i:eq(1)').html(hMinScreen); } else { $('div#minimal em i:eq(1)').html('<div>'+hMinScreen+'</div>'); $('div#minimal').show(); }
}
MinScreen();
$(window).on('resize',function() {
MinScreen();
});
$('div#minimal span').click(function() {
$('div#minimal').remove();
});
В скрипте находим 1024 и 768 и меняем на свое минимальное разрешение сайта, также в HTML указываем его.
3. Добавим CSS:
Код
div#minimal {
display: none;
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
color: #fff;
text-align: center;
font-size: 20px;
font-family: sans-serif;
padding-top: 10%;
}
div#minimal em {
font-style: normal;
padding-left: 5px;
}
div#minimal em i {
font-style: normal;
font-weight: bolder;
}
div#minimal em div {
color: red;
display: inline-block;
}
div#minimal span {
margin-top: 45px;
display: inline-block;
font-weight: bold;
font-family: helvetica, arial, sans-serif;
color: chartreuse;
cursor: pointer;
}
display: none;
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
color: #fff;
text-align: center;
font-size: 20px;
font-family: sans-serif;
padding-top: 10%;
}
div#minimal em {
font-style: normal;
padding-left: 5px;
}
div#minimal em i {
font-style: normal;
font-weight: bolder;
}
div#minimal em div {
color: red;
display: inline-block;
}
div#minimal span {
margin-top: 45px;
display: inline-block;
font-weight: bold;
font-family: helvetica, arial, sans-serif;
color: chartreuse;
cursor: pointer;
}
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Добавил: Best_Studio
Дата добавления: 07.04.2018 в 19:43 по МСК
Категория: Другие модули
Просмотров: 655
Комментариев: 0
Эмоций:
Дата добавления: 07.04.2018 в 19:43 по МСК
Категория: Другие модули
Просмотров: 655
Комментариев: 0
Эмоций:
Теги: