Lay Theme Forum

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

    Draggable elements

    General Discussion
    4
    6
    698
    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.
    • M
      M4rt1n last edited by

      Hey everyone,

      I'm trying to create a class to make images draggable. I have this simple java script, but it somehow doesn't do the trick. Can anyone spot the error? I read the Lay Theme documentation, but couldn't find an answer.

      <script>
      jQuery(function() {
      jQuery( ".sticker" ).draggable();
      });
      </script>

      I tested it here: http://martinmajor.com/drag-test

      Thanks
      Martin

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @M4rt1n

        I think I replied before but maybe my message got lost.

        This code needs a extra jQuery library.
        We do not recommend to install other libraries because they might interfere with the functionality of LayTheme.

        Also you should have a look in the LayTheme Documentary about how to use Javascript.

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • dani
          dani last edited by

          hi,

          like this : http://danielcampbell.ca/post-it
          ???

          add this to 'custom HTML at top' :

          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

          <script>

          window.laytheme.on("newpageshown", function(layoutObj, type, obj){

          jQuery( function() {
          jQuery(".post").draggable();
          } );

          /* click div to bring to front */
          jQuery(function() {
          var maxz = jQuery('.post:last').css("zIndex");
          jQuery(".post").on("drag",function(){
          maxz++;
          jQuery(this).css('z-index',maxz);
          } );

          /* fade in divs - set .post to opacity:0; /
          jQuery('.post').each(function(i) {
          jQuery(this).delay((i++) * 500).fadeTo(1000, .99).css({"margin-left":i
          100, "margin-top":i*100});
          } );

          /* close parent div on x */
          jQuery('.close').on("click", function () {
          $(this).parent('div').fadeOut();
          });
          });
          });
          </script>

          and this to CSS
          (modify as your like) :

          /* post-it */
          .post {
          z-index: 1;
          position: absolute;
          width: 300px;
          min-height: 200px;
          padding: 20px;
          opacity: 0;
          overflow: scroll;
          background-color: #ffffbc;
          cursor: grab;
          cursor: -webkit-grab;
          }
          .close {
          display:inline-block;
          }
          .close::after {
          content: "\00D7";
          text-align: right;
          display:inline-block;
          position: absolute;
          font-size: 30px;
          font-weight: 100;
          right: 12px;
          top: 0px;
          width: 20px;
          height: 20px;
          z-index: 3;
          color: black;
          }
          div.close:hover:after {
          color: red;
          }

          Have fun :D

          https://danielcampbell.ca

          1 Reply Last reply Reply Quote 2
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Dear @dani
            Sweet! Very nice of you for sharing!

            Thank you a lot!

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • K
              kanouu1 last edited by

              With the recent update this is not working anymore :(

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Dear @kanouu1
                can you post a link that I can have a look?

                Best!

                marius

                www.mariusjopen.world

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

                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

                C

                Recent Topics

                • C

                  image carousel bugging out

                • N

                  help needed with cleaning up and optimising lay theme portfolio website

                • R

                  Html5 Video Player issue

                laytheme.com