jquery,html,css,jquery-ui , Detect when the jQuery UI slider is being moved?
Detect when the jQuery UI slider is being moved?
Question:
Tag: jquery,html,css,jquery-ui
I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to find out is if can I make it so that when the user is moving the handle it won't try to load the video, instead it will just update once they let go of their mouse on the slider.
DEMO: http://codepen.io/mistkaes/pen/RPGzbX?editors=001
jQuery: String.prototype.toHHMMSS = function() { var sec_num = parseInt(this, 10); var hours = Math.floor(sec_num / 3600); var minutes = Math.floor((sec_num - (hours * 3600)) / 60); var seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
var time = hours + ":" + minutes + ":" + seconds;
time = time.replace(/^0+/, '');
time = time.replace(/^[^\w\s]/gi, '');
return time;
}
$("#range").slider({
range: "min",
slide: function(event, ui) {player.seekTo(ui.value);}
});
$("#volume-range").slider({
range: "min",
value: 50,
});
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '282',
width: '502',
videoId: 'QExOaGT_ids',
playerVars: {
'controls': 0,
'showinfo': 0,
'iv_load_policy': 3,
'rel': 0,
},
events: {
'onReady': onPlayerReady,
}
});
}
setInterval(function() {
$("#content").text("video_time: " + player.getCurrentTime().toString().toHHMMSS());
$("#range").slider("value", player.getCurrentTime());
$("#range").slider("option", "max", player.getDuration());
}, 1);
setInterval(function() {
// VOLUME CONTROLS
$("#volume-amount").text("volume: " + player.getVolume() + "%");
player.setVolume($("#volume-range").slider("value"));
}, 1);
function onPlayerReady(event) {
// auto-play video
event.target.playVideo();
}
$(document).ready(function() {
// READY
});
As always, thanks for helping!
Answer:
You can use 3-Events:
- Start (Start-Sliding) -> Stop Player
- End (End-Sliding) -> Start Player
- Slide (Sliding) -> Move Player-Position
$("#range").slider({
range: "min",
start: function(event, ui) {
player.pauseVideo();
},
stop: function(event, ui) {
player.playVideo();
},
slide: function(event, ui) {
player.seekTo(ui.value,true);
return false;
}
});
Demo: http://codepen.io/anon/pen/EjwMGV
Related:
jquery,html,css,drop-down-menu
How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...
html,css
I'm quering a MySQL database and use a script to put results into an automatically generated HTML-file. I have two tables with 2 columns and 4 rows each that need to be put side-by-side. I have put my html & css in fiddle. http://jsfiddle.net/mika6891/7b0k049r/1/ My HTML code: <!-- gene description...
javascript,html,ajax
I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...
jquery,html,css,drop-down-menu
I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...
javascript,php,jquery,html,css3
I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...
javascript,jquery,ajax,spring-mvc,datatables
I am using jQuery DataTable to display huge amount of data in a table. I am getting data page wise on Ajax request like this: var pageNo = 1; $('#propertyTable').dataTable( { "processing": true, "serverSide": true, "ajax": "${contextPath}/admin/getNextPageData/"+pageNo+"/"+10, "columns": [ { "data": "propertyId" }, { "data": "propertyname" }, { "data": "propertyType"...
php,jquery,ajax,json
I want to post some data to php function by ajax, then get the encoded json object that the php function will return, then I want to get the information (keys and values) from this object, but I don't know how, here is my code: $.ajax({ url: "functions.php", dataType: "JSON",...
html,css,css3
I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...
php,html,mysql,table,data
2 Questions... Scenario: I would like to query my database table via a form and then display the results that occur(if there are results) and my current situation is that it does work but it clears the form completely and leaves my to an empty page with just the results...
javascript,jquery,html,scroll
I'm trying to make a div appear (if not already visible) and be scrolled to a specific anchor. I found this answer and try to use it but it looks like it doesn't work well... http://stackoverflow.com/a/7513110/3703099 My code : http://jsfiddle.net/0sq2rfcx/9/ As you can see, when you click on button it...
jquery,handlebars.js
I have a template that shows a button based on some boolean in a JSON-object. There are two different buttons it can show. The code for compiling the template: source = $('#some-template').html(); // Get the HTML source of the template template = Handlebars.compile(source); // Compile it $('#some-div-container').html(template(someJsonObject)); Let's say the...