Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Как задать позицию для всплывающего окна быстрого поиска?

Как задать позицию для всплывающего окна быстрого поиска?


     09.02.2026    Стили (CSS), Общие вопросы по PHP    152

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

Как задать позицию для всплывающего окна быстрого поиска?


Код из engine.css

/* Быстрый поиск на сайте */

#searchsuggestions {
z-index: 887;
width: 298px;
#display: block !important;
background: #fff;
padding-top: 0px;
border-top: 8px solid #fff;}
	
#searchsuggestions a, #searchsuggestions span.notfound { padding: 10px 10px 12px 10px; display: block; text-decoration: none; border-bottom: 1px solid #e5e5e5; }
#searchsuggestions a { color: inherit; }
#searchsuggestions a:hover { background-color: #f7f7f7; }
#searchsuggestions a span { display: block; cursor: pointer; }
#searchsuggestions span.searchheading { display: block; color:#4ADD3A; text-align:center;}
#searchsuggestions span.seperator { display: block; }
#searchsuggestions span.seperator a { padding: 10px 0; text-align: center; border: 0 none; background-color: transparent; color: #919191; }
#searchsuggestions span.notfound {padding: 20px 20px; display: block; color:#FF5656; cursor:default; text-align:center;}
#searchsuggestions .break { display: none; }


В файле стилей это сделать не получается так как код всплывающего окна в файле dle_js
Вот эта строка

function dle_do_search(a){clearInterval(dle_search_delay);$("#searchsuggestions").remove();$("body").append("<div id='searchsuggestions' style='display:none'></div>");$.post(dle_root+"engine/ajax/search.php",{query:""+a+"",user_hash:dle_login_hash},function(a){$("#searchsuggestions").html(a).fadeIn().css({position:"absolute",top:0,left:0}).position({my:"left top",at:"left bottom",of:"#story",collision:"fit flip"})});dle_search_value=a}


Что в ней изменить чтобы не зависимо от размера экрана всплывающее окно быстрого поиска было в одном месте?

Ответа пока нет


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

TeraMoune
Эксперт

TeraMoune - 10 февраля 2026 11:24 -

Так нельзя менять размеры. Тут скрипт имеет абсолютную позицию и встраивается он в самый конец страницы перед body. При размещении searchsuggestions он присваивает координаты #story, изменив размер окна меняются и координаты этого элемента, а вот обновление этому не применяется.

Варианта два, использовать событие отслеживающее изменение окна resize и в нём каждый раз выполнять код

$("#searchsuggestions").css({position:"absolute",top:0,left:0}).position({my:"left top",at:"left bottom",of:"#story",collision:"fit flip"})


Второй вариант это разместить #searchsuggestions по месту формы поиска и разместить её рядом но в каком-то общем контейнере, если смотреть стандартный шаблон зелёный у меня там q_search, этому классу нужно дать relative позицию и тогда всё, что в нём будет иметь absolute позицию будет смещаться вместе с родительским окном.

Принимаю оплату только на карту Мир.

Kentavr
Юзер

Kentavr - 10 февраля 2026 12:41 -

То есть dle_js файл трогать не нужно?
Правки делаются в папке с шаблоном в tpl файле там где форма с поиском и в engine.css ??

Сама форма с поиском у меня там сделана

<td align="right" style="padding-right: 3px; border-radius: 0px;">

<form method="get" action="/">
<input type="hidden" name="do" value="search">
<input type="hidden" name="subaction" value="search">
<input type="hidden" name="titleonly" value="3" name="do" value="search">
<input id="story" class="searchButton" type="text" onfocus="this.style.background = '#d6e7d4';" onblur="this.style.background = '#F9F9F9';" name="story" maxlength="80" value="" placeholder="Введите запрос" autocomplete="off" style="padding: 8px 8px; border-radius: 0px;" /><input class="searchButtonn" type="submit" value="Найти" name="submit2" style="padding: 8px 8px; border-radius: 0px;" />
</form>

</td>

TeraMoune
Эксперт

TeraMoune - 10 февраля 2026 17:55 -

Если вы хотите разместить подсказку в другом месте то нужно менять у $("body") идентификатор объекта в который добавить блок подсказки, и не забыть присвоить стиль position:relative этому классу или id. А при использовании события размещается только js код, а где это уже не мне решать. В стандартном шаблоне это файл lib.js, код размещается либо там либо в самом main.tpl в блоках <script> что так же есть в качестве примера в стандартных шаблонах.

В остальном можно в поисковике вбить js window resize event и посмотреть различные способы применения.

Принимаю оплату только на карту Мир.

lutskboy
Эксперт

lutskboy - 10 февраля 2026 21:48 -

лучше для события window resize change вообще его скрыть. а потом оно при поиске снова появится

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх