CODEWITHSUNDEEP
javascriptcsswidgetpositioning
David Martins
David Martins

Reputation: 2056

Margin bottom using JavaScript

How can I position this button 100px from the bottom? I tried using CSS placing this code inside a div with position:absolute; bottom:100px; but it doesn't work... I'm guessing this must be achieved with JavaScrip...? Can anyone help?

<!-- WhatsHelp.io widget -->
<script type="text/javascript">
    (function () {
        var options = {
            facebook: "...", // Facebook page ID
            whatsapp: "...", // WhatsApp number
            call_to_action: "Contacte-nos 📚", // Call to action
            button_color: "#A8CE50", // Color of button
            position: "right", // Position may be 'right' or 'left'
            order: "facebook,whatsapp", // Order of buttons
        };
        var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
</script>
<!-- /WhatsHelp.io widget -->

Upvotes: 0

Views: 972

Answers (2)

Mexxx
Mexxx

Reputation: 61

I made an example https://jsbin.com/rujelobexo/edit?html,css,js,output

Because this script inserts markup inside your page, you can style it with CSS:

#wh-widget-send-button.wh-widget-right {
    bottom: 100px!important;
}

ID + class rule is needed because you script already injects bottom property with !important:

#wh-widget-send-button {
    margin: 0 !important;
    padding: 0 !important;
    position: fixed !important;
    z-index: 16000160 !important;
    bottom: 0 !important;
    ...
}

Upvotes: 2

Telmo Trooper
Telmo Trooper

Reputation: 5694

I don't think you need JavaScript for that.

Have you tried using position: fixed instead of position: absolute?

This should be enough:

position: fixed;
bottom: 0;

Example (from W3Schools):

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

Upvotes: 0

Related Questions