trying to make a simple masonry style grid with Jquery but keep running into an issue with weird margins appearing and i can't figure out why. Had a few attempts with similar results. Here's the latest
js
$(document).ready(function () {
var $boxes = $('.box');
var rowPos = 0;
var counter = 0;
$boxes.each(function (ind) {
var boxWidth = $(this).width();
var upperBoxHeight = 0;
var upperBoxPosition = 0;
var top = 0;
rowPos = counter * boxWidth;
counter++;
if(counter >= 3){
counter = 0;
}
if(ind >= 3){
upperBoxHeight = $boxes.eq(ind - 3).height();
upperBoxPosition = $boxes.eq(ind -3).position().top;
top = upperBoxHeight + upperBoxPosition; }
$(this).css({
left: rowPos,
top : top
});
});
});
css
.container{
width: 85%;
margin: auto;
position: relative;
}
.box{
width: 33.3333%;
position: absolute;
}
.box1, .box5{
background: #2baf63;
height: 500px;
}
.box2, .box6{
background: #623ec5;
height: 650px;
}
.box3, .box7{
background: #3e81c5;
height: 300px;
}
.box4, .box8{
background: #9fba43;
height: 400px;
}
markup
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-3.1.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="box box1"><span>box 1</span></div>
<div class="box box2"><span>box 2</span></div>
<div class="box box3"><span>box 3</span></div>
<div class="box box4"><span>box 4</span></div>
<div class="box box5"><span>box 5</span></div>
<div class="box box6"><span>box 6</span></div>
<div class="box box7"><span>box 7</span></div>
<div class="box box8"><span>box 8</span></div>
</div>
<script src="js/functions.js"></script>
</body>
</html>
strange thing is, if i open the inspector and refresh the page, all boxes lock into their intended position. if i close the inspector and refresh again, problem comes back.
then with inspector open
Related
how to make progressBar work during long-time loops of computing?
by using setInterval()? by using async or await? how? please show me in code.
I know using VUE's bind can help,but I want simple js-code without any outside import to do this.
<!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>
<style type="text/css">
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 10%;
height: 30px;
background-color: #4caf50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
</head>
<body>
<div style="text-align: center">
<h2>RSA!</h2>
<div id="myProgress">
<div id="myBar">10%</div>
</div>
<br />
<label>输入素数的范围,最大:21474836:</label>
<input
type="number"
id="myCount"
placeholder=""
value="2147483"
min="100"
max="21474836"
/>
<button class="dom1" onclick="initPrim()">1.素数生成器</button><br />
<div
id="result0"
style="width: 100%; word-break: break-all; word-wrap: break-word"
></div>
<br />
</div>
</body>
<!--21474836 2147483647 sqrt(Integer.MAX)=46341-->
<script>
var PrimeArray = [2];
//initPrim 生成素数表
async function initPrim(limit) {
document.getElementById("result0").innerHTML = " ";
var count = document.getElementById("myCount").value;
for (i = 2; i < count; i++) {
let j;
let tag = 0;
for (
j = 0;
j < PrimeArray.length && PrimeArray[j] < Math.sqrt(i) + 1;
j++
) {
if (i % PrimeArray[j] == 0) {
tag = 1;
break;
}
}
if (tag == 0) {
PrimeArray.push(i);
}
}
document.getElementById("result0").append("p=\t" + PrimeArray);
}
</script>
</html>
HTML Web Workers is the solution that I need.
Question closed!
https://www.w3schools.com/HTML/html5_webworkers.asp
I am having trouble with scroll using if statements.
How can I fix it and any helpful tips will be much appreciated.
if (window.scrollY == '100px') {
document.body.style.backgroundColor = "red";
}
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div> hi </div>
</body>
</html>
You need to listen on scroll event first.
window.scrollY value is integer.
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}
});
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div> hi </div>
</body>
</html>
The condition needs to be >= 100, and you need to listen to the scroll event of the window.
Here is a working snippet:
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}
});
.container {
position: absolute;
top: 200%;
font-size: 2rem;
}
<div class="container">hi</div>
You can do it as follows -
window.addEventListener("scroll", function() {
if (window.scrollY >= 100) {
document.body.style.backgroundColor = "red";
}else{
document.body.style.backgroundColor = "white";
}
});
*{
transition-duration: 1s;
}
div {
position: absolute;
top: 200%;
font-size: 5vw;
}
<div> hi </div>
In your code, you had written the condition to be window.scrollY == 100px, so it was not working. But once you modify the condition, the code will work as expected.
Also, the else statement or transition effect are not needed, just added them for nice effect.
I am trying to make a beautiful parallax cap of 6 png images.
But the page freezes terribly for 10 seconds and only then starts to work normally.
If you go to another tab and go back, then again the whole tab freezes for 5 seconds.
Why can this happen?
Friezes are observed on two different PCs with good power. Even if the music from the browser works and open a contribution with this parallax, the music slows down 2 times and starts to lag: D
body {
background-color: #271c33;
}
.art-block {
position: relative;
z-index: 10;
display: block;
}
.art-block, .art_layer {
height: 1000px;
}
.art_layer {
background-position: bottom center;
background-size: auto 1038px;
background-repeat: repeat-x;
width: 100%;
position: absolute;
}
.art_layer.parallax {
position: fixed;
}
#art-back {
background-image: url(../img/background-min.jpg);
}
#art-1 {
background-image: url(../img/1-min.png);
}
#art-2 {
background-image: url(../img/2-min.png);
}
#art-3 {
background-image: url(../img/3-min.png);
}
#art-4 {
background-image: url(../img/4-min.png);
}
#art-5 {
background-image: url(../img/5-min.png);
}
#art-6 {
background-image: url(../img/6-min.png);
}
.main {
background-color: #271c33;
position: relative;
z-index: 100;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/util.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="css/style.css?1582535292">
</head>
<body>
<div class="art-block">
<div class="art_layer parallax" id="art-back" data-speed="2"></div>
<div class="art_layer parallax" id="art-6" data-speed="7"></div>
<div class="art_layer parallax" id="art-5" data-speed="22"></div>
<div class="art_layer parallax" id="art-4" data-speed="33"></div>
<div class="art_layer parallax" id="art-3" data-speed="46"></div>
<div class="art_layer parallax" id="art-2" data-speed="58"></div>
<div class="art_layer" id="art-1" data-speed="55"></div>
</div>
<div class="main" style="height: 2500px;">
ss
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).scroll(function(){
var windowScroll = $(window).scrollTop();
$('.art_layer.parallax').each(function(){
var $layer = $(this);
var yPos = -(windowScroll * $layer.data('speed') / 100);
$layer.css({
"transform" : "translate3d(0px, " + yPos + "px, 0px)"
});
});
});
</script>
</body>
</html>
May be image sizes? 7000x3500 pixels
i need a draggable div not to go outside of second div frame, so far i managed to make a "collision" basically returning true or false if draggable div is inside the frame of other div. So the thing now is that i cant get this to work, i was trying to get it to a x = 90(example) when it hits the frame and few more examples , but i just can't get this to work. The draggable div doesn't want to go back to position.
Here is a JSFiddle: https://jsfiddle.net/kojaa/x80wL1mj/2/
<!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">
<link rel="stylesheet" href="style.css">
<title>Catch a ball</title>
</head>
<body>
<div class="catcherMovableArea" id="catcherMovableArea">
<div id="catcher" class="catcher"></div>
</div>
<script src="script.js"></script>
</body>
</html>
.catcherMovableArea {
position: absolute;
border: 1px solid black;
width: 1900px;
top: 90%;
height: 50px;
}
.catcher {
position: absolute;
width: 250px;
height: 30px;
border-radius: 10px;
background-color: black;
top: 20%;
}
let catcher = $("#catcher");
$(document).mousemove(function(e) {
catcher.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit"
});
let catcherOffset = $(catcher).offset();
let CxPos = catcherOffset.left;
let CyPos = catcherOffset.top;
let catcherYInMovableArea, catcherXInMovableArea = true;
while(!isCatcherYinMovableArea(CyPos)){
catcherYInMovableArea = false;
break;
}
while(!isCatcherXinMovableArea(CxPos)){
catcherXInMovableArea = false;
break;
}
});
function isCatcherYinMovableArea(ypos){
if(ypos < 849.5999755859375 || ypos > 870.5999755859375) {
return false;
} else {
return true;
}
}
function isCatcherXinMovableArea(xpos){
if(xpos < 8 || xpos > 1655 ) {
return false;
} else {
return true;
}
}
By default, the collision option will prevent the element from being placed outside of the window. You want to prevent it from moving outside of a specific element.
To do this, use the within option to select which element should be used for containment.
Example:
let draggable = $("#draggable");
$(document).mousemove(function(e) {
draggable.position({
my: "left-50% bottom+50%",
of: e,
collision: "fit",
within: "#container"
});
});
#container { width: 200px; height: 100px; border-style: solid }
#draggable { width: 50px; height: 50px; background-color: black }
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>
<div id="container">
<div id="draggable"></div>
</div>
Hello I have problem with really easy script. It should change class if under 768 px of window width but it just doesn't work. I have no clue why. I dont want to use media queries in this in this case.
Here's code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ez</title>
<style>
.aside {
float: left;
height: 1000px;
width: 250px;
background-color: grey;
}
.sidebar {
position: absolute;
top: 0;
left: -250px;
}
</style>
</head>
<body style="height: 2000px">
<aside class="aside" id="aside"></aside>
<main style="float: left; height: 1000px; width: 70%; background-color: black;"></main>
<script>
var elm = document.getElementById("aside");
function change() {
var w = window.innerWidth;
if(w<768) {
elm.className = "sidebar";
} else {
elm.className = "aside";
}
}
window.addEventListener("resize", change);
</script>
</body>
</html>
I started your script. For 768px and more there is class 'aside', for 767px and less class 'sidebar'. So where is the problem?
If you open page on width less than 768 your script won't be working correct. You have to add it to event onload too