Develop Reference

How to fade in - fade out three images with random place and random size?

I want to place a div which fade in/out randomly with random size and random place.
I could show up three images randomly with fade-in/out but I couldn't place them random place with random size.
http://jsfiddle.net/qq68m/139/
jquery:
jQuery(function(){
function random(n) {
return Math.floor(Math.random() * n);
}
var transition_time = 2500;
var waiting_time = 100;
var images = $('div#block img');
var n = images.length;
var current = random(n);
images.hide();
images.eq(current).show();
var interval_id = setInterval(function () {
images.eq(current).fadeOut(transition_time, function () {
current = random(n);
images.eq(current).fadeIn(transition_time);
});
}, 2 * transition_time + waiting_time);
})
html:
<div id="block">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand1.png">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand2.png">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand3.png">
</div>

Here is my solution. It allows you to specify the range of image scale sizes, and insures that no matter the scale, the randomly chosen position will not clip outside of the container. I hope this meets your requirements.
EDIT: I've updated the code so that non-quadrilateral images will now keep their proportions as well (as shown by Phil Murray examples).
If setting the size by css height/width doesn't work for you, perhaps using the CSS3 scaleX/scaleY property might give you smoother image scaling results.
If you have any further questions please ask in this posts comment.
jQuery(function(){
function random(n) {
return Math.floor(Math.random() * n);
}
var transition_time = 200;
var waiting_time = 100;
var images = $('div#block img');
var n = images.length;
var current = random(n);
images.hide();
images.eq(current).show();
//get the size of the container
var boxHeight = document.getElementById('block').offsetHeight;
var boxWidth = document.getElementById('block').offsetWidth;
//range of possible image scales
var objectMaxHeight = 60;
var objectMinHeight = 20;
var interval_id = setInterval(function () {
images.eq(current).fadeOut(transition_time, function () {
current = random(n);
//gets reference to selected image
var $domImage = images.eq(current);
//generates random heights and widths for the image to be shown in
var generatedHeight =
Math.floor(
Math.random() * (objectMaxHeight - objectMinHeight)
) + objectMinHeight;
// assigns values to the image
$domImage.css('height', generatedHeight);
$domImage.css('width', "auto");
var imageAutoWidth = $domImage.width();
var generatedYLocation = Math.floor(
Math.random() * (boxHeight - generatedHeight + 1)
) + 0;
var generatedXLocation = Math.floor(
Math.random() * (boxWidth - imageAutoWidth)
) + 0;
$domImage.css('top', generatedYLocation);
$domImage.css('left', generatedXLocation);
$domImage.fadeIn(transition_time);
});
}, 2 * transition_time + waiting_time);
})
#block {
position: fixed;
width: 300px;
height: 300px;
border: 1px solid red;
background: yellow;
overflow: hidden;
}
img {
position:relative;
top: 0;
left: 0;
height: 100px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand1.png">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand2.png">
<img src="http://mobler.com.tr/wp-content/uploads/2017/07/rand3.png">
<img src="https://www.fillmurray.com/g/200/500">
<img src="https://www.fillmurray.com/g/500/200">
</div>

Adjusting height according to dynamically added elements

I have a problem with dynamically added div's and adjusting parent's height according to dynamically added content.
So, I have a div called #full-content-wrap and it's width divided with two child elements. These element's are called .doubled-wrap-content-left and .doubled-wrap-content-right (let's call it left wrap and right wrap). So, then, I have a two links (or buttons, or whatever) so when I click on one of these links, javascript add a element .doubled-table dynamically to left or right wrap (according which link i clicked). So, but I have a bit problem with setting height of #full-content-wrap or left/right wrap.
When I set a full-cont-wrap's height to auto, and l-r wrap's height to auto too, it's still 0px. When I set 100% - auto it's still 100% and added elements are overflowing off the parent element. So I've done it this way. I have created a function that adjusts height of full-cont-wrap to biggest height of it's content (left or right wrap) and when it's empty, to window.innerHeight. But, it's kinda uncomfortable and it has two minuses. The first one is that when I change size of my browser, then I reload page and maximize window, the height is smaller than innerHeight of maximized window (this happens when I open inspect element function). The second one is as you can realise, it's unnecessary JS counting and setting of height.
Question is: How to do this simply in CSS without JS?
Things like: Divs are floating etc. I know and I have tried set display to every value.
Additional questions comment please :/
<div id="full-content-wrap">
<div id="section-name">
<span>Dashboard</span>
<span class="section-subname">statistics and more</span>
</div>
<div id="doubled-wrap-content">
<div id="doubled-wrap-content-left">
<div class="doubled-table">
<div class="table-header">
<div class="caption">
<span class="fa fa-cogs"></span>
<span class="caption-content">Server Control</span>
</div>
<div class="tools">
<div class="picon-collapse"></div>
<div class="picon-remove"></div>
</div>
</div>
<div class="table-body"></div>
</div>
</div>
<div id="doubled-wrap-content-right">
</div>
</div>
function setContentWrap () {
/* Set width for full-wrap-content */
var width = screen.width;
width -= 220;
var percent = ((width * 100) / screen.width);
$("#full-content-wrap").css({ width: percent + '%' });
/* Set height for full-wrap-content */
var left = $('#doubled-wrap-content-left')[0].offsetHeight;
var right = $('#doubled-wrap-content-right')[0].offsetHeight;
var sidePanel = $('.side-panel-menu')[0].offsetHeight;
var side = false;
var bigger = 0, b = "";
if (left > right) { bigger = left; b = "left"; }
else if (right > left) { bigger = right; b = "right"; }
else if (right == left) { bigger = right || left; }
if (bigger < sidePanel) {
bigger = sidePanel;
side = true;
}
var height = 0, j = 0;
$('#full-content-wrap').each(function () {
var n = this.children;
var length = this.children.length;
for ( var i = 0; i < length; i++ ) {
if (n[i].id == 'doubled-wrap-content') break;
height += n[i].style.height || n[i].offsetHeight;
j++;
}
});
var more = 0;
$('#doubled-wrap-content').each(function () {
if ( more < this.children.length ) {
more = this.children.length;
}
});
if (side == false) {
height += bigger + (more * 60);
} else {
height = window.innerHeight;
}
$('#full-content-wrap').css({ minHeight: height + 'px' });
var setTo = window.innerHeight;
if (parseInt($('#full-content-wrap').css('minHeight'), 10) < window.innerHeight) {
$('#full-content-wrap').css({ height: setTo + 'px' });
//$('#full-content-wrap').css({ height: '100%' });
}
}
Hope it's all. Because those spaces here are ....ooh

Same position and animation of dynamic generated Images

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..

Have child divs fill parent div with set proportions

I would like to create a function with jQuery/javascript that would fill a parent div with children divs of random sizes that add up the size of the parent.
For example, 10 child divs to fill a container div with proportions 1200px x 600px
<div class="container">
<!-- 10 child divs with random height and width. -->
</div>

You can use a function which splits a rectangle into two subrectangles, and recursivelly split these.
When splitting a rectangle into two parts, if it must contain an even number N of subrectangles, each part will have N/2 subrectangles.
When splitting a rectangle into two, if it must contain an odd number of leaf subrectangles, the bigger part will have one more child than the other.
function fillWithChilds(el, N) {
function rand(n) {
/* weight=100 means no random
weight=0 means totally random */
var weight = 50;
return Math.floor(weight*n/2+n*(100-weight)*Math.random())/100;
}
function main(N, x, y, hei, wid) {
if(N < 1) return;
if(N === 1) {
var child = document.createElement('div');
child.className = 'child';
child.style.left = x + 'px';
child.style.top = y + 'px';
child.style.width = wid + 'px';
child.style.height = hei + 'px';
el.appendChild(child);
return;
}
var halfN = Math.floor(N/2);
if(wid > hei) {
var newWid = rand(wid);
if(2*newWid > wid) halfN = N-halfN;
main(halfN, x, y, hei, newWid);
main(N-halfN, x+newWid, y, hei, wid-newWid);
} else {
var newHei = rand(hei);
if(2*newHei > hei) halfN = N-halfN;
main(halfN, x, y, newHei, wid);
main(N-halfN, x, y+newHei, hei-newHei, wid);
}
}
main(N, 0, 0, el.clientHeight, el.clientWidth);
}
fillWithChilds(document.getElementById('wrapper'), 11);
#wrapper {
background: #ccf;
position: relative;
height: 300px;
width: 400px
}
.child {
background: #cfc;
outline: 2px solid red;
position: absolute;
}
<div id="wrapper"></div>

