Same position and animation of dynamic generated Images - javascript

I have a few elements positioned in my HTML. The body has a max-width from 1280px with margin auto. And there are a few elements, which I floated right. In the middle of the page there should be 70 images go from left to right (and then dissapear). I have tried to make those elements position absolute with display: inline, but since the start and the end position should always be the same, and the images have a width and a height, I didn't know how to make it dynamically.. Thats my code so far:
HTML
<body>
<h1>Sweets</h1>
<div class="images"></div>
<div id="display"></div>
<div class="clear"></div>
<div id="maracons"></div>
<div id="cupCake"></div>
</body>
JQUERY
for (var i = 0; i < 10; i++) {
$('.images').append('<img class="image' + i.toString() + '" src="img/' + arr[i][5] + '">');
}
CSS
$leftPos: 1100px;
$widthImage: 200px;
.images{
width: $widthProducts;
height: 200px;
position: absolute;
left: 1100px;
top: 0px;
}
.image-1{
left: $leftPos;
}
.image-2{
left: $leftPos - $widthImage;
}
.image-3{
left: $leftPos - $widthImage*2;
}
Here is how it looks like:

Confusing question but from what I gather you want the images to have dynamic height/width when you are appending them? If so what do you want to make the width/height equal?
If thats the case here is the answer:
var imgWidth = 10, imgHeight = 10;
for (var i = 0; i < 10; i++) {
imgWidth = 100; //Set width
imgHeight = 100; //Set height
$('.images').append('<img style="width:' + imgWidth +'px!important; height:' + imgHeight + 'px !important; " class="image' + i.toString() + '" src="img/' + arr[i][5] +'">');
}
the !important keyword will force the width/height specified to ignore the width/height specified in the class..
sorry if this is not what you mean, a jsfiddle would be great.
UPDATE
Check this fiddle:
http://jsfiddle.net/xP8Qb/
Here is the kinda thing you were looking for:
$(document).ready(function () {
var endpoint = 800; //you can set left+top endpoints and ref them in loop below..
for (var i = 0; i < 3; i++) {
var html = '<div class="imgs img'+i+'"></div>';
setTimeout(function() {
$('.images').append(html);
$('.images>.imgs:last').animate({"left" : "300px"}, endpoint);
}, i * 1000);
}
});
i can work on it more if needed, but hopefully this is enough to put you on the right track..

Related

Stretch image over multiple divs

How would I stretch the background-image of container 1 to container 2?
<div class="main_container">
<div class="container" id="container-1"></div>
<div class="container" id="container-2"></div>
</div>
I used this function, but it does not work always.
var posX = 0;
var posY = 0;
var i = 0;
$(".container").each(function (ind, el) {
$(this).css("background-position", posX.toString() + "% " + posY.toString() + "%");
posX += 20;
i++;
if (i == 1) {
i = 0;
posX = 0;
posY += 0;
}
})
Here is an image of the 2 containers:
Thank you
If the parent .main_container contains only the 2 .container divs and the background image has to be loaded into the page via #container-1 then I would use JavaScript to transfer the background image from #container-1 to .main_container. The background image would then cover the entire area - both #container-1 and #container-2.
const parent = document.querySelector('.main_container')
const image = document.querySelector('#container-1').style.backgroundImage
parent.style.backgroundImage = image
Have you tried this?
.main_container {
align-content: stretch;
background-image: <url>;
}

JavaScript mousewheel event to scroll page horizontally when vertical scroll

