How to move a div down vertically on the right side of the screen?

  css, html, javascript

I have a chat button that when clicked, expands a chatbox. The button and box should be on the bottom right of the screen but so far only the button is there and when clicked, the expanded chat box is centered on the right side of the screen. Any suggestions on how to fix this? Here is the corresponding code and a picture of the problem I am having.

<!DOCTYPE html>

    <style type="text/css">
      body {
        font-family: 'Roboto Condensed', sans-serif;
      }

      #side-chat {
        position: absolute;
        right: 100%;
        bottom:50%;
        z-index:9999999999999 !important;
        width: 75px;
        height: 75px;
        margin-right:35px;
      
        top:1100px;
        
        display:flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        border-radius: 50px;
        background: rgba(30, 175, 230, 0.5);
        
         
      }
      #olark-box-wrapper {
        position: absolute;
        z-index:99999999999999 !important;
       
        

        height: 100%; 
  
        display: flex; 
        justify-content: right;
        align-items: center;
     
        -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;
      }
      #side-chat img{
        margin-top: 5px;
        
      }
      #side-chat:hover,
      #side-chat:active {
       background: #22a7e5;
}
    </style>
  </head>
  <body>

<div id="wrapper-of-wrapper">
  <div id="olark-box-wrapper">

  <!-- Olark chat tab -->
    <a id="side-chat" href="javascript:void(0);" onclick="setTimeout(changeClass, 2);">
      <img src="icon-chat.svg">
         
    </a>

  <!-- Empty Olark chat box container -->
  <div id="olark-box-container"></div>

</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('xxxx-xxx-xx-xxxx');</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";
        document.querySelector('#side-chat img').src = "icon-chat.svg";
      }
      // Otherwise add open the Olark chat box
      else {        
        olark_wrapper.className = "chatbox-open";
        document.querySelector('#side-chat img').src = "icon-cancel.svg";
        
      }
        
    }
</script>
  </body>
</html>

enter image description here

Source: Ask Javascript Questions

LEAVE A COMMENT