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);
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>
I am trying to move and rotate the object in the direction of the mouse click. Unfortunately during the first click object automatically align itself to left. It works perfectly after the first click but it doesn't work during the first click. I couldn't find out why it goes automatically to upper left corner. How can I fix that? Here is the code:
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
var box = $("#thing");
var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
theThing.style.transform += "rotate(" + angle + "deg)";
setTimeout(function() {
theThing.style.transform = translate3dValue;
}, 500);
}
body {
background-color: #FFF;
padding: 0;
margin: 0;
}
#contentContainer {
width: 550px;
height: 350px;
border: 15px #EDEDED;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
width: 75px;
height: 75px;
background-color: rgb(255, 207, 0);
border-radius: 0%;
transform: translate3d(200px, 100px, 0);
transition: transform.2s ease-in;
}
#triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 45px solid transparent;
border-bottom: 75px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
<div id="thing">
<div id="triangle">
</div>
</div>
</div>
Because initially the transform is set in the CSS thus you cannot append the rotation to it and you will simply override it. Make it inline using JS and it will work fine. It will behave like the next ones since later you will be adding all the transform inline:
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);
theThing.style.transform="translate3d(200px, 100px, 0)";
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
var box = $("#thing");
var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
theThing.style.transform += "rotate(" + angle + "deg)";
setTimeout(function() {
theThing.style.transform = translate3dValue;
}, 500);
}
body {
background-color: #FFF;
padding: 0;
margin: 0;
}
#contentContainer {
width: 550px;
height: 350px;
border: 15px #EDEDED;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
width: 75px;
height: 75px;
background-color: rgb(255, 207, 0);
border-radius: 0%;
/*transform: translate3d(200px, 100px, 0);*/
transition: transform.2s ease-in;
}
#triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 45px solid transparent;
border-bottom: 75px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
<div id="thing">
<div id="triangle">
</div>
</div>
</div>
i copied this code from codepen.io to add a crossfade effect to my site's background images.
var bgImageArray = ["lonely.jpg", "uluwatu.jpg", "carezza-lake.jpg", "batu-bolong-temple.jpg"],
base = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-",
secs = 4;
bgImageArray.forEach(function(img){
new Image().src = base + img;
// caches images, avoiding white flash between background replacements
});
function backgroundSequence() {
window.clearTimeout();
var k = 0;
for (i = 0; i < bgImageArray.length; i++) {
setTimeout(function(){
document.documentElement.style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
document.documentElement.style.backgroundSize ="cover";
if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }
}, (secs * 1000) * i)
}
}
backgroundSequence();
* {
box-sizing: border-box;
}
html {
margin: 0;
background-size: cover;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-lonely.jpg") no-repeat center center fixed;
background-blend-mode: darken;
// blend mode optional at this stage; will be used more in the next demo.
transition: 3s;
}
body { margin: 0; }
div#texttop {
color: #fff;
width: 30%;
margin-top: 5%;
margin-left: 5%;
padding: 2rem;
border: 4px double rgba(255,255,255,0.3);
background: rgba(0,0,0,0.3);
font-family: Oxygen, sans-serif;
h1 {
margin-top: 0;
text-align: center;
font-weight: 100;
}
p {
line-height: 1.6;
}
}
#media all and (max-width: 770px) {
div#texttop { display: none; }
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="texttop">
<h1>True Cross-Fade Background Images</h1>
<p>A repeating sequence of fullscreen background images, pushed all the way to the root element. Crossfading effect in Webkit-derived browsers (Chrome, Safari, Opera).</p>
</div>
the images are cycling fine, but they aren't doing the cross fading transition, they're just changing without the crossfade effect. and occasionally there are white flashes between the image cycle.
i've inserted a snippet of the code here, and it still isn't working. perhaps there's something missing that i can't find?
codepen.io is using scss you should copy the compiled css,
var bgImageArray = ["lonely.jpg", "uluwatu.jpg", "carezza-lake.jpg", "batu-bolong-temple.jpg"],
base = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-",
secs = 4;
bgImageArray.forEach(function(img){
new Image().src = base + img;
// caches images, avoiding white flash between background replacements
});
function backgroundSequence() {
window.clearTimeout();
var k = 0;
for (i = 0; i < bgImageArray.length; i++) {
setTimeout(function(){
document.documentElement.style.background = "url(" + base + bgImageArray[k] + ") no-repeat center center fixed";
document.documentElement.style.backgroundSize ="cover";
if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000))} else { k++; }
}, (secs * 1000) * i)
}
}
backgroundSequence();
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
margin: 0;
background-size: cover;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/full-lonely.jpg") no-repeat center center fixed;
background-blend-mode: darken;
-webkit-transition: 3s;
transition: 3s;
}
body {
margin: 0;
}
div#texttop {
color: #fff;
width: 30%;
margin-top: 5%;
margin-left: 5%;
padding: 2rem;
border: 4px double rgba(255, 255, 255, 0.3);
background: rgba(0, 0, 0, 0.3);
font-family: Oxygen, sans-serif;
}
div#texttop h1 {
margin-top: 0;
text-align: center;
font-weight: 100;
}
div#texttop p {
line-height: 1.6;
}
#media all and (max-width: 770px) {
div#texttop {
display: none;
}
}
<div id="texttop">
<h1>True Cross-Fade Background Images</h1>
<p>A repeating sequence of fullscreen background images, pushed all the way to the root element. Crossfading effect in Webkit-derived browsers (Chrome, Safari, Opera).</p>
</div>
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.
.