Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.04.2020, 15:13
Аватар для Some Way
Интересующийся
Отправить личное сообщение для Some Way Посмотреть профиль Найти все сообщения от Some Way
 
Регистрация: 30.11.2017
Сообщений: 17

Отображение на мобильных девайсах
Здравствуйте !

Как правильно сделать отображение гифок в зависимости от устройства ?

Есть гиф файлы с наборами шагов для айфона и андроида,
при нажатии на конкретный шаг должна появляться гифка для этого шага (определять по номерам соответственно)
и в зависимости от текущего устройства пользователя, если это мак или айфон то инструкция для айфона,  в остальных случаях андроид.

Делал вот так :
$(".ios, .iphone, .ipad, .ipod, .macos").ready(function(){
	$(".andro_dev").hide();
	$(".apple_dev").show();
});

$('.js-tab-trigger').click(function() {
   var id = $(this).attr('data-tab'),
       content = $('.js-tab-content[data-tab="'+ id +'"]');
   
   $('.js-tab-trigger.active').removeClass('active');
   $(this).addClass('active');
   
   $('.js-tab-content.active').removeClass('active');
   content.addClass('active');
});

Добился сразу отображения всех гифок, смог убрать для яблочных, но что бы по шагам и в соответствие девайсу не получилось
<div class="d-flex align-items-end justify-content-end tabs steps">			
					<div class="tab-content device">
						<img class="tab-content__item js-tab-content active andro_dev dev_mob" data-tab="1" data-toggle="collapse" width="186px" height="384px" src="img/gifs/Step_01.gif" alt="step1">
						<img class="tab-content__item js-tab-content active apple_dev dev_mob" data-tab="1" data-toggle="collapse" width="186px" height="384px" src="img/gifs/ap_01.gif" alt="step1">
						<img class="tab-content__item js-tab-content andro_dev dev_mob" data-tab="2" data-toggle="collapsed" width="186px" height="384px" src="img/gifs/Step_02.gif" alt="step1">
						<img class="tab-content__item js-tab-content active apple_dev dev_mob" data-tab="2" data-toggle="collapse" width="186px" height="384px" src="img/gifs/ap_02.gif" alt="step2">
						<img class="tab-content__item js-tab-content andro_dev dev_mob" data-tab="3" data-toggle="collapsed" width="186px" height="384px" src="img/gifs/Step_03.gif" alt="step3">
						<img class="tab-content__item js-tab-content active apple_dev dev_mob" data-tab="3" data-toggle="collapse" width="186px" height="384px" src="img/gifs/ap_03.gif" alt="step3">
						<img class="tab-content__item js-tab-content andro_dev dev_mob" data-tab="4" data-toggle="collapsed" width="186px" height="384px" src="img/gifs/Step_04.gif" alt="step4">
						<img class="tab-content__item js-tab-content active apple_dev dev_mob" data-tab="4" data-toggle="collapse" width="186px" height="384px" src="img/gifs/ap_04.gif" alt="step4">
					</div>

					<div class="tabs stepstoinst">

								<div class="steps_title"><h2 class="">Простая установка</h2></div>

								<div class="tab-header step">
									<a href="#step1" class="tab-header__item js-tab-trigger active"   data-tab="1"><span class="step_number">1</span><p>В главном меню на сайте выберите<br> версию Android</p></a>
								</div>
								<div class="tab-header step">
									<a href="#step2" class="tab-header__item js-tab-trigger"  data-tab="2"><span class="step_number">2</span><p>Сохраните файл на телефон<br> и запустите установку</p></a>
								</div>
								<div class="tab-header step">
									<a href="#step3" class="tab-header__item js-tab-trigger"  data-tab="3"><span class="step_number">3</span><p>Разрешите установку<br> приложения из<br> неизвестных источников</p></a>
								</div>
								<div class="tab-header step">
									<a href="#step4" class="tab-header__item js-tab-trigger"  data-tab="4"><span class="step_number">4</span><p>Откройте приложение,<br> выберите регистрацию<br> либо вход</p></a>
								</div>
					</div>
				</div>



Подскажите пожалуйста как правильно написать функцию ?!

Последний раз редактировалось Some Way, 26.04.2020 в 14:49.
Ответить с цитированием
  #2 (permalink)  
Старый 29.04.2020, 13:44
Аватар для Some Way
Интересующийся
Отправить личное сообщение для Some Way Посмотреть профиль Найти все сообщения от Some Way
 
Регистрация: 30.11.2017
Сообщений: 17

пришлось переделать немного структуру и все получилось, вопрос закрыт, спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запретить отображения функции на мобильных устройствах 4066495 Элементы интерфейса 0 01.11.2017 00:25
отладка скриптов в мобильных браузерах Manyasha Мобильный JavaScript 2 26.09.2016 14:22
Разовая задача - скрипт перехода в фуллскрин на мобильных браузерах Leif Работа 3 27.12.2015 14:51
Преобразование из текстовых данных в красивое отображение материала AlexGraur Общие вопросы Javascript 0 08.08.2015 15:13
определение JS мобильных пользователей refer5 Общие вопросы Javascript 1 14.01.2013 13:49