Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.

DLE FAQ » Все вопросы » Ламерские вопросы » Всплывающая инфа

Всплывающая инфа

roma_boggi Все вопросы » Ламерские вопросы 3443

вопрос

Приветствую всех.
Возникает вопрос. Как на сайт сделать вот такие всплывающие подсказки

Буду благодарен.

Ответил: ПафНутиЙ

Для начала сверстайте то, что хотите сделать.
Как сверстаете - подскажу по натяжке на dle.

2 комментария

Юзер

roma_boggi - - #16543

<div class="info">
<h4>{title}</h4>
<small>[xfgiven_year]<div class="label label-warning">[xfvalue_year]г.</div>[/xfgiven_year] [xfgiven_quality]<div class="label label-info">[xfvalue_quality] качество</div>[/xfgiven_quality]</small>
<p>{short-story limit="300"}...<p>
</div>

Юзер

werty1001 - - #16544

Показать / Скрыть текст

HTML

<div class="content">

<div class="short">
 <a href="#"><img src="http://www.joystickdivision.com/ab%20st%20pats%20crop.jpg" alt="Злые птички" />Злые птички</a>
   <div class="about">
     Angry Birds (рус. Сердитые птицы, Злые птицы) — видеоигра,
     разработанная финской компанией Rovio Mobile, в которой игрок с
     помощью рогатки должен стрелять птицами по зелёным свиньям,
     расставленным на различных конструкциях. 
   </div>    
</div>
    
<div class="short">
 <a href="#"><img src="http://www.joystickdivision.com/ab%20st%20pats%20crop.jpg" alt="Злые птички" />Злые птички</a>
   <div class="about">
     Angry Birds (рус. Сердитые птицы, Злые птицы) — видеоигра,
     разработанная финской компанией Rovio Mobile, в которой игрок с
     помощью рогатки должен стрелять птицами по зелёным свиньям,
     расставленным на различных конструкциях. 
   </div>    
</div>
    
<div class="short">
 <a href="#"><img src="http://www.joystickdivision.com/ab%20st%20pats%20crop.jpg" alt="Злые птички" />Злые птички</a>
   <div class="about">
     Angry Birds (рус. Сердитые птицы, Злые птицы) — видеоигра,
     разработанная финской компанией Rovio Mobile, в которой игрок с
     помощью рогатки должен стрелять птицами по зелёным свиньям,
     расставленным на различных конструкциях. 
   </div>    
</div>

<div class="short">
 <a href="#"><img src="http://www.joystickdivision.com/ab%20st%20pats%20crop.jpg" alt="Злые птички" />Злые птички</a>
   <div class="about">
     Angry Birds (рус. Сердитые птицы, Злые птицы) — видеоигра,
     разработанная финской компанией Rovio Mobile, в которой игрок с
     помощью рогатки должен стрелять птицами по зелёным свиньям,
     расставленным на различных конструкциях. 
   </div>    
</div>
   
</div>

CSS

