How to keep div in the middle of screen regardless of window size
Question
I have a chat div tab that is perfectly positioned in the middle right side of the screen when the window is fully opened. However if I adjust the window size and make it smaller, the tab moves the the bottom right of the screen and is no longer in the middle. How can I make it stay where it is?
Here is my image and code.
<style type="text/css">
body {
font-family: 'Roboto Condensed', sans-serif;
}
#side-chat {
position: absolute;
right: 100%;
bottom:50%;
z-index:1000;
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
display:flex;
justify-content: center;
align-items: center;
color: #ffffff;
border-radius: 5px;
background: rgba(30, 175, 230, 0.5);
text-decoration: none;
padding: 15px;
font-size: 25px;
line-height: 20px;
text-align: center;
}
#olark-box-wrapper {
position: fixed;
width: auto;
top: 400px;
right: -300px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#olark-box-wrapper.chatbox-open {
right: 0;
}
#olark-box-wrapper.chatbox-closed {
right: -300px;
}
#habla_window_div {
margin: 0 !important;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="olark-box-wrapper">
<!-- Olark chat tab -->
<a id="side-chat" href="javascript:void(0);" onclick="changeClass()">
<img src="icon-chat.svg">
Chat
</a>
<!-- Empty Olark chat box container -->
<div id="olark-box-container"></div>
</div>
<!-- begin olark code -->
<script type="text/javascript" async> ;(function(o,l,a,r,k,y){if(o.olark)return; r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0]; y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r); y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)}; y.extend=function(i,j){y("extend",i,j)}; y.identify=function(i){y("identify",k.i=i)}; y.configure=function(i,j){y("configure",i,j);k.c[i]=j}; k=y._={s:[],t:[+new Date],c:{},l:a}; })(window,document,"static.olark.com/jsclient/loader.js");
/* custom configuration goes here (www.olark.com/documentation) */
//olark.configure('system.hb_detached', true);
olark.configure('box.inline', true);
olark.identify('xxxxxxxxxx');</script>
<!-- end olark code -->
<script type='text/javascript'>
// Javacript function to toggle the class of the chat box wrapper
function changeClass()
{
// Get the HTML object containing the Olark chat box
var olark_wrapper = document.getElementById("olark-box-wrapper");
// If the chat box is already open, close id
if ( olark_wrapper.className.match(/(?:^|\s)chatbox-open(?!\S)/) ) {
olark_wrapper.className = "chatbox-closed";
}
// Otherwise add open the Olark chat box
else {
olark_wrapper.className = "chatbox-open";
}
}
</script>
</body>
</html>
This is what happens when the window isn't fully maximized and it's no longer in the middle. How could I solve this?
and when you click on the chat tab it expands the chat box and sticks to the side of it.
1 answers
solution1
0 2021-06-10 20:54:14
I have a chat div tab that is perfectly positioned in the middle right side of the screen when the window is fully opened. However if I adjust the window size and make it smaller, the tab moves the the bottom right of the screen and is no longer in the middle. How can I make it stay where it is?
Here is my image and code.
<style type="text/css">
body {
font-family: 'Roboto Condensed', sans-serif;
}
#side-chat {
position: absolute;
right: 100%;
bottom:50%;
z-index:1000;
width: 150px;
margin-right: -59px;
transform: rotate(-90deg);
display:flex;
justify-content: center;
align-items: center;
color: #ffffff;
border-radius: 5px;
background: rgba(30, 175, 230, 0.5);
text-decoration: none;
padding: 15px;
font-size: 25px;
line-height: 20px;
text-align: center;
}
#olark-box-wrapper {
position: fixed;
width: auto;
top: 400px;
right: -300px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
#olark-box-wrapper.chatbox-open {
right: 0;
}
#olark-box-wrapper.chatbox-closed {
right: -300px;
}
#habla_window_div {
margin: 0 !important;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="olark-box-wrapper">
<!-- Olark chat tab -->
<a id="side-chat" href="javascript:void(0);" onclick="changeClass()">
<img src="icon-chat.svg">
Chat
</a>
<!-- Empty Olark chat box container -->
<div id="olark-box-container"></div>
</div>
<!-- begin olark code -->
<script type="text/javascript" async> ;(function(o,l,a,r,k,y){if(o.olark)return; r="script";y=l.createElement(r);r=l.getElementsByTagName(r)[0]; y.async=1;y.src="//"+a;r.parentNode.insertBefore(y,r); y=o.olark=function(){k.s.push(arguments);k.t.push(+new Date)}; y.extend=function(i,j){y("extend",i,j)}; y.identify=function(i){y("identify",k.i=i)}; y.configure=function(i,j){y("configure",i,j);k.c[i]=j}; k=y._={s:[],t:[+new Date],c:{},l:a}; })(window,document,"static.olark.com/jsclient/loader.js");
/* custom configuration goes here (www.olark.com/documentation) */
//olark.configure('system.hb_detached', true);
olark.configure('box.inline', true);
olark.identify('xxxxxxxxxx');</script>
<!-- end olark code -->
<script type='text/javascript'>
// Javacript function to toggle the class of the chat box wrapper
function changeClass()
{
// Get the HTML object containing the Olark chat box
var olark_wrapper = document.getElementById("olark-box-wrapper");
// If the chat box is already open, close id
if ( olark_wrapper.className.match(/(?:^|\s)chatbox-open(?!\S)/) ) {
olark_wrapper.className = "chatbox-closed";
}
// Otherwise add open the Olark chat box
else {
olark_wrapper.className = "chatbox-open";
}
}
</script>
</body>
</html>
This is what happens when the window isn't fully maximized and it's no longer in the middle. How could I solve this?
and when you click on the chat tab it expands the chat box and sticks to the side of it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Keep div overlay relative to background image regardless of window size
How to show div in middle of screen
How do I center a div in the middle of the page using jQuery and keep it centered when window is re-sized?
How to make table with images fit the screen, regardless of screen size?
How to keep adjusted picture inside middle div
JavaScript: How to figure out, if a div is on the middle of the screen?
How to execute code if div is in the middle of the screen
Center & middle positioning regardless of window scroll
How do I keep a div center when browser window goes smaller than div size?
100% Screen Size Regardless of Resolution
Related Tags