I am trying to detect when a user scrolls up or down on an fixed height element and update the element's transform: translateX CSS value accordingly to scroll the contents either to the left or two the right. However, I can't figure out how to get the proper value from the delta.
document.getElementById("list").addEventListener("wheel", myFunction);
function myFunction(event) {
var matrix = $('.gallery-list').css('transform').split(/[()]/)[1];
var y = parseInt(event.deltaY);
var posX = parseInt(matrix.split(',')[4]);
console.log(y);
console.log(posX);
console.log(y + posX);
//$('.gallery-list').css('transform', 'translateX('+posX + y+'px)');
}
Here is a Codepen here: https://codepen.io/kylehagler/pen/OKxMGr
Add this to your css:
.outside {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
position: absolute;
}
Surround the gallery-list div with:
<div id="outside" class="outside">
Finally, here is the JS:
document.getElementById("outside").addEventListener("wheel", myFunction);
var total = 0;
function myFunction(event) {
var y = parseInt(event.deltaY);
total += y;
$(".gallery-list").css('transform', 'translateX(' + total + 'px)');
}

Random positioning of child div sometimes overflows parent div. How do I stop/prevent this?

Every time I refresh the page, the positioning of the child div sometimes overflow or position itself outside the parent div. Any ideas of how to prevent this? I tried playing around with size of the child div as well as its "top" and "left" values without any luck.
Here is the code:
#box {
width: 1000px;
height: 400px;
background-color: grey;
margin: 0;
padding: 0;
}
#shape {
display: none;
position: relative;
}
</style>
</head>
<body>
<div id="box">
<div id="shape"></div>
</div>
<script>
function makeShapeAppear() {
var top = Math.floor(Math.random() * 301);
var left = Math.floor(Math.random() * 901);
var size = Math.floor(Math.random() * 101) + 50;
document.getElementById("shape").style.display = "block"
document.getElementById("shape").style.top = top + "px";
document.getElementById("shape").style.left = left + "px";
document.getElementById("shape").style.width = size + "px";
document.getElementById("shape").style.height = size + "px";
document.getElementById("shape").style.backgroundColor = "red";}
</script>
</body>
Thank you in advance.
The reason this occurs is because you do not take into account the random size of the child.
var size = Math.floor(Math.random() * 101) + 50;
That line can produce a size up to 150.
var top = Math.floor(Math.random() * 301);
That line can set the top at a maximum of 300.
The parent div is only 400px tall, so if the size gets computed at 150 and the top at 300 the child will overflow the parent on the bottom by 50px. A similar situation occurs when setting left that will cause the child to overflow on the right of the parent. You need to constrain top and left. Example below.
function makeShapeAppear() {
var size = Math.floor(Math.random() * 101) + 50;
var top = Math.min(Math.floor(Math.random() * 101), 180 - size);
var left = Math.min(Math.floor(Math.random() * 301), 400 - size);
document.getElementById("shape").style.display = "block"
document.getElementById("shape").style.top = top + "px";
document.getElementById("shape").style.left = left + "px";
document.getElementById("shape").style.width = size + "px";
document.getElementById("shape").style.height = size + "px";
document.getElementById("shape").style.backgroundColor = "red";
setTimeout(function() { makeShapeAppear(); }, 1000);
}
makeShapeAppear();
#box {
width: 400px;
height: 180px;
background-color: grey;
margin: 0;
padding: 0;
}
#shape {
display: none;
position: relative;
}
<div id="box">
<div id="shape"></div>
</div>

Fading blocks animation fullscreen