The distributing will be a pain. I think there's a jQuery library out there that handles some of it... I'll poke around. This is a pretty fun problem, though.
Here's what I've go so far. It's a bit sparse.
http://jsfiddle.net/twPQ7/2/
The part that attempts to determine how many more components it should build is the rough part. I'm trying to keep this down to as few loops as possible:
var containerSize = getContainerSize();
var elementWidth = 0;
var elementHeight = 0;
// width
while (elementWidth < containerSize.x)
{
var size = generateElement();
elementWidth += size.x;
elementHeight += size.y;
}
// height, if not already full
while (elementHeight < containerSize.y)
{
var size = generateElement();
elementWidth += size.x;
elementHeight += size.y;
}
Cleaned it up a bit. Check the fiddle again: http://jsfiddle.net/twPQ7/2/
// determine the size of the container
var containerSize = getContainerSize();
var elementWidth = 0;
var elementHeight = 0;
// iteratively generate elements until we've hit the width of the container
while (elementWidth < containerSize.x)
{
var size = generateElement();
elementWidth += size.x;
// keep track of the tallest element.
if (size.y > elementHeight) elementHeight = size.y;
}
// iteratively generate elements until we've hit the height of the container
while (elementHeight < containerSize.y)
{
var size = generateElement();
elementHeight += size.y;
}

