X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Подсказка на слово (десктоп + мобильные устройства)
sosnovskij
sosnovskij
Topic Starter сообщение 9.8.2019, 11:55; Ответить: sosnovskij
Сообщение #1


Привет! Задача - на текст (одно слово) необходимо добавить подсказку. Просьба подсказать код и стили.

Прикрепленное изображение


При клике или тапе на слово появляется подсказка.

Прикрепленное изображение


После повторного клика/тапа подсказка убирается.

В ней можно добавить маркированный список или переносы строк.

Тег title в рамках <a> не подходит - не виден на мобильных устройствах.

Вывод необходим через пост в wordress, но думаю, что это не принципиально :)


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Андрей_WPM
Андрей_WPM
сообщение 9.8.2019, 13:02; Ответить: Андрей_WPM
Сообщение #2


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sosnovskij
sosnovskij
Topic Starter сообщение 9.8.2019, 14:24; Ответить: sosnovskij
Сообщение #3


[mention]Андрей WPM, нужно только на одной странице и на одно слово :)


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Андрей_WPM
Андрей_WPM
сообщение 9.8.2019, 14:56; Ответить: Андрей_WPM
Сообщение #4


Sosnovskij, Серёж, со стилями придется тебе самому позаморачиваться. У меня сейчас заказ, не особо время есть экспериментировать. Демо.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sosnovskij
sosnovskij
Topic Starter сообщение 9.8.2019, 16:54; Ответить: sosnovskij
Сообщение #5


[mention]Андрей WPM, большое спасибо  :friends: ! Протестирую на днях. Отпишусь по результату.
Подскажи, пожалуйста, как js соединить с html/CSS? Отдельный js-файл создавать в теме?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Андрей_WPM
Андрей_WPM
сообщение 9.8.2019, 18:32; Ответить: Андрей_WPM
Сообщение #6


(Sosnovskij @ 9.8.2019, 19:54) *
Подскажи, пожалуйста, как js соединить с html/CSS? Отдельный js-файл создавать в теме?
 
Не обязательно, прям под нужным параграфом можно вставить его в теге

<script>
тут код
</script>

или где нибудь в конце страницы нужной. Только не в футер.пхп  :D А то по всему сайту будет подключаться. Тот код зависит от библиотеки jQuery имей ввиду, это не чистый javascript. 


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sosnovskij
sosnovskij
Topic Starter сообщение 13.8.2019, 9:39; Ответить: sosnovskij
Сообщение #7


[mention]Андрей WPM, html и js добавил на страницу через вкладку "Текст".


<script>
$('.sp').on('click', function(){
  $('.hid_p').toggleClass('active');
});
</script>


<div class="cont">
<p class="bas_p">Какой-то текст и <span class="sp">нужное</span> слово.</p>
<p class="hid_p">Подсказка, которая будет скрыта по умолчанию и активированна по клику</p>
</div>

CSS добавил в существующий файл стилей. 


Единственное, не добавлял body (он уже есть в файле стилей с margin: 0;).

На выходе выглядит так https://take.ms/UYN6l :) В коде страницы скрипт появляется https://take.ms/5NlpW

Что не так сделал? :)


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Андрей_WPM
Андрей_WPM
сообщение 13.8.2019, 9:58; Ответить: Андрей_WPM
Сообщение #8


Sosnovskij, а jQuery точно подключен на сайте? И Серёж, в примере нужное слово пунктиром подчеркнуто у меня, а у тебя на скрине нет. Такое ощущение что стили не подключились. Кэш сбрасывал?
Да, точно стили не подключились, иначе подсказка должна быть display:none; а у тебя она показывается на скрине. Попробуй стили прям в редакторе после <div class="cont"> в теге <style>...</style> поставить, а не в общий style.css.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Андрей_WPM
Андрей_WPM
сообщение 13.8.2019, 10:26; Ответить: Андрей_WPM
Сообщение #9


Я ещё js маленько поправил, попробуй с новым, с этим вариантом должно быть пофиг где скрипт по дереву расположен будет, по идеи.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sosnovskij
sosnovskij
Topic Starter сообщение 13.8.2019, 16:59; Ответить: sosnovskij
Сообщение #10


[mention]Андрей WPM, супер, заработало. Большое спасибо  :smile-thumb-up: !


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) ProxyLab — Мобильные прокси. 1 порт в 1 руки!
13 ProxyLab 3778 Сегодня, 1:17
автор: ProxyLab
Открытая тема (нет новых ответов) IPgate - мобильные, резидентные, 100% чистые прокси с ротацией, полученные этическим способом
8 IPgate 2702 22.3.2024, 16:39
автор: IPgate
Открытая тема (нет новых ответов) Мобильные прокси российских операторов
2 anchous 1644 10.1.2024, 14:02
автор: anchous
Открытая тема (нет новых ответов) ⭐ LITPORT.NET — мобильные прокси. США, Европа, Азия. 10+ стран, 25+ операторов. От $2.99 в день!
Гибкие тарифы, авто ротация, без ограничений по трафику.
11 litportnet 5601 5.12.2023, 2:42
автор: litportnet
Открытая тема (нет новых ответов) Адаптирую сайты под мобильные устройства
1 sheva7 1768 4.4.2022, 15:37
автор: Smartseowork


 



RSS Текстовая версия Сейчас: 28.3.2024, 18:52
Дизайн