We Keep Coding

Disable resizeable element when they cover 100% of the screen height & width

I want to make a conditionnal from the execution of a script.
When a window inside the browser is at 100% width and 100% height, I want to disable a script from running.
The script is the one here https://stackoverflow.com/a/71189606/9444690
element = document.getElementById("window");
let heightPercentage = Math.round(
(element.clientHeight / window.innerHeight) * 100
);
let widthPercentage = Math.round(
(element.clientWidth / window.innerWidth) * 100
);
if (heightPercentage < 100 && widthPercentage < 100) {
makeResizable(element, 400, 225, 10);
}
function makeResizable(element, minW = 100, minH = 100, size = 20) { ...
I tried this and I also tried to change the type of the script on the push of a button. It changed to type="application/JSON" as mentionned in this post: https://stackoverflow.com/a/26483433/9444690 but nothing happened.

I think the best way would be to use computed values: that's 100% sure it's the real size you have on screen...
values();
function values() {
let compStyles = window.getComputedStyle(document.body);
let w = compStyles.getPropertyValue('width');
let h = compStyles.getPropertyValue('height');
document.querySelector('#bodyValues').innerHTML = 'Body width: ' + w + ' / height: ' + h;
console.log(parseFloat(w), parseFloat(h));
compStyles = window.getComputedStyle(document.querySelector('.container'));
w = compStyles.getPropertyValue('width');
h = compStyles.getPropertyValue('height');
document.querySelector('#containerValues').innerHTML = 'Body width: ' + w + ' / height: ' + h;
console.log(parseFloat(w), parseFloat(h));
}
body {
background-color: #3b404e;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
background-color: red;
}
<div class="container">
<button id="plus">+</button>
<div id="bodyValues"></div>
<div id="containerValues"></div>
</div>
Now you can compare the real value of the element with body size. Get computed style width give back value with px, parseFloat (of if you prefer in int parseInt) get rid of the px.

make the video fill the screen width and and remove the frame

I have created this frame for playing the movie which resizes based on the user's screen size.
Now I want to be able to remove the frame and fill the whole width of the user screen using another function but each time I failed.
Now I'm using injectViewportSizes() function. I want a new function to do this:
remove the frame completely without affecting anything else.
stretch the width of the movie until it fills the whole width of the screen.
of course stretching the movie is much simpler for me than removing the frame ... each time I've tried to remove it the whole movie removes or a distortion occurs for the rest of the elements.
Here is the code:
const clipSource = `https://langfox.ir/movie/movieclip/My_name_is_Edward_Bloom.mp4`;
const content = document.querySelector('.content');
const box = document.getElementById("box");
let video = document.createElement('video');
content.appendChild(video);
video.id = 'clip';
let clip = document.getElementById("clip");
clip.currentTime = 0;
let source = document.createElement('source');
source.src = clipSource;
source.type = 'video/mp4';
video.appendChild(source);
video.load();
setTimeout(() => {
injectViewportSizes(); // or goFull();
clip.play();
}, 3000);
function goFull(){
// Remove the frame and make the video fill the while 'Width' of the screen
}
function injectViewportSizes(){
let screenWidth = screen.width;
let screenHeight = screen.height;
let vwPixels = screenWidth / 100;
let clipWidth = clip.videoWidth;
let clipHeight = clip.videoHeight;
screenWidth = screenWidth - (screenWidth * 0.10); // available space to put the clip inside
screenHeight = screenHeight - (screenHeight * 0.10);
let clipWidthNew;
let clipHeightNew;
if(clipWidth > clipHeight){
clipWidthNew = clipWidth;
let ratio = clipWidth / clipHeight;
while(screenWidth < clipWidthNew) {
clipWidthNew--;
}
clipHeightNew = clipWidthNew / ratio;
} else {
clipHeightNew = clipHeight;
let ratio = clipWidth / clipHeight;
while(screenHeight < clipHeightNew) {
clipHeightNew--;
}
clipWidthNew = clipHeightNew * ratio;
}
let viewPortClipWidth = clipWidthNew * (100 / document.body.clientWidth);
let viewPortClipHeight = clipHeightNew / vwPixels;
document.querySelector('.box .content').style.width = `${viewPortClipWidth}vw`;
document.querySelector('.box .content').style.height = `${viewPortClipHeight}vw`;
}
video {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #0b0e12;
}
.box {
border-radius: 0.31vh;
position: relative;
overflow: hidden;
}
.box::after {
content: '';
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: repeating-linear-gradient(-45deg, white 0 0.48828125vw, #f00c36 0 0.9765625vw) 0 0/1.380859375vw 1.380859375vw;
width: calc(100vw + 1.380859375vw);
height: calc(100vh + 1.380859375vw);
}
.box .content {
position: relative;
max-width: 100vw;
max-height: 100vh;
box-shadow: 0 0 0.262vh black, 0 0 0.6553vh rgba(0, 0, 0, 1), inset 0 0 0.6553vh rgba(0, 0, 0, 1);
margin: 0.45vh;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='box' class="box">
<div class="content"></div>
</div>
</body>
</html>
Note: it seems that this code snippet can't show the original frame correctly but it works in a raw HTML file locally.

Youtube video as div background not working with all videos

I am making use of the following solution for using a Youtube video as a website div background: https://stackoverflow.com/a/45377998
A JSFiddle example can be found in https://jsfiddle.net/350D/uq1vvavf/
The problem I am currently having is that not all videos will be shown. For example, the video in the JSFiddle works properly (https://www.youtube.com/watch?v=R3AKlscrjmQ). However, this video, for example will not work: https://www.youtube.com/watch?v=V5YOhcAof8I
I suspect this may have to do with the signal format (720p, 360p, etc.). I have made an attempt to debug the problem and found that a link for the non-working Youtube video is still returned within the streams array (just like the working video). I appreciate any hints to solving the problem.
HTML:
<video loop muted autoplay playsinline id="video"></video>
<pre></pre>
JS:
var vid = "R3AKlscrjmQ",
streams,
video_focused = true,
video_tag = $("#video"),
video_obj = video_tag.get(0);
$.getJSON("https://query.yahooapis.com/v1/public/yql", {
q: "select * from csv where url='https://www.youtube.com/get_video_info?video_id=" + vid + "'",
format: "json"
}, function(data) {
if (data.query.results && !data.query.results.row.length) {
streams = parse_youtube_meta(data.query.results.row.col0);
video_tag.attr({
src: streams['1080p'] || streams['720p'] || streams['360p']
});
document.addEventListener("visibilitychange", function() {
video_focused = !video_focused ? video_obj.play() : video_obj.pause();
});
} else {
$('pre').text('YQL request error...');
}
});
function parse_youtube_meta(rawdata) {
var data = parse_str(rawdata),
streams = (data.url_encoded_fmt_stream_map + ',' + data.adaptive_fmts).split(','),
result = {};
$.each(streams, function(n, s) {
var stream = parse_str(s),
itag = stream.itag * 1,
quality = false,
itag_map = {
18: '360p',
22: '720p',
37: '1080p',
38: '3072p',
82: '360p3d',
83: '480p3d',
84: '720p3d',
85: '1080p3d',
133: '240pna',
134: '360pna',
135: '480pna',
136: '720pna',
137: '1080pna',
264: '1440pna',
298: '720p60',
299: '1080p60na',
160: '144pna',
139: "48kbps",
140: "128kbps",
141: "256kbps"
};
//if (stream.type.indexOf('o/mp4') > 0) console.log(stream);
if (itag_map[itag]) result[itag_map[itag]] = stream.url;
});
return result;
};
function parse_str(str) {
return str.split('&').reduce(function(params, param) {
var paramSplit = param.split('=').map(function(value) {
return decodeURIComponent(value.replace('+', ' '));
});
params[paramSplit[0]] = paramSplit[1];
return params;
}, {});
}

As a workaround for now I used following solution https://codepen.io/henripeetsmann/pen/KpVVLq thanks to Henri Peetsmann. For me this works fine, even when changing the URL to one from Youtube. The only downside of using Youtube is that now you can't hide related video's when pausing. So I had to cover this part with something else.
HTML
<div class="videobg">
<div class="videobg-width">
<div class="videobg-aspect">
<div class="videobg-make-height">
<div class="videobg-hide-controls">
<iframe src="https://player.vimeo.com/video/8970192?autoplay=1&loop=1&title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
CSS
/* Quick reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Make elements as high as viewport */
html {
height: 100%;
}
body {
position: relative;
height: 100%;
}
/* Video background */
.videobg {
position: relative;
width: 100%; /* Set video container element width here */
height: 100%; /* Set video container element height here */
overflow: hidden;
background: #111; /* bg color, if video is not high enough */
}
/* horizontally center the video */
.videobg-width {
position: absolute;
width: 100%; /* Change width value to cover more area*/
height: 100%;
left: -9999px;
right: -9999px;
margin: auto;
}
/* set video aspect ratio and vertically center */
.videobg-aspect {
position: absolute;
width: 100%;
height: 0;
top: -9999px;
bottom: -9999px;
margin: auto;
padding-bottom: 56.25%; /* 16:9 ratio */
overflow: hidden;
}
.videobg-make-height {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
.videobg-hide-controls {
box-sizing: content-box;
position: relative;
height: 100%;
width: 100%;
/* Vimeo timeline and play button are ~55px high */
padding: 55px 97.7777px; /* 16:9 ratio */
top: -55px;
left: -97.7777px; /* 16:9 ratio */
}
.videobg iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0 none;
}
jQuery
var timeoutId;
var $videoBgAspect = $(".videobg-aspect");
var $videoBgWidth = $(".videobg-width");
var videoAspect = $videoBgAspect.outerHeight() / $videoBgAspect.outerWidth();
function videobgEnlarge() {
console.log('resize');
windowAspect = ($(window).height() / $(window).width());
if (windowAspect > videoAspect) {
$videoBgWidth.width((windowAspect / videoAspect) * 100 + '%');
} else {
$videoBgWidth.width(100 + "%")
}
}
$(window).resize(function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(videobgEnlarge, 100);
});
$(function() {
videobgEnlarge();
});

Load an image (background-image CSS) dynamically using javascript

i'm trying to convert the background-image (css) into an object to change it's value but I couldn't find a solution.
At the moment there are 2 images in the script the first one is a circle loader script and the second one is a script that based of the value of the range it shows or hides part of the picture.
What i'm trying to do is to make load the picture inside the circle loader script.
For instance if the circle loader is 30/100 it should show only display 30% of the picture inside the circle vertically.
Here's the code:
Live version:
var bar = new ProgressBar.Circle(container, {
color: '#aaa',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#aaa', width: 1 },
to: { color: '#333', width: 4 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(1.0); // Number from 0.0 to 1.0
var sldH = document.getElementById('slider-h');
var sldV = document.getElementById('slider-v');
var img = document.getElementById("image");
// attach change handlers to the sliders
sldH.addEventListener('change', changeHandler);
sldV.addEventListener('change', changeHandler);
function changeHandler(e) {
var isHorizontal = e.srcElement.id == 'slider-h';
// get the sliders values
var valH = sldH.value;
var valV = sldV.value;
// calculate the percentage to pass an absolute length value
// to the clip property and determine the static value
var leftVal = calcPerc(img.width, valH);
var topVal = -1 * calcPerc(img.height, valV);
var clipVal = getClipVal(topVal, leftVal);
// set the images' right offset clip accordingly
img.style.clip = clipVal;
}
function calcPerc(range, val) {
return range / 100 * val;
}
function getClipVal(top, left) {
return 'rect(' + top + 'px, auto, auto, ' + left + 'px)';
}
#container {
margin: 20px;
top: 80px;
width: 200px;
height: 200px;
position: relative;
background-image: url("http://pngimg.com/uploads/bitcoin/bitcoin_PNG47.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.btc{
background-image: url("http://pngimg.com/uploads/bitcoin/bitcoin_PNG47.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
#slider-h,
#slider-v,
#image,
#underlay {
/* absolute positioning is mandatory for clipped elements (#image) */
position: absolute;
}
#slider-h,
#image,
#underlay {
width: 192px;
left: 100px;
}
#slider-h {
top: 50px;
left: 350px;
}
#slider-v {
top: 192px;
left: 200px;;
width: 207px;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
#image,
#underlay {
top: 100px;
left: 350px;
height: 207px;
}
#image {
/* initial clip state */
}
#underlay {
/*background-color: #4C76A5;*/
}
<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container" >
</div>
<input type="range" min="0" max="100" id="slider-h" value="0" />
<input type="range" min="-100" max="0" id="slider-v" value="0" />
<div id="underlay"></div>
<img src="http://pngimg.com/uploads/bitcoin/bitcoin_PNG47.png" id="image" />
I hope somebody can help! Thanks

How can I add limits to a custom scrolling element?

I have a pretty huge image being displayed in a container, the image stretches with the view port as it gets resized, but as the image is so big I have added scroller buttons to the side of the page, up and down, the only problem I have now is that when I press up or down there is no limit, the user can keep going until the image is completely out of sight, how can I stop that from happening?
Here is the code I have thus far,
HTML:
<body>
<div id="wrapper">
<div class="scroll top"></div>
<div id="content">
<div id="zoom_container">
<img id="image" src="8052x2000px" />
</div>
</div>
<div class="scroll bot"></div>
</div>
</body>
CSS:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
overflow: hidden;
height: 100%;
max-height: 100%;
}
#content {
min-height: 100% !important;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#image {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
jQuery:
//side scroller bar
$('.scroll').live('click', function(){
var direction = $(this).hasClass('top');
var img_pos_top = $("#zoom_container img").position().top;
var inc = 0;
inc = $("#zoom_container img").height() / 10;
if(direction)
{
inc = $("#zoom_container img").position().top + inc;
}
else
{
inc = $("#zoom_container img").position().top - inc;
}
$("#zoom_container img").css({ position: 'relative',top: inc });
});
so as you can see I am incrementing or decrementing the top positioning of the image by 10% of it's height each click, how can I make sure the top of the image will never go further down than the top of the viewport and the bottom of the image never further up than the bottom of the viewport?
Is there a better more efficient way of achieving the same result?

Have a try this one.
<html>
<head>
<title>Canvas Sizing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var canvasContext;
resizeCanvas();
$(window).resize(function() { resizeCanvas() });
function resizeCanvas()
{
var w = window.innerWidth - 40;
var h = window.innerHeight - 40;
var canvasString = '<canvas id="mainCanvas" width="' + w + '" height="' + h + '">Canvas is not supported</canvas>';
$('#contentholder').empty();
$(canvasString).appendTo('#contentholder');
canvasContext = $('#mainCanvas').get(0).getContext('2d');
drawOnCanvas();
}
function drawOnCanvas()
{
var x = 15;
var y = 35;
canvasContext.font = "30pt serif";
canvasContext.fillStyle="#0f0";
canvasContext.fillText("Hello World!", x, y);
}
});
</script>
<style>
#mainCanvas
{
background-color: #000;
border: solid 3px #0F0;
}
body
{
background: #000;
}
#contentholder
{
width: 99%;
height: 99%;
margin: auto;
}
</style
</head>
<body>
<div id="contentholder"></div>
</body>