I'm trying to get inline SVG elements to be draggable using JQuery UI, so that I can make custom video controls.
Unfortunately I've had little luck. I've tried this SO answer in my code but haven't gotten anywhere. I've also managed to get an SVG image dragging but not inline. Is it just that JQuery UI doesn't play well with inline SVG?
Any suggested alternatives?
$(document).ready(function() {
var v = document.querySelector("#vid");
var b = document.querySelector("#progress");
var x = document.querySelector("#draw_here");
var vidTimer;
var s;
//wait for video and tracks to load
var myVideoPlayer = document.getElementById('vid');
myVideoPlayer.addEventListener('loadedmetadata', function() {
$("#play_ball").draggable()
.bind('mousedown', function(event, ui) {
$(event.target.parentElement).append(event.target);
})
.bind('drag', function(event, ui) {
event.target.setAttribute('x', ui.position.left);
});
//$("#play_ball").draggable({
// axis: "x",
// containment: 'parent'
//});
var videoControls = document.getElementById('videoControls'),
play = document.getElementById('play'),
playProgressInterval = false,
progressContainer = document.getElementById("progress"),
playProgressBar = document.getElementById("play_ball");
// Get rid of the default controls
v.removeAttribute('controls');
handleButtonPresses();
function handleButtonPresses() {
// When the play button is clicked, playor pause the video.
play.addEventListener('click', playPause, false);
// When the play button is pressed, witch to the "Pause" symbol.
v.addEventListener('play', function() {
play.title = 'Pause';
play.innerHTML = '<span id="pauseButton">▐▐</span>';
// Begin tracking video's progress.
trackPlayProgress();
}, false);
// When the pause button is pressed, switch to the "Play" symbol.
v.addEventListener('pause', function() {
play.title = 'Play';
play.innerHTML = '►';
// Video was paused, stop tracking progress.
stopTrackingPlayProgress();
}, false);
// When the video has concluded, pause it.
v.addEventListener('ended', function() {
this.currentTime = 0;
this.pause();
}, false);
v.addEventListener('touchstart', function(e) {
var sDate = new Date();
sTime = sDate.getTime();;
var touchobj = e.changedTouches[0]
console.log(touchobj.target) // returns element touch point landed on
// var xPos =
// var yPos =
// console.log("position is"+e.PageX + ", " + e.PageY);
// console.log("position is" + xPos + ", " + yPos);
}, false);
v.addEventListener('touchend', function() {
var eDate = new Date();
eTime = eDate.getTime();;
if (eTime - sTime >= 99) {
alert("you held it!");
}
}, false);
}
function playPause() {
if (v.paused || v.ended) {
if (v.ended) {
v.currentTime = 0;
}
v.play();
} else {
v.pause();
}
}
function vidUpdate() {
$scope.sliderV.value = parseInt(v.currentTime, 10);
$scope.$broadcast('rzSliderForceRender');
}
// Every 50 milliseconds, update the play progress.
function trackPlayProgress() {
(function progressTrack() {
updatePlayProgress();
vidUpdate();
// pause at chapter breaks
//ignore first cue
for (var i = 1; i < cueS.length; i++) {
if (v.currentTime >= cueS[i].startTime - .10 && v.currentTime <= cueS[i].startTime + .10) {
v.currentTime += .3;
v.pause();
}
}
playProgressInterval = setTimeout(progressTrack, 50);
})();
}
function updatePlayProgress() {
playProgressBar.style.width = ((v.currentTime / v.duration) * (progressContainer.offsetWidth)) + "px";
playProgressBar.setAttribute("cx", (4 + ((v.currentTime / v.duration) * 94) + "%"));
}
// Video was stopped, so stop updating progress.
function stopTrackingPlayProgress() {
clearTimeout(playProgressInterval);
}
}); //ends wait for vid
}); //ends doc ready
/* PROGRESS BAR */
#progress {
position: absolute !important;
left: 7%;
height: 70%;
width: 90%;
cursor: pointer;
z-index: 4;
}
#progress_box {
height: 95%;
width: 100%;
border: 1px solid #292929;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #303030;
/* Old browsers */
background: -moz-linear-gradient(top, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#7e7e7e', GradientType=0);
/* IE6-9 */
-webkit-box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
-moz-box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
margin: 2px 0 0 5px;
padding: 2px;
overflow: hidden;
z-index: 4;
}
#play_progress {
display: block;
height: 40%;
width: 100%;
background-color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), color-stop(.5, white), to(#e3e3e3));
background: -moz-linear-gradient(top, #e3e3e3, white 50%, #e3e3e3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
z-index: 4;
}
#play_time {
float: right;
margin: 7px 0 0 5px;
font-size: 10px;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
line-height: 1;
z-index: 4;
}
#spacer {
display: block;
width: 100%;
height: 30%;
}
#sliderVideo {
position: absolute;
top: 50px;
bottom: 50px;
right: 1%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="player">
<video id="vid" controls>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
<div id="videoControls">
<button id="play" title="Play">►</button>
<div id="progress">
<svg xmlns="http://www.w3.org/2000/svg" id="draw_here" height="100" width="100%">
<line id="play_bar" x1="5%" y1="15" x2="100%" y2="15" style="stroke:#7E7F81;stroke-width:2" />
<circle id="play_ball" cx="4%" cy="15" r="13" fill="#B0C4DE" />
</svg>
<span id="spacer"></span>
</div>
<button id="instructorBtn" title="Instructor">!</button>
</div>
</div>
</body>
I'll debug it and see if I can solve the problem.
First thing I noticed is that you didn't close your html tag ;)
Also why "document.querySelector" when you use jquery...
Edit:
You seem to use a lot non jquery code, cleaning up your code currently and I'll fix the slider.
Edit2:
You have forgotten that you also need to update the video progress after sliding with the slider, I'm adding code for that too.
Edit3:
Here's some working code: https://jsfiddle.net/seahorsepip/gLudkdd9/5/
It's still messy and working buggy, the things you did with 4% and 94% don't make any sense either.
You actually don't even need jquery ui just to make it draggable, it's pretty easy to write it with mousedown mousemove and mouseup instead.
.
Related
i am fairly new to coding and i got this typing script online and then created a button, the button links to a different page that I haven't created yet. The issue i am facing is that i cant get the button to stay in one place while the typing script is running, it moves around, is there a way i can put it in a fixed position maybe by the bottom left of the screen. my code is bellow, Thanks!
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) {
delta /= 3;
}
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 5000;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i = 0; i < elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
document.body.appendChild(css);
};
.button {
position: relative;
left: 20%;
right: 20%;
bottom: 5%;
top: 60%;
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 24px 80px;
border: 1px solid #a12727;
border-radius: 98px;
background: #bd4aff;
background: -webkit-gradient(linear, left top, left bottom, from(#bd4aff), to(#992727));
background: -moz-linear-gradient(top, #bd4aff, #992727);
background: linear-gradient(to bottom, #bd4aff, #992727);
-webkit-box-shadow: #ff5959 0px 0px 40px 0px;
-moz-box-shadow: #ff5959 0px 0px 40px 0px;
box-shadow: #ff5959 0px 0px 40px 0px;
text-shadow: #591717 1px 1px 0px;
font: normal normal bold 37px arial;
color: #ffffff;
text-decoration: none;
}
.button:hover,
.button:focus {
background: #e359ff;
background: -webkit-gradient(linear, left top, left bottom, from(#e359ff), to(#b62f2f));
background: -moz-linear-gradient(top, #e359ff, #b62f2f);
background: linear-gradient(to bottom, #e359ff, #b62f2f);
color: #ffffff;
text-decoration: none;
}
.button:active {
background: #712c99;
background: -webkit-gradient(linear, left top, left bottom, from(#712c99), to(#982727));
background: -moz-linear-gradient(top, #712c99, #982727);
background: linear-gradient(to bottom, #712c99, #982727);
}
.button:after {
content: "\0000a0";
display: inline-block;
height: 24px;
width: 24px;
line-height: 24px;
margin: 0 -4px -6px 4px;
position: relative;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABBUlEQVRIibXVMUrEQBQG4I9FrMXKUjyBhVjZeAULD7F2VoLHELEQKzsvINZWgldwFQutLCwWRFhisQ6Mw2Yzk4mvfC+8L/OTIfytMd6x65/qDA0+sDPEwlFLfx13QyBtQIxUxbUMCMitipN0AQHpHVcOECPFceUCASmOqwQISFFcpUCMZMXVBwhIVlx9gYB0xlUDxEhrXLVAQFrjGgIIyMWiwUqPZd84xVfSfxwKWMUrbnIezonoBW9J7yj3bbqACfZxnvT3sJ2LxBX+aA2esPXb38A0mjW4rAGesZnMrhNgirVS4BD3C5Yzv0yzBDkuBZbVCA/R8hlOhgTgAJ+4Mr+5nV/hD3mmNbSMQ+JfAAAAAElFTkSuQmCC") no-repeat left center transparent;
background-size: 100% 100%;
}
<!doctype html>
<html>
<head>
<style>
body {
background-color: #ce3635;
text-align: center;
color: #fff;
padding-top: 10em;
}
* {
color: #fff;
text-decoration: none;
}
</style>
<script src="js/script.js">
</script>
</head>
<body>
<h1>
<a href="" class="typewrite" data-period="1000" data-type='[ "Hi, Welcome to DShroff.com", "A Website created entirely from scratch by me.", "Click the button below to go to games or wait here to be redirected to home."]'>
<span class="wrap"></span>
</a>
<a class="button" style="vertical-align:middle;margin:50px 0px" href="https://games.dshroff.com">Click to go to Games</a>
</a>
</a>
</h1>
You can just change the position: relative; to position: absolute; of button . Button will get out of flow from document and will appear below the text
Did you try using position:fixed?
https://www.w3schools.com/css/css_positioning.asp
And then manipulate top and left.
Ah, maybe more important, put the button inside div, and style the div.
Okay, starting over as I'm new at all of this and, as Sebastian points out, the problem is likely elsewhere.
This is a combination lock which was created by Derek Hill. I've reformatted it by cutting its size in half. In doing so, the size of the dial after spinning doesn't work out right -- when you spin the numbers, you can see that the height of the numbers begins dropping and is no longer vertically centered. It creeps down by about 0.5px each time.
I first notice the problem at the variable "temporTopEarlier". I cannot understand why the "top" for the dial is 0.5px more than it should be (-157 instead of -157.5). I think this is causing my problems. I expected a truncation of decimals, but I don't see where that would happen.
I'm new at this, so apologies for the many poor elements to the code, format, and question. Thanks!
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<style>
#lock-plate{
padding: 15px 0;
border: 0.5px solid #cfd3d6;
background: #ccc;
text-align: center;
width: 243px;
background: -webkit-linear-gradient(top, #eee 0%,#949ba0 100%);
background: linear-gradient(to bottom, #eee 0%,#949ba0 100%);
border-radius: 2px;
margin: 10px auto;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
position: absolute;
top: 6%;
left: 43%;
transform: translate(-50%, -50%);
}
#lock-wrapper{
width: 220px;
padding: 0 10px 0 4px;
border-radius: 3.5px;
height: 60px;
border: .5px solid rgba(255, 255, 255, 0.6);
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.9);
background: -webkit-linear-gradient(top, #c4c4c4 0%,#676767 100%);
background: linear-gradient(to bottom, #c4c4c4 0%,#676767 100%);
overflow: hidden;
margin: 0 auto;
}
.lock-dial{
height: 60px;
width: 34px;
margin-left: 5.5px;
background: -webkit-linear-gradient(top, #8c9093 0%,#b6babd 9%,#ccd2d6 18%,#ffffff 55%,#ccd2d6 82%,#b6babd 91%,#8c9093 100%);
background: linear-gradient(to bottom, #8c9093 0%,#b6babd 9%,#ccd2d6 18%,#ffffff 55%,#ccd2d6 82%,#b6babd 91%,#8c9093 100%);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
float: left;
position: relative;
cursor: move;
}
#lock-wrapper .lock-dial ul{
margin: 0;
padding: 0;
text-align: center;
list-style: none;
font-size: 26.5px;
line-height: 35px;
color: #414f6b;
text-shadow: 0 -1px 0 #212c42;
transition: box-shadow .45s linear, color .25s linear;
-webkit-transition: box-shadow .45s linear, color .25s linear;
}
</style>
</head>
<body style="background-color: #012443">
<div id="lock-plate">
<span></span><span></span><span></span><span></span>
<div id="lock-wrapper">
<!-- <div class="welcome-message">WELCOME!</div> -->
<div class="lock-dial" id="dial-one"><ul data-combo-num="0"><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js" integrity="sha256-hlKLmzaRlE8SCJC1Kw8zoUbU8BxA+8kR3gseuKfMjxA=" crossorigin="anonymous"></script>
<script>
$(function(){
var comboArray = [0, 0, 0, 0, 0];
var combination = [4, 3, 9, 2, 0];
var gridIncrement = $( ".lock-dial ul" ).css('line-height').replace('px', '')/2; // this is correct, 17.5
var numNums = $( ".lock-dial:eq(0) ul li" ).length; // 10 numbers
var halfHeight = gridIncrement*numNums; // this is correct, 175
var initTop = -(halfHeight-gridIncrement); //this is correct, -157.5
$( ".lock-dial ul" ).css('top', initTop); // this is correct -157.5
$( ".lock-dial ul" ).draggable({
grid: [ 0, gridIncrement ],
axis: 'y',
drag: function(){
var dragDir = $(this).css('top').replace('px', '') < initTop ? "up" : "down";
if(dragDir == "up"){
var curNum = parseFloat($(this).find('li:last-child').text()) + 1;
if(curNum < 10){
$(this).append('<li>'+curNum+'</li>');
}else{
$(this).append('<li>0</li>');
};
}else{
var curNum = parseFloat($(this).find('li:first-child').text()) - 1;
var thisTop = parseFloat($(this).css('margin-top')); //seems right, starts at 0 and goes down by 35s
$(this).css({
marginTop: thisTop-(gridIncrement*2)
});
if(curNum > -1){
$(this).prepend('<li>'+curNum+'</li>');
}else{
$(this).prepend('<li>9</li>');
};
};
var temporTopEarlier = parseFloat($(this).css('top')); // this is wrong -157, should be -157.5
console.log("tempor top earlier " + temporTopEarlier);
},
stop: function(){
//MATHS
var halfHeight = 175;
var initTop = -157.5;
var negOrPos = $(this).css('margin-top').replace('px', '') > 0 ? 1 : -1;
var tempor_top = parseFloat($(this).css('top')); // this is wrong -174.5, should be -175
console.log("tempor_top " + tempor_top);
console.log(this);
var thisTopTotal = parseFloat($(this).css('top')) + Math.abs(initTop); // this first part is wrong, -17 instead of -17.5
var marginMinified = parseFloat(Math.abs($(this).css('margin-top').replace('px', ''))) - thisTopTotal;
var numIncs = Math.floor(marginMinified/(halfHeight*2));
var totalDif = numIncs*(halfHeight*2);
var topTen = (marginMinified - totalDif)*negOrPos;
var activeIndex = Math.abs(topTen/(gridIncrement*2)) + (halfHeight/(gridIncrement*2));
console.log("halfHeight " + halfHeight);
console.log("initTop " + initTop);
console.log("thisTopTotal " + thisTopTotal);
console.log("marginMinified " + marginMinified);
console.log("numIncs " + numIncs);
console.log("topTen " + topTen);
console.log("totalDif " + totalDif);
console.log("activeIndex " + activeIndex); // this should be a number in 0.5 increments and it's not
$(this).attr("data-combo-num", $(this).find('li').eq(activeIndex).text()).css({
top: -157.5,
marginTop: topTen
}).find('li').slice(20).remove();
for(var i=0; i<$( ".lock-dial ul" ).length; i++){
comboArray[i] = $( ".lock-dial ul:eq("+i+")" ).attr("data-combo-num");
}
}
});
})
</script>
In the code below I'm successfully changing the color of the left and right arrows based on how far a div (shadeFinder) has scrolled on the x axis. I want to add throttling to this code. Can someone explain how? I have the example from w3Schools below but finding it hard to merge it into my code.
//change the color of mobile arrows based on where the shadefinder is on X-axis
function changeArrowColor(){
var shadeFinder = document.querySelector('.fms-wrapper');
let leftArrow = document.querySelector('.prev');
let rightArrow = document.querySelector('.next');
let last_known_scroll_position = 0;
let ticking = false;
function doSomething(scroll_pos) {
scroll_pos = parseInt(scroll_pos/10);
leftArrow.style.color = `rgb(${scroll_pos},${scroll_pos},${scroll_pos})`;
rightArrow.style.color = `rgb(${scroll_pos},${scroll_pos},${scroll_pos})`;
}
shadeFinder.addEventListener('scroll', function(e) {
last_known_scroll_position = shadeFinder.scrollLeft;
doSomething(last_known_scroll_position);
});
}
Mozilla scroll event example with throttling:
// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
let last_known_scroll_position = 0;
let ticking = false;
function doSomething(scroll_pos) {
// Do something with the scroll position
}
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(last_known_scroll_position);
ticking = false;
});
ticking = true;
}
});
The requestAnimationFrame API takes a callback function that returns a timestamp (I'll use RAF as shorthand hereon). If you wanted to use JS to animate, you can use the timestamp to call cancelAnimationFrame later. But to use just for throttling, you don't necessarily need to store this value, for now.
Since you already have a variable called last_known_scroll_position scoped for used within doSomething, you don't have to pass the scrollLeft value to the RAF function, but instead pass the doSomething as the callback after setting the last_known_scroll_position to the current scrollLeft value at the time of the scroll event.
That callback will receive a timestamp parameter, but you don't need it. The callback can update the color based on a calculation from the last_known_scroll_position.
See the example below.
function changeArrowColor(){
var shadeFinder = document.querySelector('.fms-wrapper');
let leftArrow = document.querySelector('.prev');
let rightArrow = document.querySelector('.next');
let last_known_scroll_position = 0;
function doSomething(timestamp) {
let scroll_pos = parseInt(last_known_scroll_position/10);
let color = `rgb(${scroll_pos},${scroll_pos},${scroll_pos})`;
console.clear()
console.log({timestamp, color, last_known_scroll_position});
leftArrow.style.color = color;
rightArrow.style.color = color;
}
shadeFinder.addEventListener('scroll', function(e) {
last_known_scroll_position = shadeFinder.scrollLeft;
requestAnimationFrame(doSomething);
});
}
document.addEventListener("DOMContentLoaded", changeArrowColor);
body {
padding:0;
margin:20px 0;
}
.fms-wrapper {
height: 80px;
width: 100%;
max-width: 100vw;
overflow-y: hidden;
overflow-x: scroll;
position: relative;
padding: 0 30px;
margin: 0 5px;
box-sizing: border-box;
z-index:0;
margin: 0;
}
.prev, .next {
position: fixed;
z-index: 5;
width: 30px;
height: 50px;
font-size: 28px;
line-height: 50px;
box-sizing: border-box;
cursor:pointer;
color: black;
background: white;
box-shadow: 0 0 5px rgba(0,0,0,.5);
text-align: center;
pointer-events: auto;
}
.prev {
left: 5px;
}
.next {
right: 5px;
}
.fms-content {
width: 400%;
height: 50px;
background: linear-gradient(90deg, #f0f0f0 0%, #f0f0f0 25%, #919191 25%, #919191 50%, #f0f0f0 50%, #f0f0f0 75%, #919191 75%, #919191 100%);
box-sizing: border-box;
margin: 0;
padding: 0;
}
<div class="fms-wrapper">
<div class="prev" tabindex="0"><</div>
<div class="next" tabindex="0">></div>
<div class="fms-content"></div>
</div>
I am trying to create a side scrolling roulette-type animation. My roll() function randomly generates a list of images beforehand, and then will scroll through them.
So that the images outside of my div aren't visible, I tried setting overflow:hidden, however, all images are still visible, even outside the div.
My code:
function roll() {
var tile_src = ["http://i.imgur.com/XUp8Y4r.jpg", "http://i.imgur.com/Q3suBFZ.jpg"]
var roulette = document.getElementById("roulette");
var tiles = []
for (var i = 0; i < 64; i++) {
tile = document.createElement("IMG");
tile.id = "tile"
tile.style.position = "fixed"
tile.style.zIndex = "-1";
tile.src = tile_src[Math.floor((Math.random() * 2))]
tile.style.left = $(window).innerWidth() / 2 - 64 + i * 136 + 'px';
tile.style.top = '16px'
tiles.push(tile)
}
for (var i = 0; i < tiles.length; i++) {
roulette.appendChild(tiles[i])
}
}
function place_objects() {
var ticker = document.getElementById("ticker")
ticker.style.position = "fixed"
ticker.style.left = $(window).innerWidth() / 2 - 16 + 'px'
ticker.style.top = '8px'
var roll = document.getElementById("roll")
roll.style.position = "fixed"
roll.style.left = $(window).innerWidth() / 2 - $("#roll").outerWidth() / 2 + 'px'
roll.style.top = $("#ticker").height() + 16 + 'px'
var roulette = document.getElementById("roulette")
roulette.style.position = "fixed"
roulette.style.left = $(window).innerWidth() / 2 - $("#roulette").outerWidth() / 2 + 'px'
roulette.style.top = '6px'
roulette.style.overflow = "hidden"
}
function init() {
$(window).resize(function() {
place_objects();
});
place_objects();
}
$(init)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Random Pomodoro</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<style>
#font-face {
font-family: "Stratum";
src: url(Stratum2-Regular.woff) format("woff");
}
.btn {
background: #507224;
background-image: -webkit-linear-gradient(top, #507224, #3a551b);
background-image: -moz-linear-gradient(top, #507224, #3a551b);
background-image: -ms-linear-gradient(top, #507224, #3a551b);
background-image: -o-linear-gradient(top, #507224, #3a551b);
background-image: linear-gradient(to bottom, #507224, #3a551b);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0px;
font-family: Stratum;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
border: solid #2a3b16 2px;
text-decoration: none;
}
.btn:hover {
background: #728f4e;
border: solid #64754f 2px;
text-decoration: none;
}
.btn:active {
background: #3a551b;
background-image: -webkit-linear-gradient(top, #3a551b, #507224);
background-image: -moz-linear-gradient(top, #3a551b, #507224);
background-image: -ms-linear-gradient(top, #3a551b, #507224);
background-image: -o-linear-gradient(top, #3a551b, #507224);
background-image: linear-gradient(to bottom, #3a551b, #507224);
border: solid #64754f 2px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="roulette" style="width:600px; height:144px; border:solid 2px #0f0f0f;">
<img src="http://i.imgur.com/VMfKDyq.png" id="ticker">
</div>
<button class="button btn" onclick="roll()" id="roll">Roll</button>
</body>
For some reason my div is tiny on here. When I run it on my PC, I get this:
What I want is for only the portions of images inside the div to be visible.
Demo: https://jsfiddle.net/nu5jbc50/1/
When you apply a position: fixed or position: absolute, it is likely that such element(s) is not following the DOM tree which means those img are not display as children of the div#roulette. To get rid of that, I would add a new container <div class="showcase" style="width: 200%; height: 100%; "></div> after img#ticker
HTML:
<div id="roulette" style="width:600px; height:144px; border:solid 2px #0f0f0f;">
<img src="http://i.imgur.com/VMfKDyq.png" id="ticker">
<div class="showcase" style="width: 200%; height: 100%; "></div>
</div>
<button class="button btn" onclick="roll()" id="roll">Roll</button>
Instead of using position: fixed for the tiles, I would apply position: relative; to it and not assigning value to their left CSS property anymore, we may use the margin-left CSS property.
JavaScript (only the roll() is modified):
function roll() {
var tile_src = ["http://i.imgur.com/XUp8Y4r.jpg", "http://i.imgur.com/Q3suBFZ.jpg"]
var roulette = document.getElementById("roulette");
var $showcase = $(".showcase");
var tiles = []
for (var i = 0; i < 64; i++) {
tile = document.createElement("IMG");
tile.id = "tile"
tile.style.position = "relative";
tile.style.zIndex = "-1";
tile.src = tile_src[Math.floor((Math.random() * 2))];
//tile.style.left = $(window).innerWidth() / 2 - 64 + i * 136 + 'px';
tile.style.top = '16px';
if (i > 0) tile.style.margin = '0 0 0 32px';
else tile.style.margin = '0 0 0 ' + ($(roulette).innerWidth() / 2 - 64).toString() + 'px';
tiles.push(tile);
}
for (var i = 0; i < tiles.length; i++) {
$showcase.append($(tiles[i]));
}
}
also applied the following to CSS that demo the animation:
div.showcase > *:first-child {
-webkit-transition: 64s linear;
transition: 64s linear;
}
Call the animation via:
setTimeout(function(){
$showcase.find(">*").first().css("margin-left", ((128 * tiles.length) * -1).toString() + 'px');
}, 1);
I am having a Trouble with this custom media player, Media player not functioning properly.
I have 2 problems:
When full-screen it goes back to the default HTML5 player
When i adjust the width of the video tag it throws all of the spacing out and ruins the player.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Video/Audio</title>
<link rel='stylesheet' type='text/css' href='style.css' />
<style type="text/css">
</style>
<script src='jquery.js'></script>
<script src='javascript.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('video').videoPlayer({
'playerWidth' : 1,
'videoClass' : 'video'
});
});
</script>
</head>
<body>
<div class="container" class="player">
<video width="700" height="400">
<source src="https://s3-eu-west-1.amazonaws.com/icevideos/151014+Cathodic+Protection+of+Highways/151014.PETERBOROUGH.CATHODICPROTECTION.HIGH1.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>
</div>
</body>
</html>
CSS
body {
font-size: 62.5%;
padding: 0;
margin: 0;
}
.player {
background: grey;
box-sizing: border-box;
height: 40px;
-moz-box-sizing: border-box;
float: left;
font-family: Arial, sans-serif;
position: absolute;
padding: 0;
bottom: 4px;
z-index: 2;
opacity: 1;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
-webkit-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 100%;
}
.video {
position: relative;
margin: 0px auto;
}
.video:hover .player {
opacity: 1;
}
.player .progress {
width: 60%;
height: 20px;
border-radius: 5px;
background: #000;
box-shadow: inset 0 -5px 10px rgba(0,0,0,0.1);
float: left;
cursor: pointer;
margin: 12px 0 0 0;
padding: 0;
position: relative;
font-variant: normal;
margin-left: 20px;
}
.player .progress-bar {
background: #FF6600;
border-radius: 5px;
height: 100%;
position: relative;
z-index: 999;
width: 0;
}
.player .button-holder {
position: relative;
left: 10px;
}
.player .progress-button {
background: #00bdff;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
border-radius: 30px;
width: 20px;
height: 20px;
position: absolute;
left: -20px;
text-decoration: overline;
}
.player [class^="buffered"] {
background: rgba(255,255,255,0.1);
position: absolute;
top: 0;
left: 30px;
height: 100%;
border-radius: 5px;
z-index: 1;
}
.player .play-pause {
display: inline-block;
font-size: 3em;
float: left;
text-shadow: 0 0 0 #fff;
color: #00bdff;
width: 4%;
padding: 4px 0 0 0;
margin-left: 15px;
cursor: pointer;
font-variant: small-caps;
}
.player .play, .player .pause-button {
-webkit-transition: all 0.2s ease-out;
}
.player .play .pause-button, .player .pause .play-button {
display: none;
}
.player .pause-button {
padding: 5px 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 34px;
}
.player .pause-button span {
background: #FF6600;
width: 8px;
height: 24px;
float: left;
display: block;
}
.player .pause-button span:first-of-type {
margin: 0 4px 0 0;
}
.player .time {
color: #fff;
font-weight: bold;
font-size: 1.2em;
position: absolute;
width: 150px;
margin-left: 425px;
bottom: 3px;
}
.player .stime, .ttime {
color: #fff;
}
.player .play:hover {
text-shadow: 0 0 5px #fff;
}
.player .play:active, .pause-button:active span {
text-shadow: 0 0 7px #fff;
}
.player .pause-button:hover span {
box-shadow: 0 0 5px #fff;
} .player .pause-button:active span {
box-shadow: 0 0 7px #fff;
}
.player .volume {
position: relative;
float: left;
width: 7%;
height: 100%;
margin-left: 70px;
}
.player .volume-icon {
padding: 1.5%;
height: 100%;
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: all 0.15s linear;
}
.player .volume-icon-hover {
background-color: grey;
}
.player .volume-holder {
height: 100px;
width: 80%;
position: absolute;
display: none;
background: grey;
left: 0;
border-radius: 5px 5px 0 0;
top: -100px;
}
.player .volume-bar-holder {
background: black;
width: 20px;
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
margin: 15px auto;
height: 80px;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.player .volume-button {
background: #00bdff;
box-shadow: 0 0 20px rgba(0,0,0,0.3);
border-radius: 30px;
width: 20px;
height: 20px;
}
.player .volume-button-holder {
position: relative;
top: -10px;
}
.player .volume-bar {
background: #FF6600;
border-radius: 5px;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
}
.player .fullscreen {
width: 5%;
cursor: pointer;
float: left;
height: 100%;
}
.player .fullscreen a {
width: 25px;
height: 20px;
border-radius: 3px;
background: #00bdff;
display: block;
position: relative;
top: 10px;
margin: 0px auto;
}
.player .fullscreen a:hover {
background: #FF6600;
}
.player .volume-icon span {
width: 20%;
height: 23%;
background-color: #00bdff;
display: block;
position: relative;
z-index: 1;
font-weight: bold;
top: 40%;
color: #fff;
left: 22%;
}
.player .volume-icon span:before,
.player .volume-icon span:after {
content: '';
position: absolute;
}
.player .volume-icon span:before {
width: 0;
height: 0;
border: 1em solid transparent;
border-left: none;
border-right-color: #00bdff;
z-index: 2;
top: -2px;
left: 10%;
margin-top: -40%;
}
.player .volume-icon span:after {
width: 10%;
height: 4%;
border: 1px solid #00bdff;
left: 150%;
border-width: 0px 0px 0 0;
border-radius: 0 50px 0 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
font-variant: small-caps;
}
.player .v-change-11 span:after { border-width: 10px 10px 0 0; top: 0; }
.player .v-change-10 span:after { border-width: 9px 9px 0 0; top: 1px; }
.player .v-change-9 span:after { border-width: 8px 8px 0 0; top: 1px; }
.player .v-change-8 span:after { border-width: 7px 7px 0 0; top: 2px; }
.player .v-change-7 span:after { border-width: 6px 6px 0 0; top: 2px; }
.player .v-change-6 span:after { border-width: 5px 5px 0 0; top: 3px; }
.player .v-change-5 span:after { border-width: 4px 4px 0 0; top: 3px; }
.player .v-change-4 span:after { border-width: 3px 3px 0 0; top: 4px; }
.player .v-change-3 span:after { border-width: 2px 2px 0 0; top: 4px; }
.player .v-change-2 span:after { border-width: 1px 1px 0 0; top: 5px; }
.player .v-change-1 span:after { border-width: 0px 0px 0 0; top: 5px; }
.player .v-change-1 span:after {
content: '+';
-webkit-transform: rotate(45deg);
font-size: 20px;
top: -6px;
left: 25px;
color: #00bdff;
}
/* ------- IGNORE */
#header {
width: 100%;
margin: 0px auto;
}
#header #center {
text-align: center;
}
#header h1 span {
color: #000;
display: block;
font-size: 50px;
}
#header p {
font-family: 'Georgia', serif;
}
#header h1 {
color: #892dbf;
font: bold 40px 'Bree Serif', serif;
}
#travel {
padding: 10px;
background: rgba(0,0,0,0.6);
border-bottom: 2px solid rgba(0,0,0,0.2);
font-variant: normal;
text-decoration: none;
}
#travel a {
font-family: 'Georgia', serif;
text-decoration: none;
border-bottom: 1px solid #f9f9f9;
font-size: 20px;
color: #f9f9f9;
}
.container {
padding: 40px 0 0 0;
}
.logo {
margin-top: 9px;
float: left;
margin-left: 6px;
}
JS
(function($) {
$.fn.videoPlayer = function(options) {
var settings = {
playerWidth : '0.95', // Default is 95%
videoClass : 'video' // Video Class
}
// Extend the options so they work with the plugin
if(options) {
$.extend(settings, options);
}
// For each so that we keep chainability.
return this.each(function() {
$(this)[0].addEventListener('loadedmetadata', function() {
// Basic Variables
var $this = $(this);
var $settings = settings;
// Wrap the video in a div with the class of your choosing
$this.wrap('<div class="'+$settings.videoClass+'"></div>');
// Select the div we just wrapped our video in for easy selection.
var $that = $this.parent('.'+$settings.videoClass);
// The Structure of our video player
{
$( '<div class="player">'
+'<img class="logo" src="http://www.cpdonline.tv/ice-events/mediaplayer/icelogo.png" height="20px">'
+ '<div class="play-pause play">'
+ '<span class="play-button">►</span>'
+ '<div class="pause-button">'
+ '<span> </span>'
+ '<span> </span>'
+ '</div>'
+ '</div>'
+ '<div class="progress">'
+ '<div class="progress-bar">'
+ '<div class="button-holder">'
+ '<div class="progress-button"> </div>'
+ '</div>'
+ '</div>'
+ '<div class="time">'
+ '<span class="ctime">00:00</span>'
+ '<span class="stime"> / </span>'
+ '<span class="ttime">00:00</span>'
+ '</div>'
+ '</div>'
+ '<div class="volume">'
+ '<div class="volume-holder">'
+ '<div class="volume-bar-holder">'
+ '<div class="volume-bar">'
+ '<div class="volume-button-holder">'
+ '<div class="volume-button"> </div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="volume-icon v-change-0">'
+ '<span> </span>'
+ '</div>'
+ '</div>'
+ '<div class="fullscreen"> '
+ ' '
+ '</div>'
+ '</div>').appendTo($that);
}
// Width of the video
$videoWidth = $this.width();
$that.width($videoWidth+'px');
// Set width of the player based on previously noted settings
$that.find('.player').css({'width' : ($settings.playerWidth*100)+'%', 'left' : ((100-$settings.playerWidth*100)/2)+'%'});
// Video information
var $spc = $(this)[0], // Specific video
$duration = $spc.duration, // Video Duration
$volume = $spc.volume, // Video volume
currentTime;
// Some other misc variables to check when things are happening
var $mclicking = false,
$vclicking = false,
$vidhover = false,
$volhover = false,
$playing = false,
$drop = false,
$begin = false,
$draggingProgess = false,
$storevol,
x = 0,
y = 0,
vtime = 0,
updProgWidth = 0,
volume = 0;
// Setting the width, etc of the player
var $volume = $spc.volume;
// So the user cant select text in the player
$that.bind('selectstart', function() { return false; });
// Set some widths
var progWidth = $that.find('.progress').width();
var bufferLength = function() {
// The buffered regions of the video
var buffered = $spc.buffered;
// Rest all buffered regions everytime this function is run
$that.find('[class^=buffered]').remove();
// If buffered regions exist
if(buffered.length > 0) {
// The length of the buffered regions is i
var i = buffered.length;
while(i--) {
// Max and min buffers
$maxBuffer = buffered.end(i);
$minBuffer = buffered.start(i);
// The offset and width of buffered area
var bufferOffset = ($minBuffer / $duration) * 100;
var bufferWidth = (($maxBuffer - $minBuffer) / $duration) * 100;
// Append the buffered regions to the video
$('<div class="buffered"></div>').css({"left" : bufferOffset+'%', 'width' : bufferWidth+'%'}).appendTo($that.find('.progress'));
}
}
}
// Run the buffer function
bufferLength();
// The timing function, updates the time.
var timeUpdate = function($ignore) {
// The current time of the video based on progress bar position
var time = Math.round(($('.progress-bar').width() / progWidth) * $duration);
// The 'real' time of the video
var curTime = $spc.currentTime;
// Seconds are set to 0 by default, minutes are the time divided by 60
// tminutes and tseconds are the total mins and seconds.
var seconds = 0,
minutes = Math.floor(time / 60),
tminutes = Math.round($duration / 60),
tseconds = Math.round(($duration) - (tminutes*60));
// If time exists (well, video time)
if(time) {
// seconds are equal to the time minus the minutes
seconds = Math.round(time) - (60*minutes);
// So if seconds go above 59
if(seconds > 59) {
// Increase minutes, reset seconds
seconds = Math.round(time) - (60*minutes);
if(seconds == 60) {
minutes = Math.round(time / 60);
seconds = 0;
}
}
}
// Updated progress width
updProgWidth = (curTime / $duration) * progWidth
// Set a zero before the number if its less than 10.
if(seconds < 10) { seconds = '0'+seconds; }
if(tseconds < 10) { tseconds = '0'+tseconds; }
// A variable set which we'll use later on
if($ignore != true) {
$that.find('.progress-bar').css({'width' : updProgWidth+'px'});
$that.find('.progress-button').css({'left' : (updProgWidth-$that.find('.progress-button').width())+'px'});
}
// Update times
$that.find('.ctime').html(minutes+':'+seconds)
$that.find('.ttime').html(tminutes+':'+tseconds);
// If playing update buffer value
if($spc.currentTime > 0 && $spc.paused == false && $spc.ended == false) {
bufferLength();
}
}
// Run the timing function twice, once on init and again when the time updates.
timeUpdate();
$spc.addEventListener('timeupdate', timeUpdate);
// When the user clicks play, bind a click event
$that.find('.play-pause').bind('click', function() {
// Set up a playing variable
if($spc.currentTime > 0 && $spc.paused == false && $spc.ended == false) {
$playing = false;
} else { $playing = true; }
// If playing, etc, change classes to show pause or play button
if($playing == false) {
$spc.pause();
$(this).addClass('play').removeClass('pause');
bufferLength();
} else {
$begin = true;
$spc.play();
$(this).addClass('pause').removeClass('play');
}
});
// Bind a function to the progress bar so the user can select a point in the video
$that.find('.progress').bind('mousedown', function(e) {
// Progress bar is being clicked
$mclicking = true;
// If video is playing then pause while we change time of the video
if($playing == true) {
$spc.pause();
}
// The x position of the mouse in the progress bar
x = e.pageX - $that.find('.progress').offset().left;
// Update current time
currentTime = (x / progWidth) * $duration;
$spc.currentTime = currentTime;
});
// When the user clicks on the volume bar holder, initiate the volume change event
$that.find('.volume-bar-holder').bind('mousedown', function(e) {
// Clicking of volume is true
$vclicking = true;
// Y position of mouse in volume slider
y = $that.find('.volume-bar-holder').height() - (e.pageY - $that.find('.volume-bar-holder').offset().top);
// Return false if user tries to click outside volume area
if(y < 0 || y > $(this).height()) {
$vclicking = false;
return false;
}
// Update CSS to reflect what's happened
$that.find('.volume-bar').css({'height' : y+'px'});
$that.find('.volume-button').css({'top' : (y-($that.find('.volume-button').height()/2))+'px'});
// Update some variables
$spc.volume = $that.find('.volume-bar').height() / $(this).height();
$storevol = $that.find('.volume-bar').height() / $(this).height();
$volume = $that.find('.volume-bar').height() / $(this).height();
// Run a little animation for the volume icon.
volanim();
});
// A quick function for binding the animation of the volume icon
var volanim = function() {
// Check where volume is and update class depending on that.
for(var i = 0; i < 1; i += 0.1) {
var fi = parseInt(Math.floor(i*10)) / 10;
var volid = (fi * 10)+1;
if($volume == 1) {
if($volhover == true) {
$that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-11');
} else {
$that.find('.volume-icon').removeClass().addClass('volume-icon v-change-11');
}
}
else if($volume == 0) {
if($volhover == true) {
$that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-1');
} else {
$that.find('.volume-icon').removeClass().addClass('volume-icon v-change-1');
}
}
else if($volume > (fi-0.1) && volume < fi && !$that.find('.volume-icon').hasClass('v-change-'+volid)) {
if($volhover == true) {
$that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-'+volid);
} else {
$that.find('.volume-icon').removeClass().addClass('volume-icon v-change-'+volid);
}
}
}
}
// Run the volanim function
volanim();
// Check if the user is hovering over the volume button
$that.find('.volume').hover(function() {
$volhover = true;
}, function() {
$volhover = false;
});
// For usability purposes then bind a function to the body assuming that the user has clicked mouse
// down on the progress bar or volume bar
$('body, html').bind('mousemove', function(e) {
// Hide the player if video has been played and user hovers away from video
if($begin == true) {
$that.hover(function() {
$that.find('.player').stop(true, false).animate({'opacity' : '1'}, 0.5);
}, function() {
$that.find('.player').stop(true, false).animate({'opacity' : '0'}, 0.5);
});
}
// For the progress bar controls
if($mclicking == true) {
// Dragging is happening
$draggingProgress = true;
// The thing we're going to apply to the CSS (changes based on conditional statements);
var progMove = 0;
// Width of the progress button (a little button at the end of the progress bar)
var buttonWidth = $that.find('.progress-button').width();
// Updated x posititon the user is at
x = e.pageX - $that.find('.progress').offset().left;
// If video is playing
if($playing == true) {
// And the current time is less than the duration
if(currentTime < $duration) {
// Then the play-pause icon should definitely be a pause button
$that.find('.play-pause').addClass('pause').removeClass('play');
}
}
if(x < 0) { // If x is less than 0 then move the progress bar 0px
progMove = 0;
$spc.currentTime = 0;
}
else if(x > progWidth) { // If x is more than the progress bar width then set progMove to progWidth
$spc.currentTime = $duration;
progMove = progWidth;
}
else { // Otherwise progMove is equal to the mouse x coordinate
progMove = x;
currentTime = (x / progWidth) * $duration;
$spc.currentTime = currentTime;
}
// Change CSS based on previous conditional statement
$that.find('.progress-bar').css({'width' : $progMove+'px'});
$that.find('.progress-button').css({'left' : ($progMove-buttonWidth)+'px'});
}
// For the volume controls
if($vclicking == true) {
// The position of the mouse on the volume slider
y = $that.find('.volume-bar-holder').height() - (e.pageY - $that.find('.volume-bar-holder').offset().top);
// The position the user is moving to on the slider.
var volMove = 0;
// If the volume holder box is hidden then just return false
if($that.find('.volume-holder').css('display') == 'none') {
$vclicking = false;
return false;
}
// Add the hover class to the volume icon
if(!$that.find('.volume-icon').hasClass('volume-icon-hover')) {
$that.find('.volume-icon').addClass('volume-icon-hover');
}
if(y < 0 || y == 0) { // If y is less than 0 or equal to 0 then volMove is 0.
$volume = 0;
volMove = 0;
$that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-11');
} else if(y > $(this).find('.volume-bar-holder').height() || (y / $that.find('.volume-bar-holder').height()) == 1) { // If y is more than the height then volMove is equal to the height
$volume = 1;
volMove = $that.find('.volume-bar-holder').height();
$that.find('.volume-icon').removeClass().addClass('volume-icon volume-icon-hover v-change-1');
} else { // Otherwise volMove is just y
$volume = $that.find('.volume-bar').height() / $that.find('.volume-bar-holder').height();
volMove = y;
}
// Adjust the CSS based on the previous conditional statmeent
$that.find('.volume-bar').css({'height' : volMove+'px'});
$that.find('.volume-button').css({'top' : (volMove+$that.find('.volume-button').height())+'px'});
// Run the animation function
volanim();
// Change the volume and store volume
// Store volume is the volume the user last had in place
// in case they want to mute the video, unmuting will then
// return the user to their previous volume.
$spc.volume = $volume;
$storevol = $volume;
}
// If the user hovers over the volume controls, then fade in or out the volume
// icon hover class
if($volhover == false) {
$that.find('.volume-holder').stop(true, false).fadeOut(100);
$that.find('.volume-icon').removeClass('volume-icon-hover');
}
else {
$that.find('.volume-icon').addClass('volume-icon-hover');
$that.find('.volume-holder').fadeIn(100);
}
})
// When the video ends the play button becomes a pause button
$spc.addEventListener('ended', function() {
$playing = false;
// If the user is not dragging
if($draggingProgress == false) {
$that.find('.play-pause').addClass('play').removeClass('pause');
}
});
// If the user clicks on the volume icon, mute the video, store previous volume, and then
// show previous volume should they click on it again.
$that.find('.volume-icon').bind('mousedown', function() {
$volume = $spc.volume; // Update volume
// If volume is undefined then the store volume is the current volume
if(typeof $storevol == 'undefined') {
$storevol = $spc.volume;
}
// If volume is more than 0
if($volume > 0) {
// then the user wants to mute the video, so volume will become 0
$spc.volume = 0;
$volume = 0;
$that.find('.volume-bar').css({'height' : '0'});
volanim();
}
else {
// Otherwise user is unmuting video, so volume is now store volume.
$spc.volume = $storevol;
$volume = $storevol;
$that.find('.volume-bar').css({'height' : ($storevol*100)+'%'});
volanim();
}
});
// If the user lets go of the mouse, clicking is false for both volume and progress.
// Also the video will begin playing if it was playing before the drag process began.
// We're also running the bufferLength function
$('body, html').bind('mouseup', function(e) {
$mclicking = false;
$vclicking = false;
$draggingProgress = false;
if($playing == true) {
$spc.play();
}
bufferLength();
});
// Check if fullscreen supported. If it's not just don't show the fullscreen icon.
if(!$spc.requestFullscreen && !$spc.mozRequestFullScreen && !$spc.webkitRequestFullScreen) {
$('.fullscreen').hide();
}
// Requests fullscreen based on browser.
$('.fullscreen').click(function() {
if ($spc.requestFullscreen) {
$spc.requestFullscreen();
}
else if ($spc.mozRequestFullScreen) {
$spc.mozRequestFullScreen();
}
else if ($spc.webkitRequestFullScreen) {
$spc.webkitRequestFullScreen();
}
});
});
});
}
})(jQuery);
I would also like to point out that this is someone else source code and cannot find where i got this from.
https://jsfiddle.net/f39huqpv/