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.
Related
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.
I have encountered some websites which has footer at the bottom and scroll actually happens when I scroll to the area above footer.
To automatically scroll those pages, but the problem with my code currently is it goes at the bottom of the page, where I directly reach footer and hence the scroll trigger which is present just above the footer does not gets triggered.
Is there any way to achieve the same?
This is what I have tried currently which I am executing from the console:
(function() {
var intervalObj = null;
var retry = 0;
var clickHandler = function() {
console.log("Clicked; stopping autoscroll");
clearInterval(intervalObj);
document.body.removeEventListener("click", clickHandler);
}
function scrollDown() {
var scrollHeight = document.body.scrollHeight,
scrollTop = document.body.scrollTop,
innerHeight = window.innerHeight,
difference = (scrollHeight - scrollTop) - innerHeight
if (difference > 0) {
window.scrollBy(0, difference);
if (retry > 0) {
retry = 0;
}
console.log("scrolling down more");
} else {
if (retry >= 3) {
console.log("reached bottom of page; stopping");
clearInterval(intervalObj);
document.body.removeEventListener("click", clickHandler);
} else {
console.log("[apparenty] hit bottom of page; retrying: " + (retry + 1));
retry++;
}
}
}
document.body.addEventListener("click", clickHandler);
intervalObj = setInterval(scrollDown, 1000);
})()
There are many websites that has this feature, to test the same one of the website which you can try is
https://www.zomato.com/bangalore/indiranagar-restaurants
Note : The question similar to this does not answer how to scroll at some mid point of page instead it takes me directly to the footer, so this is not a duplicate
Logic is to retain to the middle of the Scroller unless the page is completely loaded. We can tweak the code a little to achieve the last position of scroller. Try this:
var scrollHeight = 0,
newScrollHeight;
do {
window.scrollTo(0, document.body.scrollHeight / 2);
newScrollHeight = document.body.scrollHeight / 2;
if (newScrollHeight == scrollHeight) {
break;
} else {
scrollHeight = newScrollHeight;
}
} while (true);
Although Kumar Rishabh has already answered your question, I have another solution for this situation.
Set the domain to detect if the user scrolls to the domain.
The effect just like the website you povider . https://www.zomato.com/bangalore/indiranagar-restaurants
I do some simple example for you with pure Javascript.
Fragment core code:
// Here is domain to detect if user scroll into.
if (
triggerDomain.getBoundingClientRect().top < window.innerHeight &&
triggerDomain.getBoundingClientRect().bottom > 0
) {
if (getMore === false) {
getMore = true
// Do something you want here ....
console.info('got more !!')
Full code sample, check code snippet:
const rootElement = document.getElementById("rootDiv");
const triggerDomain = document.getElementById("triggerDomain");
let getMore = false;
function detectScrollIntoDomain() {
// Here is domain to detect if user scroll into.
if (
triggerDomain.getBoundingClientRect().top < window.innerHeight &&
triggerDomain.getBoundingClientRect().bottom > 0
) {
if (getMore === false) {
getMore = true;
// Do something you want here ....
console.info("got more !!");
setTimeout(() => {
let currentScrollTop = rootElement.scrollTop;
for (let i = 0; i < 15; i++) {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
const contentElement = document.getElementById("content");
const card = document.createElement("div");
card.className = "contentCard";
card.style.backgroundColor = `rgba(${r}, ${g}, ${b})`;
contentElement.appendChild(card);
}
rootElement.scrollTo(0, currentScrollTop);
// Don't forget to set flag to `false`.
getMore = false;
}, 200);
}
}
}
rootElement.addEventListener("scroll", detectScrollIntoDomain, {
passive: true
});
html,
body {
position: relative;
font-family: sans-serif;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
h1,
h2 {
margin: 0;
color: aliceblue;
}
#rootDiv {
position: relative;
overflow: auto;
height: 100%;
width: 100%;
}
#header {
height: 200px;
background-color: rgb(112, 112, 112);
}
#content {
display: flex;
flex-wrap: wrap;
position: relative;
height: fit-content;
background-color: rgb(136, 136, 136);
}
#content div:first-child {
height: 600px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#triggerDomain {
position: absolute;
bottom: 0px;
outline: 1px dashed rgb(3, 25, 119);
height: 500px;
width: 100%;
background: repeating-linear-gradient(
135deg,
rgba(46, 45, 45, 0.3) 0,
rgba(46, 45, 45, 0.3) 10px,
rgba(136, 136, 136, 0.3) 10px,
rgba(136, 136, 136, 0.3) 20px
);
}
#footer {
height: 180%;
background-color: rgb(112, 112, 112);
}
.contentCard {
width: 180px;
height: 180px;
margin: 12px;
border-radius: 8px;
background-color: aquamarine;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./src/styles.css"
</head>
<body>
<div id="rootDiv">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<div>
<h2>Content</h2>
<h2>Scroll down to get more cards.</h2>
</div>
<div id="triggerDomain">
<h2>Trigger domain</h2>
</div>
</div>
<div id="footer">
<h2>Footer</h2>
</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
Hope to help you !
I am trying to create a vertical slide show on scroll. One picture-screen glide over the next one, and then the second over the third, and so on…
HTML/CSS structure looks as following: external container has display property relative. Inside it there are several containers with images with the property fixed, so that they are all as a card deck and you pull card by card from the top.
JavaScript function should load the first pare of image-pages and follow the amount of scrolled distance changing the index of the image-page and changing the z-index of the layer (the top one: 2, the one blow: 1 and so on...)
var mansDok = []; var paklajAttal = [];
// Find all the slides containers
mansDok = document.getElementsByClassName("slaide");
// Find all the slides IDs
for(i=0; i<mansDok.length; i++) {
paklajAttal[i] = mansDok[i].id;
}
// Height of the browser window
var logAugst = document.documentElement.clientHeight;
// Start function on scrolling the contents
window.onscroll = function() {vertikSlaidrade()};
//
// Slideshow function
function vertikSlaidrade() {
var k = 0; var i = 0, winScroll;
// How far the screen been scrolled
winScroll = document.documentElement.scrollTop || document.body.scrollTop;
// Change slides while scrolling
if(winScroll <= logAugst * 1) {
document.getElementById(paklajAttal[k]).style.zIndex = "2";
document.getElementById(paklajAttal[k]).style.position = "relative";
document.getElementById(paklajAttal[k+1]).style.display = "block";
document.getElementById(paklajAttal[k+1]).style.position = "fixed";
} else if(winScroll <= logAugst * 2) {
document.getElementById(paklajAttal[k+1]).style.zIndex = "3";
document.getElementById(paklajAttal[k+1]).style.position = "relative";
document.getElementById(paklajAttal[k+2]).style.display = "block";
document.getElementById(paklajAttal[k+2]).style.position = "fixed";
} else if(winScroll <= logAugst * 2.8) {
document.getElementById(paklajAttal[k+2]).style.zIndex = "4";
document.getElementById(paklajAttal[k+2]).style.position = "relative";
document.getElementById(paklajAttal[k+3]).style.display = "block";
document.getElementById(paklajAttal[k+3]).style.position = "fixed";
} else if(winScroll > logAugst * 2.8) {
// Run reset function by the end of slides
atiestat();
}
}
// Function to reset the slides properties
function atiestat() {
for(var i=0; i<mansDok.length; i++) {
document.getElementById(paklajAttal[i]).style.zIndex = "0";
document.getElementById(paklajAttal[i]).style.position = "absolute";
document.getElementById(paklajAttal[i]).style.display = "none";
}
// Show the first pair of slides
document.getElementById(paklajAttal[0]).style.display = "block";
document.getElementById(paklajAttal[0]).style.zIndex = "2";
document.getElementById(paklajAttal[1]).style.position = "fixed";
document.getElementById(paklajAttal[1]).style.zIndex = "1";
}
* {box-sizing: border-box;}
html, body{
height: 100%;
margin: 0px;
padding: 0px;
background-color: #000;
font-size: 1em;
}
main {
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
/* Page with slide */
.slaide {
position: absolute;
top: 0px;
left: 0px;
z-index: 0;
margin: 0px;
padding: 0px;
width: 100%;
display: none;
}
.slaide img {
width: 1230px; /* Doesn't work below this value !?!? */
}
/* Empty filler */
.tukss {
display: block;
margin: 0px;
padding: 0px;
height: 1000px; /* Do NOT reduce this value!!! */
}
<main>
<div class="slaide" id="lapa1" style="display: block;">
<img src="https://www.w3schools.com/howto/img_parallax.jpg">
</div>
<div class="slaide" id="lapa2">
<img src="https://www.w3schools.com/howto/img_parallax2.jpg">
</div>
<div class="slaide" id="lapa3">
<img src="https://www.w3schools.com/howto/img_parallax3.jpg">
</div>
<div class="tukss" id="tukss"></div>
</main>
May be its not the most elegant version of JS code, but everything works perfectly as I wanted. Somehow it doesn’t work if I change the image size below 1230px or to 100% and reduce the width of the browser window. (Images are from W3Schools.com)
I would appreciate if somebody could help me out with this situation.
Here is an example of what i want to achieve:
https://www.flambette.com/en/
I have tried to change the css properties of images but that effect does not satisfy my needs.
I have tried the following code:
mydocument.on('scroll',function() {
if (mydocument.scrollTop() > 10 && mydocument.scrollTop() < 200 ) {
$('#first').css('top', '320px');
$('#first').css('left', '215px');
$('#first').css('transition', '0.5s');
}
else {
$('#first').css('top', '300px');
$('#first').css('left', '200px');
$('#first').css('transition', '0.5s');
}
});
This is supposed to move an image when you scroll between 10 and 200 px.
var container = document.getElementById('container');
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var scrollArea = 1000 - windowHeight;
var square1 = document.getElementsByClassName('square')[0];
var square2 = document.getElementsByClassName('square')[1];
// update position of square 1 and square 2 when scroll event fires.
window.addEventListener('scroll', function() {
var scrollTop = window.pageYOffset || window.scrollTop;
var scrollPercent = scrollTop/scrollArea || 0;
square1.style.left = scrollPercent*window.innerWidth + 'px';
square2.style.left = 800 - scrollPercent*window.innerWidth*0.6 + 'px';
});
body {
overflow-x: hidden;
}
.container {
width: 100%;
height: 1000px;
}
.square {
position: absolute;
}
.square-1 {
width: 100px;
height: 100px;
background: red;
top: 600px;
}
.square-2 {
width: 120px;
height: 120px;
background: black;
left: 800px;
top: 800px;
}
<div class="container" id="container">
<div class="square square-1"></div>
<div class="square square-2"></div>
</div>
Hope to help you.
Here you can see more examples about movable elements and scroll events.
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>