.short {width:180px;padding:10px;border: solid 1px #eee;border-radius:5px;background: #fff;position: relative;float:left;}
.short a {color: #0f72da;text-decoration: none;}
.short a:hover {color: #333;text-decoration: underline;}
.short a > img {display:block;max-width:100%;width:100%;margin:0 0 5px 0;border-radius:3px;}
.short .about {visibility: hidden;opacity:0;position: absolute;top: 0;margin: 25px 0 0 0;width:200px;padding:10px;border: solid 1px #bbb;border-radius:3px;background: #fff;z-index:50;}
.short .about:before {content: '';width: 0;height: 0;border: solid 12px transparent;position: absolute;top: 20px;}
.short:hover .about {visibility: visible;opacity:1;}

.content .short:nth-child(odd) {margin:0 20px 20px 0;}
.content .short:nth-child(even) {margin:0 0 20px 20px;}
.content .short:hover:nth-child(odd) .about {margin-left: 15px;}
.content .short:hover:nth-child(even) .about {margin-right: 15px;}
.content .short:nth-child(odd) .about {left:100%;}
.content .short:nth-child(even) .about {right:100%;}
.content .short:nth-child(odd) .about:before {left: -22px;border-right: solid 10px #bbb;}
.content .short:nth-child(even) .about:before {right: -22px;border-left: solid 10px #bbb;}

.about {              
        -webkit-transition: opacity .4s ease, margin .4s,visibility .4s;
        -moz-transition: opacity .4s ease, margin .4s,visibility .4s;
        -o-transition: opacity .4s ease, margin .4s,visibility .4s;
         transition: opacity .4s ease, margin .4s,visibility .4s;
}

Живой пример тык

Puxlik | Telegram Sender ¹³

Puxlik
Telegram Sender

Версию 17.1 поддерживает ?
TeraMoune | Не загружается изображение [Ошибка HTTP] ... ²

TeraMoune
Не загружается изображение [Ошибка HTTP]. Как исправить?

В этой версии есть фрагментация загрузки файла когда загружаемый файл разделяется на фрагменты, по умолчанию 1 фрагмент 1.5мб. (И у вас написано лимиты на файл 4мб и картинки 5.86мб, этого достаточно чтобы принимать 1.5мб фрагменты) И если бы была проблема с весом или чем-то подобным то об этом бы сервер сообщил. Сервер отдал 500 ошибку это значит что угодно, нужно смотреть ответ от сервера в консоли разработчика или логах.
RedFox | Не загружается изображение [Ошибка HTTP] ... ²

RedFox
Не загружается изображение [Ошибка HTTP]. Как исправить?

"Некоторые картинки загружаются, но большинство нет."

Сначала не обратил внимания, но видимо проблема в этом. Все, что больше 100Кб, не загружается. Что странно, поскольку в php у меня следующие значения:
post_max_size = 100M
upload_max_filesize = 100M
max_file_uploads = 20

Полагаю, где-то еще надо увеличить размер загружаемой картинки, но где?
LMakc | Модуль читалка pdf ¹

LMakc
Модуль читалка pdf

Не начинай, я заплатил сегодня штраф за підручники. Сейчас очень сложно с этим.
ssssss | Сделать подсчет количества символов в ко ... ⁵

ssssss
Сделать подсчет количества символов в комментариях

Есть актуальный плагин под 17 версию? (только количество символов! без наворотов... записей куда-либо и т.п.) *ББ-редактор
alex.sg.spb | Как вывести информацию о обновлении ново ... ⁸

alex.sg.spb
Как вывести информацию о обновлении новости, но на время?

вопрос, в продолжение поста. Помогите с кодом вывода инфо UPDATE на краткой новости, так чтобы не нужно было нажимать внутри новости при редактировании галочку?
Kentavr | Как вместо %20 в адресной строке подстав ... ⁹

Kentavr
Как вместо %20 в адресной строке подставлять символ + между словами ???

Спасибо огромное. Этот вариант самый простой и рабочий!

derebas | Как вместо %20 в адресной строке подстав ... ⁹

derebas
Как вместо %20 в адресной строке подставлять символ + между словами ???

К черту htaccess давайте проще

к href добавьте id="xfield_value"

<a href="/company/[xfvalue_company]/" id="xfield_value">[xfvalue_company]</a>

И добавьте скрипт обработчик

<script>
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a#xfield_value');

    links.forEach(link => {
      let href = link.getAttribute('href');

      if (href) {
        href = href.replace(/ /g, '+');
        link.setAttribute('href', href);
      }
    });
  });
</script>

Kentavr | Как вместо %20 в адресной строке подстав ... ⁹

Kentavr
Как вместо %20 в адресной строке подставлять символ + между словами ???

Так сайт не работает вообще. Браузер выдает такое

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

ERR_TOO_MANY_REDIRECTS

Куки чистил не помогает
derebas | Как вместо %20 в адресной строке подстав ... ⁹

derebas
Как вместо %20 в адресной строке подставлять символ + между словами ???

Попробуйте так
RewriteEngine On
RewriteCond %{REQUEST_URI} %20
RewriteRule (.*)%20(.*) $1+$2 [N]
RewriteRule (.*) $1 [R=301,L]

наверх

Технический сбой

Всплывающая инфа

Ответил: ПафНутиЙ

2 комментария

Похожие вопросы

Быстрый поиск, эффект

2 вопроса по новостям сайта

Перекодировать utf-8 в cp-1251

не работают всплывающие окна и спойлера

ajax плеер

Проблема перехода с версии DLE 10.2 на 10.3

Вопрос по формированию title?

Количество комментариев на странице для определенной категории?

Как сделать сайт лучше чем сейчас?

Форма поиска, для чего две строки?