Скрыть JS скрипт при просмотре форума с Телефона.

Posted 2 января, 201411 yr

На форуме установлен скрипт, как в ВК, полоска с надписью Вверх на левой стороне экрана:

Как мне оставить её рабочей только при просмотре с ПК, и скрыть при просмотре с ТелефонаСмартфона в Полной Версии стиля. Т.к. Эта полоска закрывает названия Тем на форуме, если со смартфона смотреть. Прошу невозможное, верно?

В globalTemplate это выглядит следующим образом:

                <script type='text/javascript' src="{style_images_url}/js/vk_slide.js"></script>
	</head>
	<body id='ipboard_body'>

Как альтернативу, рассмотрю подсказку, как сделать отступ для этой полоски, т.к. даже при ширине форума 70% - в телефоне то он на весь экран ^^

Edited 2 января, 201411 yr by quatrossential

2 января, 201411 yr

Author

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

AUYKGN and Envy
2

3 января, 201411 yr

quatrossential, или НЕРЕАЛЬНО СЛОЖНЫЕ вопросы, или просто невовремя

WantedUser and quatrossential
2

3 января, 201411 yr

Или еще не все пришли в себя после праздников

Quatrossential, есть два способа решить ваш вопрос - элегантный, но достаточно сложный и довольно простой.

Суть элегантного способа заключается в том, чтобы чуть-чуть уменьшить общую ширину форума, добавив тем самым по краям немного свободного места, и зафиксировать полоску прокрутки строго по левому краю. Таким образом, полоска прокрутки всегда будет находится за пределами контента вне зависимости от масштаба страницы. Сделать это вполне реально. Если захотите реализовать у себя на форуме именно этот вариант, просто напишите, постараюсь расписать, как это сделать.

Второй вариант достаточно простой - просто скрывать скрипт при определении мобильного User Agent'a.
Для этого измените код подключения скрипта на что-то похожее:

<if test="isSmallTouch:|:!$this->registry->output->isSmallTouchDevice()">
<script type='text/javascript' src="{style_images_url}/js/vk_slide.js"></script>
</if>
 
</head>
<body id='ipboard_body'>

Минусов у этого способа два - первый: даже на РС на экранах очень низкого разрешения или в случае масштабирования страницы, проблема со скриптом останется - он будет находиться поверх контента, второй: многие браузеры на Android в качестве User Agent'a по умолчанию используют UA полноценных браузеров, например, Chrome или Opera, у пользователей таких мобильных браузеров проблема тоже не решится.
В остальных случаях все должно работать отлично.

Ну и небольшой совет на будущее - когда в следующий раз будете задавать вопрос, касательно внешнего js, пожалуйста приложите его к посту, очень поможет.

Edited 3 января, 201411 yr by CNoise

quatrossential, Envy and AUYKGN
3

3 января, 201411 yr

Author

CNoise, Если я вас не утруждаю своей просьбой, прошу расписать первый, "элегантный" вариант решения моей проблемы. Буду безмерно благодарен! :hi:

jQuery(document).ready(function() {
jQuery('body').append('<div class="button-up" style="display: none;opacity: 0.7;width: 110px;height:100%;position: fixed;left: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #6a86a4;font-weight: bold;"> ▲ Наверх </div>');

jQuery (window).scroll (function () {
if (jQuery (this).scrollTop () > 100) {
jQuery ('.button-up').fadeIn();
} else {
jQuery ('.button-up').fadeOut();
}
});

jQuery('.button-up').click(function(){
jQuery('body,html').animate({
scrollTop: 0
}, 100);
return false;
});

jQuery('.button-up').hover(function() {
jQuery(this).animate({
'opacity':'1',
}).css({'background-color':'#e7ebf0','color':'#6a86a4'});
}, function(){
jQuery(this).animate({
'opacity':'0.7'
}).css({'background':'none','color':'#6a86a4'});;
});

});

Edited 3 января, 201411 yr by quatrossential

5 января, 201411 yr

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

Изменение шаблонов стиля.

В первую очередь добавим на форуме небольшую границу с двух сторон от основного контента.

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

А так как скин у вас неширокий, на большинстве экранов изменений видно не будет.

Для начала откройте ipb_styles.css вашего скина и найдите в нем:

.wrapper {
margin: 0 auto;
min-width: 980px;
max-width: 1600px;
width: 70%;
}

Замените на:

.wrapper{
	margin: 0 auto;
	min-width: 840px;
	max-width: 1500px;
	width: 70%;
}

.twrapper{
	min-width: 1040px;
	width: 100%;
}

Таким образом мы добавим новый класс twrapper, в который позже вложим уже существующий wrapper. Новый класс будет занимать всю ширину форума, его минимальная ширина - 1040px. Кроме того, следует немного уменьшить минимальную ширину класса wrapper, в нашем случае до 840px.

Теперь откройте шаблон globalTemplate и найдите в нем следующее:

<div id='ipbwrapper' class='wrapper'>

Замените на:

<div class='twrapper'>
<div id='ipbwrapper' class='wrapper'>

Теперь в этом же файле найдите:

</div>	
<!--DEBUG_STATS-->

И замените на:

