可调整大小 div 脚本调整大小将 div 推到视口之外
Resizable div script resize pushes div beyond viewport
我见过一些类似的问题，但没有真正解决我遇到的问题。我找了 2 天，尝试了很多东西，但没有成功。
基本上我想要的是一个搜索屏幕，可以使用固定位置的手柄和 right:0 调整大小； top:0; bottom:0;并拉过我的其他 body 元素。 （正如宣传的那样工作。）当我输入搜索信息时出现问题。我希望我的 'SearchWindow' 在输入搜索之前保持最小宽度。优先我想要一个脚本来自动调整 div 到 300px 从而显示它的内容。当我这样做时，它会占据左侧位置并使用它作为 0 点并将其从左边缘向右扩展 300 像素。因此，如果 div 为 150px（因此它的左边缘位于 right:150px），它会将其扩展 150px 超过视口以达到 300px 大小。我的第一个想法是如何获得移动左墙的大小属性，但找不到任何信息。然后我想到 "Fine, I'll take the div and move it after it is resized." 并尝试：
if($('#SearchWindow').width()<300){
var x=(300-$('#SearchWindow').width());
$('#SearchWindow').width(300);
var win = document.getElementById('SearchWindow');
win.translate('-' + x + 'px');
};
我看到了多种实现这个想法的方法，none 其中似乎有效果，我假设我输入了错误的内容，或者我错误地使用了翻译功能，所以没有激活翻译。然后我想也许我可以 javascript 自己拖放手柄，并且充满了关于如何创建我已经工作的可调整大小 div.
的更多基本问题
完成此操作后，我想制作一个按钮，根据其当前状态将 div 的大小调整为 min-width 或 300px，但很明显，如果我无法调整大小，这将无法工作以一种有用的方式。
我不知道为什么它似乎不关心 'right: 0 !important;' 我确定我忽略了一些小事，and/or 试图做超出我的经验允许的事情。因此，事不宜迟，代码：
相关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提出。我真的不在乎是否需要丢弃它并从头开始重写它。我考虑过将 div 移到左边的墙上，但我比我愿意承认的更固执。另外，你永远不会通过坚持你所知道的来学到任何东西。
预先感谢 answers/comments 的任何人。
我通过将左侧位置移动到 "calc(100%-300px)" 然后调整大小解决了这个问题。
我仍然对更正确的解决方案感兴趣，但这暂时可以使用
我见过一些类似的问题，但没有真正解决我遇到的问题。我找了 2 天，尝试了很多东西，但没有成功。
基本上我想要的是一个搜索屏幕，可以使用固定位置的手柄和 right:0 调整大小； top:0; bottom:0;并拉过我的其他 body 元素。 （正如宣传的那样工作。）当我输入搜索信息时出现问题。我希望我的 'SearchWindow' 在输入搜索之前保持最小宽度。优先我想要一个脚本来自动调整 div 到 300px 从而显示它的内容。当我这样做时，它会占据左侧位置并使用它作为 0 点并将其从左边缘向右扩展 300 像素。因此，如果 div 为 150px（因此它的左边缘位于 right:150px），它会将其扩展 150px 超过视口以达到 300px 大小。我的第一个想法是如何获得移动左墙的大小属性，但找不到任何信息。然后我想到 "Fine, I'll take the div and move it after it is resized." 并尝试：
if($('#SearchWindow').width()<300){
var x=(300-$('#SearchWindow').width());
$('#SearchWindow').width(300);
var win = document.getElementById('SearchWindow');
win.translate('-' + x + 'px');
};
我看到了多种实现这个想法的方法，none 其中似乎有效果，我假设我输入了错误的内容，或者我错误地使用了翻译功能，所以没有激活翻译。然后我想也许我可以 javascript 自己拖放手柄，并且充满了关于如何创建我已经工作的可调整大小 div.
的更多基本问题完成此操作后，我想制作一个按钮，根据其当前状态将 div 的大小调整为 min-width 或 300px，但很明显，如果我无法调整大小，这将无法工作以一种有用的方式。
我不知道为什么它似乎不关心 'right: 0 !important;' 我确定我忽略了一些小事，and/or 试图做超出我的经验允许的事情。因此，事不宜迟，代码：
相关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提出。我真的不在乎是否需要丢弃它并从头开始重写它。我考虑过将 div 移到左边的墙上，但我比我愿意承认的更固执。另外，你永远不会通过坚持你所知道的来学到任何东西。
预先感谢 answers/comments 的任何人。
我通过将左侧位置移动到 "calc(100%-300px)" 然后调整大小解决了这个问题。 我仍然对更正确的解决方案感兴趣，但这暂时可以使用