Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

R

rioma7

@rioma7
About
Posts
24
Topics
8
Shares
0
Groups
0
Followers
0
Following
1

Posts

Recent Best Controversial

  • Overlay button
    R rioma7

    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>
    
    General Discussion
  • Login

  • Don't have an account? Register

  • Login or register to search.
  • First post
    Last post
0
  • Recent
  • Tags
  • Popular
  • Users
  • Search