Перейти к содержанию

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

quatrossential
 Поделиться

Рекомендуемые сообщения

quatrossential Энтузиаст

quatrossential

Опубликовано
Опубликовано (изменено)

На форуме установлен скрипт, как в ВК, полоска с надписью Вверх на левой стороне экрана:
 
post-2945-0-89786900-1388688348.jpg
 
Как мне оставить её рабочей только при просмотре с ПК, и скрыть при просмотре с ТелефонаСмартфона в Полной Версии стиля. Т.к. Эта полоска закрывает названия Тем на форуме, если со смартфона смотреть. Прошу невозможное, верно? :)
 
В globalTemplate это выглядит следующим образом:

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

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

Изменено пользователем quatrossential
Ссылка на комментарий
Поделиться на другие сайты
quatrossential Энтузиаст

quatrossential

Опубликовано
  • Автор
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
AUYKGN Мастер

AUYKGN

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
CNoise Соавтор

CNoise

Опубликовано
Опубликовано (изменено)

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

 

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, пожалуйста приложите его к посту, очень поможет.

Изменено пользователем CNoise
Ссылка на комментарий
Поделиться на другие сайты
quatrossential Энтузиаст

quatrossential

Опубликовано
  • Автор
Опубликовано (изменено)

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'});;
});

}); 

Изменено пользователем quatrossential
Ссылка на комментарий
Поделиться на другие сайты
CNoise Соавтор

CNoise

Опубликовано
Опубликовано

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

 

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

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

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

А так как скин у вас неширокий, на большинстве экранов изменений видно не будет. 
 
Для начала откройте 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 задает стиль курсора.
 
Если вы захотите изменить текст, отображаемый на полосе, сделать это можно будет на второй строке скрипта.

 

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

 

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

Ссылка на комментарий
Поделиться на другие сайты
quatrossential Энтузиаст

quatrossential

Опубликовано
  • Автор
Опубликовано (изменено)

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

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

 

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

 

post-2945-0-26117800-1388937964_thumb.pn

 

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

 

post-2945-0-15230200-1388938005_thumb.pn

 

post-2945-0-36135200-1388938006_thumb.pn

 

post-2945-0-41189300-1388938007_thumb.pn

 

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

demo .

 

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

Изменено пользователем quatrossential
Ссылка на комментарий
Поделиться на другие сайты
CNoise Соавтор

CNoise

Опубликовано
Опубликовано (изменено)

Упс, моя вина - окно поиска не видел, хотя знал, что в 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%;
}

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

 

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

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

Изменено пользователем CNoise
Ссылка на комментарий
Поделиться на другие сайты
quatrossential Энтузиаст

quatrossential

Опубликовано
  • Автор
Опубликовано

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

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

Ссылка на комментарий
Поделиться на другие сайты
Гость
Эта тема закрыта для публикации ответов.
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...