Issue rendering big images in Chrome - javascript

I'm test image render in chrome. The test is simple:
I make 12 image tags that size is almost (4000 * 3000)px and render in chrome that size is (500 * 500), in that render is slow but work.
The problem is I move another chrome tap and back to my page, the viewport window is show white space almost two second.
I solve this problem to resize real image size to (500 * 500)px but I'm curious about why this situation is happen in low level.
Please tell me keyword or explain about this situation. the test code is in the bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#root {
width: 1000px;
display: flex;
flex-wrap: wrap;
}
.img {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
const rootEl = document.getElementById("root");
new Array(12).fill(0).forEach((_, index) => {
const imgEl = document.createElement("img");
imgEl.setAttribute(
"src",
`http://localhost:8000/images/test${index + 1}.jpg`
);
imgEl.setAttribute("class", "img");
rootEl.appendChild(imgEl);
});
</script>
</body>
</html>
I'm trying to resize image and problem solved.
The question is why this situation is happen in low level.

Related

how to connect some boxes element together with wavy line?

I have some boxes who sort 3 by 3.
I want to connect them together with wavy line.
I know it is possible to download SVG wavy line and use it between boxes, but is there any idea to do it with CSS or JavaScript and create that lines randomly (it's ok if all lines has same view) ?
This is what I mean :
this would be one solution as taken from https://erikmartinjordan.com/style-hr-line-wavy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<hr>
</body>
<style>
hr{
border: none;
}
hr:after{
content: '∿∿∿∿∿∿∿∿';
/* Ratio -> font-size/letter-spacing = 6.25 */
letter-spacing: -9.6px;
font-size: 60px;
}
</style>
</html>

Make a div smaller when scrolling

Hi i tried to make the div smaller wqhen scrolling. however i found some article that the div is small then when scroll it make bigger. i wanted the opposite. when run the image is 100% then when scroll it will be smaller. can someone help me please? i am new to this
This is the code:
https://codesandbox.io/s/sharp-lewin-to1o2b?file=/index.html
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
<style>
#animatedDiv {
background: #dc143c;
min-height: 9000px;
min-width: 20%;
position: absolute;
}
</style>
<script>
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
var scrollSlow = scrollVal / 4;
//Changing CSS Width
aDiv.style.width = Math.min(Math.max(scrollSlow, 20), 100) + "%";
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
</script>
I did it with my math logic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
<style>
#animatedDiv {
background: #dc143c;
min-height: 9000px;
width: 100%;
position: absolute;
}
</style>
<script>
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
//Changing CSS Width
/* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%";
I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation
*/
//NOTE this line checks if PERCENT <= 10 then sets width to 10%
( (100 - (scrollVal*100/1500)) ) <= 10 ? aDiv.style.width = "10%" : aDiv.style.width = (100 - (scrollVal*100/1500)) + "%";
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
</script>

Cannot display the top property

Hey everyone i am trying to console.log top property of an element in javascript but i only thing i see in the console is a blank line.
Also when i try to console.dir element i the top property is an empty string even though i set the top property to 100px.
Question is how do i display the top propert of an element using .style.top
CSS
img {
width: 100px;
position: absolute;
top: 100px;
left: 10px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Coin Game Starter</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<img id="player" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">
<img id="coin" src="https://myrealdomain.com/images/gold-coin-gif-1.gif" alt="">
<script src="app.js"></script>
</body>
</html>
JS
let player = document.querySelector("#player").style.top
console.log(player)
To get the CSS properties to Javascript.
var element = document.getElementById('player');
var styles = window.getComputedStyle(element);
var top = styles.getPropertyValue('top');
console.log(top); // 100px

Detect user has scrolled past first section

I am currently switching a header class based on the scrollTop and wrapping the logic in
if(scroll_start >= 600) {...}
but it doesn't work ideally because obviously the screen resolution changes.
Ideally I would want to do this (in pseudo code)
if (first section (with an id) is scrolled past) {...}
but I'm not sure how to achieve this? Any suggestions?
Thanks
Get the height of the element, then add it to the position of the element from top
var elementPosition = $([element]).position().top + $([element]).height()
$(document).on('scroll', function() {
if($(this).scrollTop() > elementPosition){
// actions
}
})
Here is an example:
window.addEventListener("scroll", function(){
var two = document.getElementById("One");
if (window.scrollY > two.offsetTop + two.offsetHeight){
console.log("You got it!");
}
})
#One{
height:50px;
width:100%;
background-color:lightblue;
}
#Two{
height:1000px;
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="One">Goto: HERE</div>
<div id="SCROLL">HERE:</div>
<div id ="Two"></div>
</body>
</html>

How do i make a simple effect dropdown go up?

Does anyone have a min to help me with this code?
http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/
Basically, I want to have the dropdown dropup instead . . . I have tried setting
bottom: 100%;
and some other stuff, but i can't figure it out. Any thing is appreciated.
Thanks!
add or edit this css class:
.cd-dropdown ul {
top: auto;
bottom: 100%;
width: 100%;
}
if you add it make sure it's after the css file of the exemple
example using the file index.html on the provided files :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Effects for Drop-Down Lists</title>
<meta name="description" content="Simple Effects for Drop-Down Lists" />
<meta name="keywords" content="drop-down, select, jquery, plugin, fallback, transition, transform, 3d, css3" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script src="js/modernizr.custom.63321.js"></script>
</head>
<body>
<style>
.cd-dropdown ul {
top: auto;
bottom: 100%;
width: 100%;
}
</style>
you can add this snippet after the body of eache example files : index2.htnml...
or at the end of the srtyle*X*.css files
don' t forget to clear the cache of the browser!
Maybe you need to make the bottom: 0px; not 100%!

Categories

Resources