I am trying to make a slider from div to div but the position of the div is always wrong I don't seem to manage to code it right to fix it in the right position, I have tried floats, inline everything but nothing seems to work. so the parent class is "products" the ensemble class is "product" and each div is "product-1, product-2 etc."
Here is the whole wesite from a to z.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Paritrāṇa Sari collection</title>
<script
src="jquery-3.5.1.min.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!-- <script src="function.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="normalize.css">
<style type="text/css">
* {
margin: 0;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
font-family: sans-serif;
box-sizing: border-box;
}
/*:root {
cursor: url(model.png), auto;
}*/
/*html {zoom: 160%;}*/
body {
background-color: #e4e0dd;
}
.wrapper {
margin: 0;
padding: 0;
display: inline-block;
}
#c {
display: block;
margin: 20px auto 0;
}
#info {
position: absolute;
left: -1px;
top: -1px;
width: auto;
max-width: 420px;
height: auto;
background: #f8f8f8;
border-bottom-right-radius: 10px;
border:1px solid #ccc;
}
#top {
/*background: #fff;*/
width: 100%;
height: auto;
position: relative;
/* border-bottom: 1px solid #eee;*/
}
p {
font-family: Arial, sans-serif;
color: #666;
text-align: justify;
font-size: 16px;
margin: 0px 16px;
}
.center {
text-align: center;
}
#net {
text-align:center;
white-space:nowrap;
font-size:19px;
background:rgba(0,0,0,0.1);
padding:8px 12px;
border-radius:8px;
display:block;
color:#888;
}
.bull {
opacity: 0.3;
margin: 0 6px;
font-size: 14px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-bottom: 1px solid black;
}
.column {
flex-basis: 100%;
border-right: 1px solid black;
padding-left: 5px;
}
.row_1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.column_1 {
flex-basis: 100%;
}
#media screen and (min-width: 800px) {
.column {
flex: 1;
}
.column_1 {
flex: 1;
}
}
#media screen and (min-width: 800px) {
._25 {
flex: 1.5;
}
._55 {
flex: 7.5;
}
._20 {
flex: 2;
}
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: white;
background: black;}
a:active {
text-decoration: none;
color: white;
background: black;
}
img {
text-align: center;
justify-content: center;
object-position: center;
top: 0;
left: 0;
width: 50%;
height: auto;
z-index: 1000;
}
.signupsubmit {
transform: rotateY(50deg) rotateX(50deg);
-webkit-transform: rotateY(50deg) rotateX(50deg);
transition: 1s;
}
.signupsubmit:hover {
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
/*.active {
zoom: 160%;
}*/
body .cursor {
pointer-events: none;
}
body .cursor__ball {
position: fixed;
top: 0;
left: 0;
mix-blend-mode: difference;
z-index: 1000;
}
body .cursor__ball circle {
fill: #f7f8fa;
}
section {float: left;}
::selection {
background-color: rgba(0, 0, 0, 0.25);
color: white;
}
::-moz-selection {
background-color: rgba(0, 0, 0, 0.25);
color: white;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
a :hover {
z-index: 10000000;
}
.hidden {
/* display: none; */
opacity: 0;
}
/* */
.container {
position: absolute;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
/* width: 200vh;
height: 100vh;*/
/* background-color: aqua;*/
*/
overflow: hidden;
}
.products {
position: relative;
display: inline-block;
/* width: 1000%;
height: 100%;
left: 0%;
/* background-color: blueviolet;*/*/
transition: left .5s ease-in-out;
}
.product {
/* width: 70vh;
height: 100%;*/
float: left;
display: inline-block;
}
.product-1 {
/* background-color: beige;*/
}
.product-2 {
background-color: red;
}
.product-3 {
background-color: slategray;
}
.product-4 {
background-color: burlywood;
}
.buttonLeft, .buttonRight {
height: 100%;
width: 20%;
position: absolute;
background-color: red;
transition: opacity .5s ease-in-out;
top: 50px;
cursor: pointer;
z-index: 1;
}
.buttonLeft:hover, .buttonRight:hover {
opacity: 0.2;
}
.buttonLeft {
left: 0px;
cursor: w-resize;
}
.buttonRight {
right: 0px;
cursor: e-resize;
}
</style>
<script>
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
</script>
</head>
<body>
<!-- cursor -->
<div class="cursor">
<div class="cursor__ball cursor__ball--big">
<svg height="60" width="60">
<circle cx="15" cy="15" r="16" stroke-width="0"></circle>
</svg>
</div>
<!-- small ball cursor -->
<div class="cursor__ball cursor__ball--small">
<svg height="10" width="10">
<circle cx="5" cy="5" r="4" stroke-width="0"></circle>
</svg>
</div>
</div>
<!-- cursor end -->
<!-- navigation -->
<nav>
<div class="row" style="background-color:white;">
<div class="column">
Paritrāṇa Sari collection
</div>
<div class="column">
Concept
</div>
<div class="column">
Process
</div>
</div>
<div class="row" style="background-color:white;">
<div class="column">
Red sari N°1
</div>
<div class="column">
Orange sari N°2
</div>
<div class="column">
Saffron sari N°3
</div>
<div class="column">
Yellow sari N°4
</div>
<div class="column">
Turmeric sari N°5
</div>
<div class="column">
Green sari N°6
</div>
<div class="column">
Blue sari N°7
</div>
<div class="column">
Pink sari N°8
</div>
<div class="column">
Black sari N°9
</div>
<div class="column">
White sariN°10
</div>
<div class="column">
Violet sari N°11
</div>
</div>
</nav>
<!-- navigation end -->
<!-- wrapper slider -->
<section class="container">
<div class="products">
<div class="wrapper product product-1">
<img src="./img.png" style="margin-top: -2000px; position: absolute;" />
<canvas
width="1900"
height="300"
style="margin-top: -2000px; position: absolute;"
></canvas>
<div class="row_1">
<!-- <div style="overflow:auto"> -->
<div class="column _25" style="overflow-y: auto;">
Project photoshoot
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
</div>
<div class="column _55">
<canvas id="c" width="800" height="376"> </canvas>
<div class="row_1">
<div class="column_1">
<div id="top">
<a id="close" href="">Reset tissue —</a>
</div>
</div>
<div class="column_1">
<div>
<p>This project is based on the red celebratory color………</p>
</div>
</div>
<div class="column_1">
<div style="background-color:red;height: 50px;width: 50px;"></div>
</div>
</div>
<div
class="column _20 signupsubmit"
style="border-top: 1px solid black;border-right: 0px;"
>
Red is a celebratory color. It commemorates a couple’s union. It
symbolizes love, sensuality, and passion. That’s why it features
prominently in auspicious occasions, such as weddings, festivals, and
births. As red also signifies chastity, it is the color of choice for
brides. After the wedding ceremony, the bride adopts a red spot on the
forehead called “bindi,” which cements her marital status. When she
dies, her family wraps her in red fabric for cremation. As red also
depicts dominance, it empowers the saree wearer and draws attention
toward her. It’s no surprise that extroverts and A-type personalities
prefer red. Pairing a red saree with a gold top amplifies the look. To
tone it down, use a silver blouse instead. Accessorize with silver or
gold jewelry. Red is associated with Durga, a Hindu goddess with a red
tongue, red eyes, and a blazing image. That’s why devotees use it
extensively in prayer rituals. Worshippers throw red powder on
deities’ statues during prayer ceremonies and phallic symbols because
red is the color of Kshatriya, the warrior caste. Designers dress
charitable, brave, and protective deities in red. Red also symbolizes
fertility and prosperity because it is the color of the clay that
produces spices and harvests, which in turn, improve lives.
</div>
</div>
</div>
</div>
<div class="wrapper product product-2" style="float: left;display: inline;clear: both;top: 0;position: absolute;">
<img src="./img2.png" style="margin-top: -2000px; position: absolute;" />
<canvas
width="1900"
height="300"
style="margin-top: -2000px; position: absolute;"
></canvas>
<div class="row_1">
<!-- <div style="overflow:auto"> -->
<div class="column _25" style="overflow-y: auto;">
Project photoshoot
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
</div>
<div class="column _55">
<canvas id="c" width="800" height="376"> </canvas>
<div class="row_1">
<div class="column_1">
<div id="top">
<a id="close" href="">Reset tissue —</a>
</div>
</div>
<div class="column_1">
<div>
<p>This project is based on the red celebratory color………</p>
</div>
</div>
<div class="column_1">
<div style="background-color:red;height: 50px;width: 50px;"></div>
</div>
</div>
<div
class="column _20 signupsubmit"
style="border-top: 1px solid black;border-right: 0px;"
>
Orange attracts attention and energy like the color red, except it’s more sedate. It signifies freshness and brightness. Not all skin tones can carry this color, but for those whose complexions can pull it off in their clothing, it helps put them in a sunny disposition.
According to CNN’s Colorscope report, a series exploring color perception across cultures, many Eastern religions consider orange a sacred color. In Hinduism, orange represents fire and virtuosity. That’s why their monks wear orange robes. Buddhist ones too.
</div>
</div>
</div>
</div>
</div>
<div class="hidden buttonLeft"></div>
<div class="hidden buttonRight"></div>
</section>
<!-- wrapper slider end -->
<!-- footer -->
<footer
style="position: fixed;bottom: 0;width: 100%;background-color: white;border-top:1px solid black;"
>
<div class="row">
<div class="column">©Copyright Angelo Barbattini</div>
<div class="column">ECAL 2022</div>
</div>
</footer>
<!-- footer end -->
<script type="text/javascript">
window.onload = function() {
}
var offsetProducts = 0;
var numberProducts = 2; //nombre de project -1, car on commence à compter à partir de 0
$(document).ready(function() {
console.log("ready!");
// $(".buttonLeft").on("click", function() {
// console.log(offsetProducts);
// if (offsetProducts > numberProducts * -100) offsetProducts = offsetProducts - 100;
// $(".products").css("left", offsetProducts + "%");
// });
// $(".buttonRight").on("click", function() {
// console.log("right Click");
// if (offsetProducts < 0) offsetProducts = offsetProducts + 100;
// $(".products").css("left", offsetProducts + "%");
// });
$(".buttonLeft").on("click", function() {
console.log(offsetProducts);
if (offsetProducts < 0) offsetProducts = offsetProducts + 100;
$(".products").css("left", offsetProducts + "%");
});
$(".buttonRight").on("click", function() {
console.log("right Click");
if (offsetProducts > numberProducts * -100) offsetProducts = offsetProducts - 100;
$(".products").css("left", offsetProducts + "%");
});
});
</script>
<script type="text/javascript">
const mycanvas = document.querySelector('canvas');
const mycontext = mycanvas.getContext('2d');
// settings
var physics_accuracy = 20,
mouse_influence = 10,
mouse_cut = 6,
gravity = 1200,
cloth_height = 40,
cloth_width = 120,
start_y = 10,
spacing = 7,
tear_distance = 60;
window.requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
var canvas,
ctx,
cloth,
boundsx,
boundsy,
mouse = {
down: false,
button: 1,
x: 0,
y: 0,
px: 0,
py: 0
};
window.onload = function() {
// ADDED TO BRING IN THE IMAGE
mycontext.clearRect(0, 0, mycanvas.width, mycanvas.height);
mycontext.drawImage(document.querySelector('img'), 0, 0, 1180, 376);
canvas = document.getElementById('c');
ctx = canvas.getContext('2d');
canvas.width = canvas.clientWidth;
canvas.height = 376;
canvas.onmousedown = function(e) {
mouse.button = e.which;
mouse.px = mouse.x;
mouse.py = mouse.y;
var rect = canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left,
mouse.y = e.clientY - rect.top,
mouse.down = true;
e.preventDefault();
};
canvas.onmouseup = function(e) {
mouse.down = false;
e.preventDefault();
};
canvas.onmousemove = function(e) {
mouse.px = mouse.x;
mouse.py = mouse.y;
var rect = canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left,
mouse.y = e.clientY - rect.top,
e.preventDefault();
};
canvas.oncontextmenu = function(e) {
e.preventDefault();
};
boundsx = canvas.width - 1;
boundsy = canvas.height - 1;
ctx.strokeStyle = 'rgba(222,222,222,0.6)';
ctx.strokeStyle = 'magenta';
cloth = new Cloth();
update();
};
var Point = function(x, y) {
this.x = x;
this.y = y;
this.px = x;
this.py = y;
this.vx = 0;
this.vy = 0;
this.pin_x = null;
this.pin_y = null;
this.constraints = [];
//added - remember where this point was originally so we can get the right bit of the img
this.origx = x;
this.origy = y;
};
Point.prototype.update = function(delta) {
if (mouse.down) {
var diff_x = this.x - mouse.x,
diff_y = this.y - mouse.y,
dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);
if (mouse.button == 1) {
if (dist < mouse_influence) {
this.px = this.x - (mouse.x - mouse.px) * 1.8;
this.py = this.y - (mouse.y - mouse.py) * 1.8;
}
} else if (dist < mouse_cut) this.constraints = [];
}
this.add_force(0, gravity);
delta *= delta;
nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);
this.px = this.x;
this.py = this.y;
this.x = nx;
this.y = ny;
this.vy = this.vx = 0
};
Point.prototype.draw = function() {
if (this.constraints.length <= 0) return;
var i = this.constraints.length;
while (i--) this.constraints[i].draw();
};
Point.prototype.resolve_constraints = function() {
if (this.pin_x != null && this.pin_y != null) {
this.x = this.pin_x;
this.y = this.pin_y;
return;
}
var i = this.constraints.length;
while (i--) this.constraints[i].resolve();
this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
};
Point.prototype.attach = function(point) {
this.constraints.push(
new Constraint(this, point)
);
};
Point.prototype.remove_constraint = function(lnk) {
var i = this.constraints.length;
while (i--)
if (this.constraints[i] == lnk) this.constraints.splice(i, 1);
};
Point.prototype.add_force = function(x, y) {
this.vx += x;
this.vy += y;
};
Point.prototype.pin = function(pinx, piny) {
this.pin_x = pinx;
this.pin_y = piny;
};
var Constraint = function(p1, p2) {
this.p1 = p1;
this.p2 = p2;
this.length = spacing;
};
Constraint.prototype.resolve = function() {
var diff_x = this.p1.x - this.p2.x,
diff_y = this.p1.y - this.p2.y,
dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
diff = (this.length - dist) / dist;
if (dist > tear_distance) this.p1.remove_constraint(this);
var px = diff_x * diff * 0.7;
var py = diff_y * diff * 0.5;
this.p1.x += px;
this.p1.y += py;
this.p2.x -= px;
this.p2.y -= py;
};
let num = 0;
Constraint.prototype.draw = function() {
ctx.drawImage(mycanvas, this.p1.origx, this.p1.origy, spacing, spacing, this.p1.x, this.p1.y, spacing + 1, spacing + 1);
};
var Cloth = function() {
this.points = [];
var start_x = canvas.width / 2 - cloth_width * spacing / 2;
// alert(start_x);
for (var y = 0; y <= cloth_height; y++) {
for (var x = 0; x <= cloth_width; x++) {
var p = new Point(start_x + x * spacing, start_y + y * spacing);
x != 0 && p.attach(this.points[this.points.length - 1]);
y == 0 && p.pin(p.x, p.y);
y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])
this.points.push(p);
}
}
};
Cloth.prototype.update = function() {
var i = physics_accuracy;
while (i--) {
var p = this.points.length;
while (p--) this.points[p].resolve_constraints();
}
i = this.points.length;
while (i--) this.points[i].update(.016);
};
Cloth.prototype.draw = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
var i = cloth.points.length;
while (i--) cloth.points[i].draw();
ctx.stroke();
};
function update() {
cloth.update();
cloth.draw();
requestAnimFrame(update);
}
</script>
<script>
imageZoom("myimage", "myresult");
</script>
<!-- <script type="text/javascript"> document.body.onclick = function () {document.body.style.zoom="150%"}</script>
--> <script type="text/javascript"> $('#myButton').click(function() { document.body.style.zoom="160%" });</script>
<script type="text/javascript">$(function(){
$('h3').click(function(){
$('h3.active').removeClass('active');
$(this).addClass('active');
});
});</script>
<script type="text/javascript">const $bigBall = document.querySelector(".cursor__ball--big");
const $smallBall = document.querySelector(".cursor__ball--small");
const $hoverables = document.querySelectorAll(".hoverable");
// Listeners
document.body.addEventListener("mousemove", onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {
$hoverables[i].addEventListener("mouseenter", onMouseHover);
$hoverables[i].addEventListener("mouseleave", onMouseHoverOut);
}
// Move the cursor
function onMouseMove(e) {
TweenMax.to($bigBall, 0.4, {
x: e.pageX - 15,
y: e.pageY - 15
});
TweenMax.to($smallBall, 0.1, {
x: e.pageX - 5,
y: e.pageY - 7
});
}
// Hover an element
function onMouseHover() {
TweenMax.to($bigBall, 0.3, {
scale: 4
});
}
function onMouseHoverOut() {
TweenMax.to($bigBall, 0.3, {
scale: 1
});
}</script>
<script>
// Get the img object using its Id
img = document.getElementById("img1");
// Function to increase image size
function enlargeImg() {
// Set image size to 1.5 times original
img.style.transform = "scale(1.5)";
// Animation effect
img.style.transition = "transform 0.25s ease";
}
// Function to reset image size
function resetImg() {
// Set image size to original
img.style.transform = "scale(1)";
img.style.transition = "transform 0.25s ease";
}
</script>
</script>
</body>
</html>```
Try to set the div style to display flex like this:
div {
display: flex;
flex: 1
///
}
I have three div's in the following code.
<div id="wrap">
<div id="outer">
<div id="inner">
</div>
</div>
</div>
Here "inner" div is moving with mouseMove event. How can I move "outer" div along with "inner" div when "inner" div touches the top and left of "outer" div but "outer" div should not move when "inner" div inside or don't touch "outer" div?
var innerDiv = $('#inner');
var outerDiv = $('#outer');
var outDim = outerDiv.offset();
outDim.right = (outDim.left + outerDiv.width());
outDim.bottom = (outDim.top + outerDiv.height());
$(document).on('mousemove', function(e) {
var x = (e.clientX) - 15;
var y = (e.clientY) - 15;
var x_allowed = x >= outDim.left && x <= (outDim.right - innerDiv.width());
var y_allowed = y >= outDim.top && y <= (outDim.bottom - innerDiv.height());
if (y_allowed) {
innerDiv.css({
top: y + 'px',
});
} else {
//fine tune tweaks
if (y >= outDim.top) {
innerDiv.css({
top: (outDim.bottom - innerDiv.height()) + 'px',
});
}
if (y <= (outDim.bottom - innerDiv.height())) {
innerDiv.css({
top: outDim.top + 'px',
});
}
}
if (x_allowed) {
innerDiv.css({
left: x + 'px'
});
} else {
//fine tune tweaks
if (x >= outDim.left) {
innerDiv.css({
left: outDim.right - innerDiv.width() + 'px',
});
}
if (x <= (outDim.right - innerDiv.width())) {
innerDiv.css({
left: outDim.left + 'px',
});
}
}
});
#wrap {
height: 200px;
width: 200px;
border: 2px solid black;
}
#outer {
height: 100px;
width: 100px;
border: 2px solid blue;
margin: 0 auto;
}
#inner {
height: 40px;
width: 40px;
border: 2px solid red;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div id="outer">
<div id="inner">
</div>
</div>
</div>
Fiddle link
I want to change the active starting item to 3 instead of 1s. In short instead of number 1s is active. I want to change it to number 3 staring item or anything if I add active on a class. How Can I achieve that stuff. I'm all over the internet but nothing happens.
Please see below sample of my code html and javascript.
//Small carosel code set here
$(document).ready(function() { ResCarouselOnInit(); });
$(window).resize(function() {
var r = new Date();
setTimeout(function() {
ResCarouselResize(r);
}, 200);
});
function ResCarouselOnInit() {
ResCarouselSize();
$(document).on('click', '.leftRs, .rightRs', function() {
ResCarousel(this);
});
$(document).on("mouseenter", ".ResHover", function() {
$(this).addClass("ResHovered");
});
$(document).on("mouseleave", ".ResHover", function() {
$(this).removeClass("ResHovered");
});
}
// Rescarousel Auto Slide
function ResCarouselSlide(e) {
var thiss = $(e).find(".rightRs");
var dataInterval = $(e).attr('data-interval');
!isNaN(dataInterval) && $(e).addClass("ResHover") && setInterval(function() {
!(thiss.parent().hasClass("ResHovered")) && ResCarousel(thiss);
}, +(dataInterval));
}
function ResCarouselResize() {
function myfunction() {
console.log("resize Works");
//var r = $('body').width();
$('.resCarousel').each(function() {
var divValue = $(this).attr('data-value');
var itemWidth = $(this).find('.item').width();
$(this).find(".resCarousel-inner").scrollLeft(divValue * itemWidth);
//var itemsSplit = $(this).attr("data-items").split(',');
//var it = r >= 1200 ? itemsSplit[3] : r >= 992 ? itemsSplit[2] : r >= 768 ? itemsSplit[1] : itemsSplit[0];
//$(this).attr("data-itm", it);
});
}
//var ResTimeout = setTimeout(function() { myfunction() }, 3000);
//clearTimeout(ResTimeout);
//ResTimeout = setTimeout(function() { myfunction() }, 3000);
//console.log(ResTimeout);
myfunction();
}
//this function define the size of the items
function ResCarouselSize() {
var t0 = performance.now();
// styleCollector0 = styleCollector1 = styleCollector2 = styleCollector3 = "";
$('.resCarousel').each(function(index) {
var itemsSplit = $(this).attr("data-items").split('-');
$(this).addClass("ResSlid" + index);
for (var i = 0; i < 4; i++) {
if (i == 0) {
var styleCollector0 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
} else if (i == 1) {
var styleCollector1 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
} else if (i == 2) {
var styleCollector2 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
} else if (i == 3) {
var styleCollector3 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
}
}
$(this).attr("data-value", "0");
//var r = $('body').width();
//var it = r >= 1200 ? itemsSplit[3] : r >= 992 ? itemsSplit[2] : r >= 768 ? itemsSplit[1] : itemsSplit[0];
//$(this).attr("data-itm", it);
var styleCollector = "#media (max-width:767px){" + styleCollector0 + "}" +
"#media (min-width:768px){" + styleCollector1 + "}" +
"#media (min-width:992px){" + styleCollector2 + "}" +
"#media (min-width:1200px){" + styleCollector3 + "}";
//$(this).append("<div class=\"ResStyleManager\"></div>")
$(this).find("style").remove();
$(this).append("<style>" + styleCollector + "</style>");
ResCarouselSlide(this);
});
//console.log(styleCollector);
//$("body").append("<div class=\"ResStyleManager\"></div>")
//$('.ResStyleManager').html(null).append("<style>" + styleCollector + "</style>");
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to Size');
}
//this function used to move the items
function ResCarousel(Btn) {
//var t0 = performance.now();
var parent = $(Btn).parent(),
slide = +parent.attr("data-slide"),
itemsDiv = parent.find('.resCarousel-inner'),
//divValueq = +parent.attr('data-value'),
itemSpeed = +parent.attr("data-speed"),
itemLoad = +parent.attr("data-load"),
//animi = parent.attr("data-animator"),
translateXval = '',
currentSlide = "",
itemLenght = itemsDiv.find(".item").length,
itemWidth = itemsDiv.find('.item').outerWidth(),
dataItm = +Math.round(itemsDiv.outerWidth() / itemWidth),
cond = $(Btn).hasClass("leftRs"),
divValue = Math.round(itemsDiv.scrollLeft() / itemWidth);
//console.log(dataItm + "," + Math.abs(dataItmq));
//console.log(divValue + "," + divValueq);
//console.log(cond);
//console.log(typeof + parent.attr("data-slide"))
itemSpeed = !isNaN(itemSpeed) ? itemSpeed : 400;
slide = slide < dataItm ? slide : dataItm;
if (cond) {
currentSlide = divValue - slide;
translateXval = currentSlide * itemWidth;
var MoveSlide = currentSlide + slide;
//console.log(itemloop);
if (divValue == 0) {
currentSlide = itemLenght - slide;
translateXval = currentSlide * itemWidth;
currentSlide = itemLenght - dataItm;
itemSpeed = 400;
//console.log(currentSlide + "," + translateXval);
} else if (slide >= MoveSlide) {
currentSlide = translateXval = 0;
}
} else {
currentSlide = divValue + slide;
translateXval = currentSlide * itemWidth;
var MoveSlide = currentSlide + slide;
//console.log(itemLenght + "," + (MoveSlide + "," + slide + "," + dataItm));
//console.log(itemLenght + "," + (MoveSlide - slide + dataItm));
//console.log((divValue + dataItm) + "," + itemLenght);
if (divValue + dataItm == itemLenght) {
currentSlide = translateXval = 0;
itemSpeed = 400;
} else if (itemLenght <= (MoveSlide - slide + dataItm)) {
currentSlide = itemLenght - slide;
translateXval = currentSlide * itemWidth;
currentSlide = itemLenght - dataItm;
}
// resCarouselAnimator(itemsDiv, currentSlide + 1, currentSlide + slide);
}
//console.log(slide + "," + itemWidth);
parent.attr("data-animator") == "lazy" && resCarouselAnimator(itemsDiv, cond ? 0 : 1, currentSlide + 1, currentSlide + dataItm, itemSpeed, (slide * itemWidth));
//console.log(itemsDiv.scrollLeft() + "," + translateXval)
//console.log(itemSpeed);
if (!isNaN(itemLoad)) {
itemLoad = itemLoad >= slide ? itemLoad : slide;
//console.log((itemLenght - itemLoad) <= currentSlide + dataItm);
//console.log((itemLenght - itemLoad) + " ," + (currentSlide + dataItm) + " ," + (itemLenght - dataItm));
(itemLenght - itemLoad) <= (currentSlide + dataItm) && ResCarouselLoad1(itemsDiv);
}
itemsDiv.animate({ scrollLeft: translateXval }, itemSpeed);
parent.attr("data-value", currentSlide);
//var t1 = performance.now();
//console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate');
}
function ResCarouselLoad1(e) {
//console.log(e.attr("id"));
$("#" + e.attr("id")).trigger("ResCarouselLoad");
}
function resCarouselAnimator(parent, direction, start, end, speed, length) {
//console.log(parent + "," + start + "," + end);
var val = 5;
if (direction == 0) {
for (var i = start - 1; i < end + 1; i++) {
val = val * 2;
}
val = -val;
}
//console.log(length);
//if (direction == 1) {
// for (var i = start - 1; i < end + 1; i++) {
// length = length / 2
// console.log(length);
// }
// //val = val;
//}
//val = direction == 1 ? length : -length;
for (var i = start - 1; i < end; i++) {
val = direction == 0 ? val / 2 : val * 2;
//console.log(val);
//console.log(parent.find(".item").eq(i).find("h1").text());
parent.find(".item").eq(i).css("transform", "translateX(" + val + "px)");
}
setTimeout(function() {
parent.find(".item").attr("style", "");
}, speed - 70);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ResCarousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
body {
font-family: 'Trirong', serif;
background: #eee;
}
.p0 {
padding: 0;
}
.resCarousel-inner .item {
/*border: 4px solid #eee;*/
/*vertical-align: top;*/
text-align: center;
}
.resCarousel-inner .item .tile div,
.banner .item div {
display: table;
width: 100%;
min-height: 250px;
text-align: center;
/*box-shadow: 0 1px 1px rgba(0, 0, 0, .1);*/
}
.resCarousel-inner .item h1 {
display: table-cell;
vertical-align: middle;
color: white;
}
.banner .item div {
background: url('demoImg.jpg') center top no-repeat;
background-size: cover;
min-height: 550px;
}
.item .tile div {
background: url('demoImg.jpg') center center no-repeat;
background-size: cover;
height: 200px;
color: white;
}
.item div h1 {
background: rgba(0, 0, 0, .4);
}
/*resCarousel Css*/
.outt {
display: none;
}
.leftRs {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
z-index: 100;
left: 0;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
}
.rightRs {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
}
.resCarousel {
/*float: left;
overflow: hidden;*/
width: 100%;
position: relative;
}
.resCarousel-inner {
overflow-x: hidden;
white-space: nowrap;
font-size: 0;
vertical-align: top;
}
.resCarousel-inner .item {
display: inline-block;
font-size: 14px;
white-space: initial;
}
/*banner*/
.banner {
overflow: hidden !important;
}
/*tile css*/
.resCarousel-inner .item .tile {
background: white;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
margin: 5px;
}
/*animation*/
.resCarousel[data-animator="lazy"] .item {
transition: .6s ease all;
}
#media (max-width: 767px) {
.leftRs,
.rightRs {
/*display: none;*/
}
.resCarousel-inner {
overflow-x: auto;
}
}
/*resCarousel Css End*/
</style>
</head>
<body>
<!-- test -->
<!--home-->
<div class="container p8">
<div class="resCarousel carousel" id="puta" data-type="multi" data-items="2-4-4-4" data-slide="4" data-interval="false" data-value="8">
<div class="resCarousel-inner">
<div class="item">
<div class="tile">
<div>
<h1>1s</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>2</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item active">
<div class="tile">
<div>
<h1>3</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>4</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>5</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>6</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>7</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>8</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>9</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>10</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>11</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>12</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>13</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>14</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
</div>
<button class='btn btn-default leftRs'><</button>
<button class='btn btn-default rightRs'>></button>
</div>
</div>
<hr>
<script src="js/resCarousel.js"></script>
</body>
</html>
I'm trying to create a script that moves a div from right to left when the user scrolls vertically. It should do this effect to any div with the class of "sidepara". It should only move the div if it is visible (the user has scrolled to it). I'm having trouble getting the math right.... What is the correct formula to move the div horizontally proportionate to the vertical scroll position?
$(function() {
$(window).scroll(function() {
console.clear();
$(".sidepara").each(function() {
var sY = $(this).position().top - $(window).scrollTop(),
dY = $(this).position().top,
wH = window.innerHeight;
var scrollPercent = (sY / (dY - wH));
var position = (scrollPercent * ($(document).width()));
position = window.innerWidth - position;
$(this).css("margin-left", position);
console.log("scoll Y: " + sY);
console.log("div Y: " + dY);
console.log("div X: " + position);
console.log("window height: " + wH);
console.log("scrollPercent: " + scrollPercent);
console.log("----");
//print number for debugging
$(this).html(position);
});
})
});
html,
body {
margin: 0;
padding: 0;
}
.stretch {
height: 2000px;
}
.sidepara {
color: red;
}
.parallaxContainer {
overflow: hidden;
width: 100%;
height: 256px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stretch"></div>
<div class="parallaxContainer">
<!-- <img src="helloworld.png" class="sidepara" /> -->
<div class="sidepara"></div>
</div>
<div class="stretch"></div>
<div class="parallaxContainer">
<!-- <img src="helloworld.png" class="sidepara" /> -->
<div class="sidepara"></div>
</div>
<div class="stretch"></div>
<div class="parallaxContainer">
<!-- <img src="helloworld.png" class="sidepara" /> -->
<div class="sidepara"></div>
</div>
<div class="stretch"></div>
Finally figured out the math! Here is the code for anyone who may like to do something similar.
$(function () {
$(window).scroll(function () {
$(".sidepara").each(function () {
var sY = $(this).position().top - $(window).scrollTop(),
dY = window.innerHeight,
wH = 0;
var scrollPercent = (sY / (dY - wH));
var position = (scrollPercent * ($(document).width() ));
$(this).css("margin-left", position);
});
})
});
html,
body {
margin: 0;
padding: 0;
}
.stretch {
height: 2000px;
}
.sidepara {
font-size: 5em;
color: red;
white-space: nowrap;
}
.parallaxContainer {
overflow: hidden;
width: 100%;
height: 256px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stretch"></div>
<div class="parallaxContainer">
<div class="sidepara">hello world!</div>
</div>
<div class="stretch"></div>
<div class="parallaxContainer">
<div class="sidepara">hellow world!</div>
</div>
<div class="stretch"></div>
<div class="parallaxContainer">
<div class="sidepara">hello world!</div>
</div>
<div class="stretch"></div>
I have some progress bars on my project that animate on scroll. The problem is that all of them animate as soon as the first one comes in the viewport. So what I want is to make one progress bar animate at a time as they come into the viewport.
DEMO
JS
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var IsViewed = false;
$(document).scroll(function () {
if(isScrolledIntoView('#progress-bar') && !IsViewed){
$('.bar-percentage[data-percentage]').each(function () {
var progress = $(this);
var percentage = Math.ceil($(this).attr('data-percentage'));
$({countNum: 0}).animate({countNum: percentage}, {
duration: 3500,
easing:'swing',
step: function() {
// What todo on every count
var pct = '';
if(percentage == 0){
pct = Math.floor(this.countNum) + '%';
}else{
pct = Math.floor(this.countNum+1) + '%';
}
progress.text(pct) && progress.siblings().children().css('width',pct);
}
});
});
IsViewed = true;
}
});
Thank you!
Use :eq with global variable index and in complete callback of animate, increase the index and call the same function again.
:eq() Selector Select the element at index n within the matched set
Try this:
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var IsViewed = false;
var index = 0;
function animateThis() {
var progress = $('.bar-percentage[data-percentage]:eq("' + index + '")');
var percentage = Math.ceil(progress.attr('data-percentage'));
progress.animate({
countNum: percentage
}, {
duration: 3500,
easing: 'swing',
step: function() {
// What todo on every count
var pct = '';
if (percentage == 0) {
pct = Math.floor(this.countNum) + '%';
} else {
pct = Math.floor(this.countNum + 1) + '%';
}
progress.text(pct) && progress.siblings().children().css('width', pct);
},
complete: function() {
++index;
animateThis();
}
});
}
$(document).scroll(function() {
if (isScrolledIntoView('#progress-bar') && !IsViewed) {
animateThis()
IsViewed = true;
}
});
.textbox {
height: 700px;
}
#progress-bar {
position: relative;
margin: 20px auto;
height: 50px;
font-size: 0.8em;
color: #000;
}
.bar-label {
font-size: 16px;
color: #000;
text-transform: none;
text-align: left;
font-weight: 700;
margin-bottom: 15px;
}
.bar-percentage {
margin: 0 auto;
font-size: 0.75rem;
position: absolute;
top: 4px;
right: 0;
}
.bar-container {
height: 1px;
width: 100%;
overflow: hidden;
background: #EFEFEF;
}
.bar {
float: left;
background: #000;
height: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="textbox">
<p>Scroll down to see progress bars</p>
</div>
<div id="progress-bar" class="thick-bar">
<div class="bar-label">Web Design</div>
<div class="bar-percentage" data-percentage="95"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
<div id="progress-bar" class="thick-bar">
<div class="bar-label">Graphic Design</div>
<div class="bar-percentage" data-percentage="72"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
<div id="progress-bar" class="thick-bar">
<div class="bar-label">Web Development</div>
<div class="bar-percentage" data-percentage="87"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
<div id="progress-bar" class="thick-bar">
<div class="bar-label">Branding</div>
<div class="bar-percentage" data-percentage="65"></div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
Fiddle here