Форум

refer5 · #1 (**permalink**) 28.12.2012, 01:07

Помогите решить задачу, пожалуйста

нужно скрыть блок на странице для мобильных пользователей. Т.е. с помощью JS определить мобилки (по User Agent) и скрыть этот блок для них (там будут кнопки, линки, картинка), а показать соответственно только пользователям десктопов.

Пробовал вот как
1. Подключил к странице http://slowlight.ru/js/is.mobile.js (взято с detectmobilebrowsers.com)
2. Добавил в стили
Код:

.hide0{ display:none; }

3. В коде блокам, которые должны быть невидимы в мобиле, добавил класс hide0

4. В стартовом js-коде (например, в $(document).ready...) убираем класс hide0, если мобил не детектится. Например так в jquery:
Код:

if (!is_mobile()) $(".hide0").removeClass("hide0")

ТОлько не пойму как это все корректно прописать.

Вот исходный код:

<html>
<head>
<title>Mobile hide block</title>
<script type="text/javascript" src="http://slowlight.ru/js/is.mobile.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){

if (!is_mobile()) $(".hide0").removeClass("hide0");

}); 
</script>
<style>
.hide0{ display: none }
</style>
</head>
<body>
<div class="hide0">Hi World! </div>
</body>
</html>

refer5 · #2 (**permalink**) 28.12.2012, 02:12

почемуто при локальной проверке когда в FireFox меняю плагином useragent на ipad,iphone - текствсе равно виден

Deff · #3 (**permalink**) 28.12.2012, 02:58

refer5,

<html>
<head>
<title>Mobile hide block</title>
<script type="text/javascript" src="http://slowlight.ru/js/is.mobile.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){

if (!is_mobile()) $(".chang").removeClass("hide0");

}); 
</script>
<style>
.hide0{ display: none }
</style>
</head>
<body>
<div class="chang hide0">Hi World! </div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript