We Keep Coding

DIVs to randomly fadeIn on page

Okay, I've seen a few things that sort of * answer my question, but none of them quite do what I want to do / I'd like to understand how to do this myself from start to finish as a learning exercise. I'm a novice at all this, so bear with me!
What I'm Trying to Do:
I have a black page and I'd like 20-30 small, white div boxes to fadeIn at random positions on the page (like stars is sort of the vibe I'm going for).
Ideally, they wouldn't overlap and they would be randomly sized between 5px and 10px, but I recognize that this might be getting a little too complicated.
Here's what I have so far
I've been working off this jsfiddle and well as this one. This is what I've come up with (that doesn't work, they all fade in equally spaced in a line and don't stay confined from to the site)
Here's my jsfiddle, code below
function randomPosition() {
var h = $(window).height()-10;
var w = $(window).width()-10;
var newHeight = Math.floor(Math.random() * h);
var newWidth = Math.floor(Math.random() * w);
return [newHeight, newWidth];
}
$(document).ready(function() {
var newPosition = randomPosition();
$('.star').css( {
'margin-left':newPosition[1]+'px',
'margin-top':newPosition[0]+'px'
}).each(function(index) { $(this).delay(1500*index).fadeIn('slow');
})
});
CSS
body {
background-color: black;
}
.star {
height: 10px;
width: 10px;
background-color: white;
display: none;
}
HTML (is there a way to do this with just a for loop or something similar?)
<div class="star"> </div>
<div class="star"> </div>
<div class="star"> </div>
<div class="star"></div>

The sizing and positioning isn't too hard. The thing is to do it all in the each loop - currently you get 1 position and use it for everything. Also you will want to make them position:absolute so they don't go off the page.
I've updated your fiddle to set the random position and a size between 5 and 10px:
The overlapping is a bit harder. You need to keep track of the sizes and positions you have generated and in the same .each function compare the current generated size+position to the previous ones to check for overlapping.
http://jsfiddle.net/5ocb5aww/3/
function randomPosition() {
var h = $(window).height()-10;
var w = $(window).width()-10;
var newHeight = Math.floor(Math.random() * h);
var newWidth = Math.floor(Math.random() * w);
return [newHeight, newWidth];
}
function randomSize() {
return Math.round(Math.random() * 5) + 5;
}
$(document).ready(function() {
// stores generated star positions
var stars = [];
$('.star').each(function(index) {
var newPosition, newSize;
// check for overlap
var isOverlap = true;
while(isOverlap)
{
newPosition = randomPosition();
newSize = randomSize();
// check previous stars to see if an edge of this one overlaps
isOverlap = $.grep(stars, function(s) {
return (
(newPosition[1] >= s.x1 && newPosition[1] <= s.x2)
|| (newPosition[1]+newSize >= s.x1 && newPosition[1]+newSize <= s.x2)
)
&& (
(newPosition[0] >= s.y1 && newPosition[0] <= s.y2)
|| (newPosition[0]+newSize >= s.y1 && newPosition[0]+newSize <= s.y2)
);
}).length > 0;
}
// store to check later stars against it
stars.push({
x1: newPosition[1],
x2: newPosition[1] + newSize,
y1: newPosition[0],
y2: newPosition[0] + newSize,
size: newSize});
$(this).css({
'margin-left':newPosition[1]+'px',
'margin-top':newPosition[0]+'px',
'width':newSize + 'px',
'height':newSize + 'px'
});
$(this).delay(800*index).fadeIn('slow');
})
});

Here is my approach to your exercise ... the overlapping position would require a little bit more effort ... I'll leave you that to sort for yourself (may require restructuring the code I'm handing here)
jsFiddle Demo
JS
function starDust(wdt, hgt, tSt, tAp){
var timer = tAp * 1000;
var defInt = tSt,
starInt = setInterval(function(){
var posX = Math.floor((Math.random() * wdt) + 1),
posY = Math.floor((Math.random() * hgt) + 1),
size = Math.floor((Math.random() * 10) + 1);
$('body').append('<div class="star"></div>');
$('.star:last').css({'width':size,'height':size,'left':posX,'top':posY}).hide().fadeIn('slow');
var totalStars = $('.star').length;
if(totalStars == defInt){
clearInterval(starInt);
}
}, timer);
}
$(function(){
// Function arguments: starDust(max X position in px, max Y position in px, total number of stars, time in seconds between stars show);
starDust(600,300,25,1);
});
CSS
body{
background-color:#000;
}
.star{
position: absolute;
background-color:#fff;
min-width:5px;
min-height:5px;
}

Absolute position elements so they behave like they are floated

I would like to make all these boxes behave like they are floated. However, they can’t be, they need to be absolutely positioned in order for me to interact with this positioned number.
Here's my attempt:
var $item = $('#wrapper div'),
len = $item.length,
itemWidth = $item.innerWidth(),
winWidth = $('#wrapper').innerWidth(),
cols = Math.floor(winWidth / itemWidth),
moveX = itemWidth + 10;
function absPos() {
for (var i = 0; i < len; i += 1) {
$('.item-' + i).css({
'position' : 'absolute',
'left' : moveX * i
});
}
}
I just can't figure out how to wrap them to fit, and also re-position when the window is resized.
Here’s a demo. http://jsfiddle.net/Fgcqs/3/ . If you un-commment the absPos() function you will see my start.
Thanks for any help!

I have edited your jsfiddle to move the items like they are floated. It assumes your margins and widths are the same for each of the divs within wrapper and will automatically work out the width and height of the spacing if your css changes
var wrapper = $('#wrapper'),
items = wrapper.children('div'),
len = items.length,
itemWidth = items.innerWidth() + parseInt(items.css('margin-left')) + parseInt(items.css('margin-right')),
itemHeight = items.innerHeight() + parseInt(items.css('margin-top')) + parseInt(items.css('margin-bottom'));
items.css('float', 'none');
function absPos() {
var cols = Math.floor(wrapper.width() / itemWidth);
items.each(function() {
var left = ($(this).index() % cols) * itemWidth; //the bit in brackets calculates which column the div should be in (the remainder of the current index of your item divided by the number of columns per row), then you times that by item width as worked out above, you use the index as this will allow you to start at left:0
var height = Math.floor($(this).index() / cols) * itemHeight //the bit in brackets calculates which row the div should be in, then you times that by item height as worked out above, you use the Math.floor as this will allow you to start at top:0. Should have really called this top!
$(this).css({
'position' : 'absolute',
'top': height,
'left': left
});
});
wrapper.height((Math.ceil(len / cols)) * itemHeight);
}
$(window).resize(function() {
absPos();
});
absPos();
http://jsfiddle.net/Fgcqs/12/

You have to keep track of both column index and row index: once column index * item width exceeds window width, reset column index and increment row index to simulate next row. Here's simple example of this approach:
function absPos() {
var colIndex = 0;
var rowIndex = 0;
for (var i = 0; i < len; i += 1) {
if (moveX * colIndex + itemWidth > winWidth) {
colIndex = 0;
rowIndex++;
top += itemHeight + 10;
}
var left = moveX * colIndex;
var top = moveY * rowIndex;
$('.item-' + i).css({
'position' : 'absolute',
'left' : left,
'top' : top
});
colIndex++;
}
}
http://jsfiddle.net/N4S4L/1/

You should check if your left value plus the width of an item exceeds the width of your container, in which case introduce a top value and reset left to 0 to start building a new row.

iScroll not horizontally scrolling entire width of div

iScroll is not horizontally scrolling the entire width of a div. It stops at the wrong width value which I can't seem to find where that value originates from. The main scroll div width is not changing so I don't need to call refresh().
Essentially I've got a div inside the scroll div that is changing size so divs inside can be changed to absolute position while other divs inside are initially floated right. I didn't want to use iScroll but it's necessary since I'm building an HTML5 iOS WebView app with Trigger.io.
http://jsfiddle.net/simpleshadow/wQQEM/15/
var myScrollers = [];
$(function() {
var scrolls = $('.scrolls');
$.each(scrolls, function(i, value) {
var self = this,
imageDiv = $(this).find('.imageDiv'),
imageWrapper = $(this).find('.imageWrapper'),
images = $(this).find('.imageDiv img'),
width = 0;
$.each(images, function(index, value){
width += $(this).width();
});
imageDiv.css('right', (-$(this).width()+images.first().width()) + 'px');
imageWrapper.width(images.first().width());
myScrollers[i] = new iScroll($(this)[0], {
hScroll: true,
vScroll: false,
hScrollbar: false,
vScrollbar: false,
onScrollMove: function(e){
var x = 0;
-myScrollers[i].x >= 0 ? x = -myScrollers[i].x : x = 0;
updateWindow($(self), x);
},
onScrolling: function(e) {
var x = 0;
-myScrollers[i].x >= 0 ? x = -myScrollers[i].x : x = 0;
updateWindow($(self), x);
}
});
});
// Update the window
function updateWindow(el, x) {
var x = x,
width = 0,
imageDiv = el.find('.imageDiv'),
imageWrapper = el.find('.imageWrapper'),
images = el.find('.imageDiv img');
el.find('.imageDiv, .imageDiv img').css({
height: (x/160)*75+75 >= 150 ? 150 : (x/160)*75+75
});
for (var i = 0, l = images.length; i < l; i++) {
width += $(images[i]).width();
if (imageWrapper.width() >= width && i !== 0) {
$(images[i]).addClass('out').css({
left: (width-$(images[i]).outerWidth(true)) + 'px'
});
} else {
i !== 0 && $(images[i]).removeClass('out').css({
left: 0
});
}
}
if (x+images.first().width() <= width) imageWrapper.width(x+images.first().width());
imageDiv.css('right', (-$(this).width()+images.first().width()) + 'px');
}
});

jQuery Set Height of Element to Highest in the group

I'm trying to work with jQuery to find the highest element from the first 3 elements within a div then set all 3 the same height then check the next 3 and set them.. etc.. if my window width == X, also if the window width is < X then find the highest 2 elements then set them, then the next 2 then the next 2 etc.
This is my current code which works for all the elements, I would just like to to go through the elements in groups (2's and 3's) and set the height for that group based on the result and window size.
// Find highest element and set all the elements to this height.
$(document).ready(function () {
// Set options
var height = 0;
var element_search = "#cat_product_list #cat_list";
var element_set = "#cat_product_list #cat_list";
// Search through the elements set and see which is the highest.
$(element_search).each(function () {
if (height < $(this).height()) height = $(this).height();
//debug_(height,1);
});
// Set the height for the element(s if more than one).
$(element_set).each(function () {
$(element_set).css("height", (height+40) + "px");
});
});
Any help is much appreciated :)

Try this for setting all of them to the max height:
$(document).ready(function() {
var maxHeight = 0;
$("#cat_product_list #cat_list").each(function() {
if ($(this).outerHeight() > maxHeight) {
maxHeight = $(this).outerHeight();
}
}).height(maxHeight);
});
Update 22/09/16: You can also achieve the same thing without any Javascript, using CSS Flexbox. Setting the container element to have display: flex will automatically set the heights of the elements to be the same (following the highest one).

I've sorted this now,
Check out my Fiddle:
http://jsfiddle.net/rhope/zCdnV/
// Find highest element and set all the elements to this height.
$(document).ready(function () {
// If you windows width is less than this then do the following
var windowWidth = $(window).width();
if (windowWidth < 2000) {
var i = 0,
quotes = $("div#cat_product_list").children(),
group;
while ((group = quotes.slice(i, i += 2)).length) {
group.wrapAll('<div class="productWrap"></div>');
}
}
// Find the width of the window
var windowwidth = $(window).width();
//debug_(windowwidth);
// Set options
var height = 0;
var element_wrap = ".productWrap";
var element_search = ".cat_list";
// Search through the elements set and see which is the highest.
$(element_wrap).each(function () {
$(this).find(element_search).each(function () {
if (height < $(this).height()) height = $(this).height();
});
//alert("Block Height: " +height);
// Set the height for the element wrap.
$(this).css("height", (height) + "px");
// Unset height
height = 0;
});
});

Just to add another suggestion. Here is a jQuery plugin I wrote that accepts one parameter. You can call it like this:
$('.elementsToMatch').matchDimensions("height");
You can match the height, width or if no parameter is entered, both dimensions.
$(function() {
$(".matchMyHeight").matchDimensions("height");
});
(function($) {
$.fn.matchDimensions = function(dimension) {
var itemsToMatch = $(this),
maxHeight = 0,
maxWidth = 0;
if (itemsToMatch.length > 0) {
switch (dimension) {
case "height":
itemsToMatch.css("height", "auto").each(function() {
maxHeight = Math.max(maxHeight, $(this).height());
}).height(maxHeight);
break;
case "width":
itemsToMatch.css("width", "auto").each(function() {
maxWidth = Math.max(maxWidth, $(this).width());
}).width(maxWidth);
break;
default:
itemsToMatch.each(function() {
var thisItem = $(this);
maxHeight = Math.max(maxHeight, thisItem.height());
maxWidth = Math.max(maxWidth, thisItem.width());
});
itemsToMatch
.css({
"width": "auto",
"height": "auto"
})
.height(maxHeight)
.width(maxWidth);
break;
}
}
return itemsToMatch;
};
})(jQuery);
.matchMyHeight {background: #eee; float: left; width: 30%; margin-left: 1%; padding: 1%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="matchMyHeight">
Div 1
</div>
<div class="matchMyHeight">
Div 2
</div>
<div class="matchMyHeight">
Div 6<br> Div 6<br> Div 6<br> Div 6
</div>

var highHeight = "0";
$(".item").each(function(){
var thHeight = $(this).height();
if(highHeight < thHeight ){
highHeight = thHeight;
}
});
console.log(highHeight)

Algorithm for placing dashboard panels in unoccupied space

I'm working on a portal/dashboard type interface which has panels/widgets that can be freely dragged around the dashboard space as long as they don't overlay any other panels. New panels can be added to the dashboard via a menu containing all available panels, and when a menu item is clicked, the panel is placed into the dashboard. The panels currently occupying the dashboard space are all represented in an object like this:
{
'panel_1': { top: 0, left: 0, width: 300, height: 350 },
'panel_2': { top: 0, left: 370, width: 200, height: 275 },
'panel_3': { top: 370, left: 0, width: 275, height: 400 },
...
}
My question is, what is a valid algorithm that would, when the user clicks one in the menu, correctly place a new panel (of a given width and height) in unoccupied space that is closest to a left and top (x and y) value of 0, 0, without overlapping any of the existing panels?

I think, simple bruteforce algorithm will fit you. As I remember, fit rectangle solve another problem
Iterate over your dashboard axis to find out, whether you can place your rectangle, until X < rectangle.widh + dashboard.width, same for Y.
Foreach X,Y on dashboard iterate over every panel to find whether they overlap. You can apply some optimization, to decrease amount of iteration. If panel overlap rectangle, you can increase X or Y(which is in nested loop) not by 1, but by width or height of panel.
In most cases, you will not make dashboard.width*dashboard.height*panel.count iteration. With some optimization, it will find best fit rather quick

I know this is an old question but if anyone wants a proof of concept then it looks like this:
function findSpace(width, height) {
var $ul = $('.snap-layout>ul');
var widthOfContainer = $ul.width();
var heightOfContainer = $ul.height();
var $lis = $ul.children('.setup-widget'); // The li is on the page and we dont want it to collide with itself
for (var y = 0; y < heightOfContainer - height + 1; y++) {
var heightOfShortestInRow = 1;
for (var x = 0; x < widthOfContainer - width + 1; x++) {
//console.log(x + '/' + y);
var pos = { 'left': x, 'top': y };
var $collider = $(isOverlapping($lis, pos, width, height));
if ($collider.length == 0) {
// Found a space
return pos;
}
var colliderPos = $collider.position();
// We have collided with something, there is no point testing the points within this widget so lets skip them
var newX = colliderPos.left + $collider.width() - 1; // -1 to account for the ++ in the for loop
x = newX > x ? newX : x; // Make sure that we are not some how going backwards and looping forever
var colliderBottom = colliderPos.top + $collider.height();
if (heightOfShortestInRow == 1 || colliderBottom - y < heightOfShortestInRow) {
heightOfShortestInRow = colliderBottom - y; // This isn't actually the height its just the distance from y to the bottom of the widget, y is normally at the top of the widget tho
}
}
y += heightOfShortestInRow - 1;
}
//TODO: Add the widget to the bottom
}
function isOverlapping($obsticles, tAxis, width, height) {
var t_x, t_y;
if (typeof (width) == 'undefined') {
// Existing element passed in
var $target = $(tAxis);
tAxis = $target.position();
t_x = [tAxis.left, tAxis.left + $target.outerWidth()];
t_y = [tAxis.top, tAxis.top + $target.outerHeight()];
} else {
// Coordinates and dimensions passed in
t_x = [tAxis.left, tAxis.left + width];
t_y = [tAxis.top, tAxis.top + height];
}
var overlap = false;
$obsticles.each(function () {
var $this = $(this);
var thisPos = $this.position();
var i_x = [thisPos.left, thisPos.left + $this.outerWidth()]
var i_y = [thisPos.top, thisPos.top + $this.outerHeight()];
if (t_x[0] < i_x[1] && t_x[1] > i_x[0] &&
t_y[0] < i_y[1] && t_y[1] > i_y[0]) {
overlap = this;
return false;
}
});
return overlap;
}