I'm trying to make a slider with fading blocks animation, just like here. Trouble is that in my case I'm trying to do it fullscreen, meaning that height and width will be variable. This means that the background-position trick won't work, as it won't resize the background to fit the screen but rather take it 'as is'. It's easier to see here (keep in mind that #slides would be height 100% and width 100% aswell as .slide>img). I've ran out of ideas to fix it, any help would be appreciated. I'd prefer not using jQuery, but if it is necessary, it'll be okay.
Thank you beforehand.
My script so far is:
function animateBlocks(x,y,speed) {
var width = document.getElementById('slides').offsetWidth;
var height = document.getElementById('slides').offsetHeight;
var newWidth = width/x;
var newHeight = height/y;
for (var i = 0; i<(x*y); i++) {
var newDiv = document.createElement("div");
document.getElementsByClassName('active-slide')[0].appendChild(newDiv);
newDiv.className = "slide-block";
newDiv.style.width = newWidth + 'px';
newDiv.style.height = newHeight + 'px';
newDiv.style.backgroundImage = 'url("' + document.getElementsByClassName('active-slide')[0].firstElementChild.src + '")';
newDiv.style.backgroundPosition = ('-' + newDiv.offsetLeft + 'px ' + '-' + newDiv.offsetTop + 'px');
if (i == x*y-1) {
document.getElementsByClassName('active-slide')[0].firstElementChild.style.display = 'none';
}
}
}
After the feedback of the comments, the issue may happen when there's float on window's width. So use document.documentElement.getBoundingClientRect(); to get a precise size, and round down, which may sacrifice some pixels, to ensure that blocks won't overflow to next row. jsfiddle
function animateBlocks(x,y,speed) {
var img = document.querySelector('#slides img');
var viewPortSize = document.documentElement.getBoundingClientRect();
// Round down if there's floating points on width.
var windowWidth = Math.floor(viewPortSize.width);
var windowHeight = window.innerHeight;
var newWidth = windowWidth / x;
var newHeight = windowHeight / y;
var newDiv;
var domFrag = document.createDocumentFragment();
var i, j;
for (i = 0; i < y; i +=1) {
for (j = 0; j < x; j += 1) {
newDiv = document.createElement("div");
domFrag.appendChild(newDiv);
newDiv.className = "slide-block";
newDiv.style.width = newWidth + 'px';
newDiv.style.height = newHeight + 'px';
newDiv.style.backgroundImage = 'url("' + document.getElementsByClassName('active-slide')[0].firstElementChild.src + '")';
newDiv.style.backgroundSize = windowWidth + 'px ' + windowHeight + 'px';
newDiv.style.backgroundPosition = ('-' + newWidth*j + 'px ' + '-' + newHeight*i + 'px');
}
}
for (var i = 0; i<(x*y); i++) {
}
document.getElementsByClassName('active-slide')[0].appendChild(domFrag);
document.getElementsByClassName('active-slide')[0].firstElementChild.style.display = 'none';
}
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden; /* makes the scroll bar disappear. */
}
#slides {
position: relative;
height: 100px;
margin: 0px;
padding: 0px;
}
.slide {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: none;
}
.slide>img {
position: absolute;
left: 0;
top: 0;
height: 100px;
}
.active-slide {
display: block;
}
.slide-block {
float: left;
}
<button onclick="animateBlocks(5,5,0)">Click here to see how it looks</button>
<ul id="slides">
<li class="slide active-slide">
<img src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg">
</li>
</ul>
<br><br><br><br><br><br>
<p>How it should look</p>
<img style="height: 100px;" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg">

Positioning image in the page with OnMouseOver function

I have a function that onmouseover load a javascript function which is
function imgEnlarge(val) {
var imageFile = getVal(arrayFile, {
'id': val
}, 'picture');
var imagePath = 'admin/img/' + imageFile;
document.getElementById("imgDisplay").innerHTML = '<img src="' + imagePath + '" style="width:800px;height600px">';
} //end enlarge function
.imgDisplay {
top: 50;
left: 200;
position: absolute;
z - index: 999;
width: 600 px;
height: 500 px;
}
The problem is when i scroll down to e.g middle of the page, the display is still at the "top of the page" as I can see the bottom of the image appearing on the div.
I have an empty div at the top of my site that is having the id of imgDisplay
How do I fix the code such that onmouseover, the picture display will at the current screen X,Y instead of top: and left: (from the top of page)
You can simply set the position of your image as fixed and top and left properties to 0.
Here is a javascript solution:
var image = document.getElementById('imgDisplay');
image.addEventListener('mouseover', function(){
this.style.position = "fixed";
this.style.top = 0;
this.style.left = 0;
});

Categories

Resources