Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Overlay button

    General Discussion
    2
    3
    69
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      rioma7 last edited by

      Hi there.

      I was wondering how is it possible to add a customized button which is an overlay on any page. I am looking to add something that is similar to the typeface's rectangle that can be moved on this website http://www.collletttivo.it

      Is there someone that can help me? Thanks

      1 Reply Last reply Reply Quote 0
      • R
        rioma7 last edited by

        I have solved this request by myself but if someone is interested, here is the code I used.

        Custom CSS

        body {
            position: relative;
        }
        #buttonCta {
            position: fixed;
            z-index: 999;
            border-radius: 70px;
            background-color: #0000FF;
            border: 5px solid #F0FCD2;
            text-align: center;
            padding: 12px 25px;
            cursor: move;
        }
        
        #buttonCta     a {
            
                font-family: SpaceMono-Regular;
                color: #F0FCD2;
                text-align: center;
                text-transform: uppercase;
                font-size: 60px;
                cursor: pointer;
         }
         
        #buttonCta:hover {
                background-color: #F0FCD2;
                border: 5px solid #0000FF;
            }
        
            
            #buttonCta:hover a {
                color: #0000FF;
            }
        
         @media only screen and (max-width: 601px) {
               #buttonCta {
                display: none;
               }
            }
        
        

        CUSTOM HEAD CONTENT (JAVASCRIPT)

        <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', () => {
        const cta = document.getElementById("buttonCta");
        
        if((window.innerWidth > 601) && cta) {
            var randomtop = Math.floor(Math.random() * 70);
            var randomleft = Math.floor(Math.random() * 70);
            cta.style.top = `${randomtop}vh`;
            cta.style.left = `${randomleft}vw`;
            dragElement(cta);
        }
        
        console.log(window.innerWidth > 601, cta)
        
        function dragElement(elmnt) {
          var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        
            elmnt.onmousedown = dragMouseDown;
        
          function dragMouseDown(e) {
            e = e || window.event;
            e.preventDefault();
            // get the mouse cursor position at startup:
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            // call a function whenever the cursor moves:
            document.onmousemove = elementDrag;
          }
        
          function elementDrag(e) {
            e = e || window.event;
            e.preventDefault();
            // calculate the new cursor position:
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            // set the element's new position:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
          }
        
          function closeDragElement() {
            /* stop moving when mouse button is released:*/
            document.onmouseup = null;
            document.onmousemove = null;
          }
        }
        });
        </script>
        
        

        CUSTOM HTML TOP

        <div id="buttonCta">
            <a href="LINK">TEXT ON THE BUTTON</a>
        </div>
        
        1 Reply Last reply Reply Quote 1
        • Richard
          Richard Global Moderator last edited by

          @rioma7 Awesome! Upvote from me :)

          have a great day

          1 Reply Last reply Reply Quote 0
          • First post
            Last post

          Try this to fix issues before you post:

          Use the Search Feature. Maybe there is already a solution to your issue.

          1. Update Lay Theme and all Lay Theme Addons
          2. Disable all Plugins
          3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
          4. Now see if your problem solved itself
          5. Go here, see if your problem is listed here:
          Troubleshooting

          When you post:
          1. Post a link to where the problem is
          2. If the problem is difficult to explain, post screenshots / link to a video to explain it

          Thanks!

          Online Users

          S
          K
          T
          G
          I
          A

          Recent Topics

          • S

            Image hover -> Image on image

          • C

            centred Carousel fixed width and proportions

          • text underline

          • open all links in a thumbnail grid in a new tab

          laytheme.com