javascript - Draggable not working in jqueryUI -
i have simple progress bar <audio> element , want make knob draggable, decided try jquery ui .draggable method, not work on knob. prevent knob appearing when hover on player if code beneath invalid code in there.
i've tried hours , cannot figure out what's wrong code. can see player below here: i've included test audio file can see in action. (the knob supposed fade in when hover on player, doesn't after draggable method. making invalid, if wish see knob, remove code marked /** not work /** )
/** variables **/ /** elements **/ var player = $("#player"); var playere = $("#player")[0]; var playere = $("#player").get(0); var playbutton = $("#playbutton"); var scrubber = $(".scrubber"); var progress = $(".progress"); var buffered = $(".buffered"); var knob = $(".knob"); /** variables **/ var isplaying = 0; var buffered = 0; var progress = 0; /** controls **/ /** scrubber , time **/ playere.ontimeupdate = function () { audiotimeupdater(); }; function audiotimeupdater() { var progress = playere.currenttime / playere.duration; var buffered = playere.buffered.end(0) / playere.duration; $(".progress").width((progress * 100) + "%"); $(".buffered").width((buffered * 100) + "%"); } /** not work **/ $("#.knob").draggable({ axis: "x" }); /** stops working after above code, if remove it, works. **/ $(".player-small").mouseenter(function () { $(".knob").stop().fadein(200); }); settimeout(function () { $(".player-small").mouseleave(function () { $(".knob").stop().fadeout(200); }); }, 3000); /** event handlers **/ /** functions **/ function play(file, title) { playbutton.removeclass("playfailed"); var filename = "/music/" + file; player.attr("src", filename).trigger("play"); playerhaserror(); if (playeristoggled === 0) { playertoggle(); } } function playerhaserror() { $("#player").on("error", function (e) { source = $("#player").attr('src'); pushmodal("we can't play that!", "audio element error.", ("an error occured , " + source + " cannot played. if error persists please contact website administrator."), "audio element returned error trying play source.", 1); playbutton.addclass("playfailed"); }); } button { border: none; outline: none; } body, nav, ul, li, { padding: 0; margin: 0; list-style: none; font-family: 'roboto', sans-serif; text-decoration: none; } body { overflow-y: scroll; } ::selection { background: rgba(255, 64, 129, 0.85); color: black; /* webkit/blink browsers */ } ::-moz-selection { background: rgba(255, 64, 129, 0.85); color: black; } .player-small { height: 55px; width: 100%; background: #ff4081; } .player-height-anim {} .player-small .left { height: 55px; float: left; width: 60%; } .player-small .right { height: 55px; float: right; width: 40%; } .transport { overflow: auto; } .play-button-con { height: 55px; width: 55px; float: left; } .play { padding-top: 3px; width: 55px; height: 55px; font-size: 18px; padding-right: 4px; text-align: center; } .playfailed { color: rgba(255, 255, 255, 0.17)!important; pointer-events: none; } .next-button-con { height: 55px; width: 55px; float: left; } .next { padding-top: 2px; padding-right: 8px; width: 55px; height: 55px; text-align: center; letter-spacing: -3px; font-size: 11px; padding-bottom: 2px } .scrubber-con { float: left; height: 55px; width: calc(100% - 111px); } .scrubber { width: calc(100% - 40px); margin: auto; margin-top: 25px; height: 5px; background: rgba(0, 0, 0, .04); cursor: pointer; } .scrubber .knob { float: right; height: 13px; width: 13px; position: relative; bottom: 4px; left: 5px; background: white; border-radius: 50px; display: none; } .scrubber .knob:hover { cursor: grab; } .scrubber .knob:active { cursor: grabbing; } .scrubber .progress { height: 100%; float: left; background: white; width: 0%; position: relative; z-index: 1; transition: ease 300ms; } .scrubber .buffered { height: 5px; position: relative; width: 0%; background: rgba(0, 0, 0, .09); transition: ease 1000ms; } .player-small button { color: white; float: left; background: rgba(0, 0, 0, .04); cursor: pointer; } .player-small button:hover { background: rgba(0, 0, 0, .12); } <script type="text/javascript " src="http://code.jquery.com/jquery-latest.min.js "></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <div class="player-small"> <div class="w-ctrl"> <div class="controls"> <div class="left"> <div class="transport"> <div class="play-button-con"> <button class="play" id="playbutton">►</button> </div> <div class="next-button-con"> <button class="next">►► </button> </div> <div class="scrubber-con"> <div class="scrubber"> <div class="progress"> <div class="knob"></div> </div> <div class="buffered"></div> </div> </div> </div> </div> <div class="right"> <audio id="player" src="http://c1d20c5c.ngrok.io/music/test.mp3" controls="controls" preload="none"></audio> </div> </div> </div> </div> so see knob doesn't appear, , if make appear, still not draggable. tested lint , ok , should working, isn't. doing wrong?
your selector wrong:
$("#.knob").draggable({...}); #.knob won't work, can either select via id using #idname or via class using .classname.
in html, knob class, using
$(".knob").draggable({ axis: "x" }); should work, aware selects all html elements knob class.
Comments
Post a Comment