Я видел несколько похожих вопросов, но на самом деле ничто не решает мою проблему.Я искал 2 дня и перепробовал несколько вещей, но безуспешно.
По сути, мне нужен экран поиска, размер которого можно изменить с помощью ручки с фиксированным положением и правым: 0;верх: 0;внизу: 0;и натягивает мои другие элементы тела.(Работает так, как рекламируется.) Проблема возникает, когда я ввожу поисковую информацию.Мне бы хотелось, чтобы окно SearchWindow находилось на минимальной ширине до тех пор, пока не будет введен поиск.Я бы предпочел, чтобы скрипт автоматически изменял размер div до 300px, показывая его содержимое.Когда я это делаю, он занимает левую позицию и использует ее в качестве точки 0 и расширяет ее на 300 пикселей вправо от левого края.Итак, если div равен 150px (и, следовательно, его левый край находится справа: 150px), он расширяет его на 150px за окном просмотра, чтобы достичь размера 300px.Моей первой мыслью было, как получить атрибут размера для перемещения левой стены, но не смог найти никакой информации.Тогда я подумал: «Хорошо, я возьму div и перенесу его после изменения размера».и попытался:
if($('#SearchWindow').width()<300){
var x=(300-$('#SearchWindow').width());
$('#SearchWindow').width(300);
var win = document.getElementById('SearchWindow');
win.translate('-' + x + 'px');
};
Я видел несколько способов реализации этой идеи, ни один из которых, казалось, не дал эффекта, я предполагаю, что я набрал что-то неправильно, или неправильно использую функцию перевода, поэтому не было активациипереведите.Затем я подумал, что, возможно, я мог бы перетащить дескриптор javascript сам по себе, и меня затопили более простые вопросы о том, как создать мой уже работающий изменяемый размер div.
Как только это будет выполнено, я хочу сделатькнопка, которая изменяет размер div до min-width или 300px в зависимости от его текущего состояния, но ясно, что не может работать, если я не могу получить его в нужном размере.
Я не знаю, почему это не таккажется, заботятся о 'правильно: 0! важно;'Я уверен, что пропускаю что-то маленькое и / или пытаюсь сделать больше, чем позволяет мой опыт.Поэтому без лишних слов код:
соответствующий javascript:
<script>
$(function () {
$("#SearchWindow").each(function () {
$(this).resizable({
handles:{
"w": "#SearchTab"
}
});
});
});
$("#Searchbar").on("change", function() {
var search = document.getElementById('Searchbar').value;
$.post("Search.php", {search: search}, function(result.{$("#SearchResults").html(result);});
if($('SearchWindow').width()<300){
var x=(300-$('SearchWindow').width());
$('SearchWindow').width(300);
var win = document.getElementById('SearchWindow');
win.translate('-' + x + 'px');
};
});
</script>
соответствующий css:
#SearchWindow{
border: 1px solid #6a3f6c;
position:fixed;
top:0;
bottom:0;
right:0 !important;
height: 100vh;
min-width: 5px;
background-color:#ffffff;
max-width:calc(100vw - 25px);
z-index:200;
}
#SearchTab{
position:relative;
height:36px;
width: 20px;
margin-left:-19px;
left:-2px;
top:50vh;
color: #6a3f6c;
border-left: 1px solid;
border-bottom: 1px solid;
border-top: 1px solid;
border-color: #6a3f6c;
background-color:#ffffff;
border-top-left-radius:10px;
border-bottom-left-radius: 10px;
z-index: 200;
padding-top:14px;
z-index:350;
overflow: scroll;
};
#SearchResults{
margin-top:40px;
background: #ffffff;
position:fixed;
z-index:250;
};
AAAANNND соответствующий html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<body>
<div id='SearchWindow' class="resizable" >
<div id='SearchTab' class="ui-resizable-handle ui-resizable-w">
◀
</div>
<div id="SearchResults"></div>
</div>
</body>
Если потребуется дополнительная информация, я с радостью разглашу.Мне действительно все равно, нужно ли мне его мусорить и переписывать с нуля.Я подумывал перенести div на левую стену, но я более упрям, чем хотелось бы признать.Кроме того, вы никогда ничего не узнаете, придерживаясь того, что знаете.
Заранее благодарю всех, кто отвечает / комментирует.