I have seen some similar questions, but nothing really gets at the problem I am having. I've looked for 2 days, and tried multiple things, and no success.
Basically what I want is a search screen that can be resized with a handle with fixed position and right:0; top:0; bottom:0; and pulls over my other body elements. (Which works as advertised.) The problem comes in when I enter search information. I would like my 'SearchWindow' to be at a min width until a search is entered. Preferentially I would like a script to auto resize the div to 300px thus showing its contents. When I do that, it takes the left position and uses that as it's 0 point and extends it 300 px right from the left edge. so, if the div is 150px (and therefore its left edge is at right:150px) it extends it 150px past the viewport to reach the 300px size. My first thought was how do i get the size attribute to move the left wall, but couldn't find any information. Then I thought "Fine, I'll take the div and move it after it is resized." and tried:
if($('#SearchWindow').width()<300){
var x=(300-$('#SearchWindow').width());
$('#SearchWindow').width(300);
var win = document.getElementById('SearchWindow');
win.translate('-' + x + 'px');
};
I saw multiple ways to accomplish this idea, none of which seemed to have an effect, I assume I typed something wrong, or am using the translate function incorrectly so there was no activating the translate. I then thought maybe I could have javascript drag and drop the handle on its own, and was flooded with more basic questions about how to create my already working resizable div.
Once This is accomplished, I want to make a button that sizes the div to min-width or 300px depending on its current state, but clearly that cannot work if i cannot get it to size in a useful manner.
I don't know why it doesn't seem to care about the 'right: 0 !important;' I am sure I am overlooking something small, and/or trying to do more than my experience allows. So without further ado the code:
relevant 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>
relevant 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 the relevant 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>
If more information is needed, I will gladly divulge. I don't really care if I need to trash it and rewrite it from the ground up. I considered moving the div to the left wall, but I am more stubborn than I would like to admit. Plus, you never learn anything by sticking to what you know.
Thank you in advance to anyone who answers/comments.
I solved this by moving the left position to "calc(100%-300px)" and then resizing it. I would still be interested in a more correct solution, but this will be functional for the moment