Rescaling Image with Javascript

I am rescaling an image on my website (depending on the screen size) with javascript using jQuery's .css() function.
Now I'm trying to animate a bunch of rescaled images and the performance crushes on older systems...
My guess is that the browser rescales the image in every step of the animation.
Is there any way to prevent that, e.g. by once rescaling the image and using this rescaled version for the animation?
Max
EDIT:
function adjustTile(contentHeight)
{
TILE_GLOBAL.values.tileWidth = contentHeight/TILE_GLOBAL.def.tileWidthRatio;
var windowWidth = jq(window).width();
var tileStackDistance = windowWidth / TILE_GLOBAL.values.tiles.length / 3;
var tileOffset = (windowWidth - TILE_GLOBAL.values.tileWidth - tileStackDistance*(TILE_GLOBAL.values.tiles.length-1))/2;
for(var i = 0; i < TILE_GLOBAL.values.tiles.length; i++)
{
var position = tileOffset + tileStackDistance * i;
jq(TILE_GLOBAL.values.tiles[i]) .css({ 'left' : position + 'px',
'z-index' : TILE_GLOBAL.values.tiles.length - i,
'width' : TILE_GLOBAL.values.tileWidth + 'px',
'height' : contentHeight + 'px',
'border' : TILE_GLOBAL.values.tileBorderSize + 'px solid #a3aba5'})
.attr('data-original_pos', position);
}
jq('.tile-description').css({'font-size' : contentHeight / 20 + 'px'});
}
function slideTiles(e)
{
TILE_GLOBAL.values.cancelReset = true;
var chosenTile = jq(e.delegateTarget);
var prevTiles = chosenTile.prevAll('div');
var nextTiles = chosenTile.nextAll('div');
for(var i = 0; i < prevTiles.length; i++)
{
jq(prevTiles[i]).animate({left : jq(prevTiles[i]).attr('data-original_pos') - (TILE_GLOBAL.values.tileWidth/3*2.5) + 'px'}, {queue : false});
}
chosenTile.animate({left : chosenTile.attr('data-original_pos') + 'px'}, {queue : false});
for(var i = 0; i < nextTiles.length; i++)
{
jq(nextTiles[i]).animate({left : jq(nextTiles[i]).attr('data-original_pos') + 'px'}, {queue : false});
}
}
<div class="tile"><img class="tile-image" src="images/template/tiles/rvtile.jpg" border="0" />
<div class="tile-overlay"> </div>
<img class="tile-product-headline" src="images/template/tiles/rvheadline.png" border="0" />
<div class="tile-shadow"> </div>
<p class="tile-description"></p>
</div>

I also had this issue....
You should place your rescaled image into a div that should has fixed width and height as per image size and should move that div (it will move image inside it), instead of image only.
OR
Even you can rescale the div size as per screen size and can specify height/width of image as 100% and can move div.
For your reference