</div>
</div>	
<!--DEBUG_STATS-->

Тем самым мы создадим новый div с классом twrapper, в котором будет находиться весь остальной контент.

Теперь перейдем к работе непосредственно со скриптом.

Я его немного изменил.
Для начала давайте вынесем его из директории скина. Это пригодится в том случае, если вы захотите использовать скрипт с каким-либо другим вашим скином, тогда вам не потребуется вновь загружать скрипт на сервер.

Обновленный скрипт: buttonUp.zip

Загрузите nw.buttonUp.js по пути .../public/js/.... Теперь для подключения скрипта в globalTemplate используйте следующий код:

<script type='text/javascript' src="{$this->settings['js_base_url']}js/nw.buttonUp.js"></script>

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

Финальный этап. CSS.

Я также вынес большую часть css из файла скрипта, это должно облегчить изменение стиля полосы.

К сожалению, теперь стили полосы необходимо добавлять самостоятельно.

Для этого добавьте в файл ipb_styles.css вашего скина следующий код:

.containerUp {
	display: none;
        background-color: rgb(231,235,240); /*Fallback for outdated web browsers*/
	background-color: rgba(231,235,240,0.3);
	position: absolute;
	clip: rect(0px, 90px, 25000px, 0px);
	width: 90px;	
	height: 100%;
	left: 0px;
	top: 0px;
	opacity: 0.7;
	cursor: pointer;
}

.buttonUp {
	position: fixed;
	left: 16px;
	top: 15px;
	font-weight: bold;
	color: #5a5a5a;
}

Положение кода внутри файла не важно, главное, чтобы он находился вне фигурных скобочек ({ и }) или комментариев (/* и */).

Теперь разберем то, что мы добавили. Как я уже сказал, такой вариант css должен сделать редактирование полосы намного проще. Если указанный чуть выше код не вызывает у вас затруднений, все, что под спойлером, можно не читать.

Класс buttonUp отвечает за внешний вид текста на полосе:
.buttonUp {
	...
	left: 16px;
	top: 15px;
	...
}
Данный код отвечает за смещение текста. В данном случае текст будет смещен от начала экрана влево на 16 пикселей и вниз на 15.
.buttonUp {
	...
	font-weight: bold;
	color: #5a5a5a;
}
Отвечает за форматирование текста, font-weight: bold; делает шрифт жирным, color: #5a5a5a; задает цвет текста.

Класс containerUp отвечает за внешний вид самой полосы:
.containerUp {
	...
        background-color: rgb(231,235,240); /*Fallback for outdated web browsers*/
	background-color: rgba(231,235,240,0.3);
	...
}
Данный код задает цвет полосы. Первые три значения на обеих строках - цвет в формате RGB, последнее значение на второй строке - прозрачность элемента.
Если вы захотите изменить цвет полосы, придется также внести изменения непосредственно и в сам скрипт на строках 18 и 20. Первая строка - это, так называемый, fallback - заплатка для старых браузеров, не поддерживающих RGBa.
.containerUp {
	display: none;
	...
	clip: rect(0px, 90px, 25000px, 0px);
	width: 90px;	
	...
} 
Значение width и второе значение clip-rect отвечает за ширину полосы. Свойство clip-rect в нашем случае позволяет ограничить область, в которой будет виден текст полосы.
.containerUp {
	...
	cursor: pointer;
} 
Свойство cursor задает стиль курсора.

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

Я немного изменил стиль полосы - сделал ее чуть уже, изменил цвет текста. Как мне кажется, теперь она будет лучше смотреться с вашим скином. Также сделал анимацию чуть медленнее. Теперь она выглядит, как стандартная.

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

5 января, 201411 yr

Author

Все прекрасно установил. Вы очень доходчиво объясняете, разжевали как младенцу, благодарю =)

Возникла одна проблема при просмотре из мобильного браузера (HTC Sensation, HTC One, Android). Думаю так на всех телефонах.

При не авторизованном просмотре сайта все прекрасно:

А вот если авторизоваться, то вот как получается:

Сделал вам Аккаунт если понадобится: логин и пароль
demo .

Жду ответа, а в целом огромное спасибо :yes:

Edited 5 января, 201411 yr by quatrossential

5 января, 201411 yr

Упс, моя вина - окно поиска не видел, хотя знал, что в Baisik оно по умолчанию находится там.
Исправляется это довольно просто. В ipb_style.css найдите:

#primary_nav {
font-size: 12px;
float: left;
height: 32px;
min-width: 660px;
width: 68%;
}

И замените на:

#primary_nav {
font-size: 12px;
float: left;
height: 32px;
min-width: 520px;
width: 60%;
}

Проблема должна решиться.

Завел себе у вас на форуме личный аккаунт, надеюсь, вы не против? Люблю посидеть в курилке, пофлудить

Кроме того, вы грамотно подошли к созданию форума, будет интересно понаблюдать за развитием проекта.

Edited 5 января, 201411 yr by CNoise

5 января, 201411 yr

Author

Проблема решена, еще раз благодарю!!!

Конечно я не против.

Sign In

Скрыть JS скрипт при просмотре форума с Телефона.

Featured Replies

Последние посетители 0

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)