Develop Reference

How do you prevent a checkerboard getting our of view when changing the resolution?

So I'm currently working on a project that requires a grid/checkerboard. I've already made my grid in Javascript and I've also managed to center my grid.
The problem I'm having is that when I change my resolution with the device toolbar, the grid gets out of view. My goal is to make the whole grid visible no matter what phone or computer I use.
I would appreciate the help from you guys!
This is how I'm making my grid.
for (i = 0; i < row; i++) {
grid[i] = new Array(col);
}
//making a spot for every grid.
for (i = 0; i < row; i++) {
for (j = 0; j < col; j++) {
grid[i][j] = new Spot(i, j);
}
}
This is how I'm drawing the grid.
function Spot(i, j) {
this.x = i;
this.y = j;
this.show = function (color) {
fill(color);
rect(this.x * w, this.y * h, w - 1, h - 1);
}
}
w is the width of ONE single grid and h is the height of ONE single grid. col and row are the amount of rows and columns I want the grid to have.
I also call the function "this.show" every frame. The result looks like this:
The grid that is out of view

you need to check against the media type:
var l_strMobileMedia = '(max-width:320px)'
var mqList = window.matchMedia(l_strMobileMedia);
if(!mqList.matches){
l_strMobileMedia = '(max-width:481px)'
mqList = window.matchMedia(l_strMobileMedia);
}
if(!mqList.matches){
l_strMobileMedia = '(max-width:768px)'
mqList = window.matchMedia(l_strMobileMedia);
}
if(s_bIsMobile == null || s_bIsMobile != mqList.matches){
Session.set_mobile_layout(mqList.matches);
}
s_bIsMobile = mqList.matches;
return mqList.matches;
I hope this gets you started. If you want to do it in realtime, you need to hook to window resize event or set a timer that does the queries for you.

Progress Bar - Loop Through Array and Display Divs

Getting really stuck on this one... I'm trying to build a donation progress bar... In ReactJS - but I'm a beginner, so I want to get the code right first in Vanilla js...
What I'm trying to do, is loop through an array of numbers, (aka, donations already submitted via a form). EG:
[2, 5, 25] etc.
Everytime, a donation is submitted, it get's added to this array.
Want I want, is for my donation bar to increase/fill in colour, based on the donations already made in the array.
The bar would be full at 100%. Or £100.
Here's the snippet of JS I already have:
// FUNCTION TO CALCULATE TOTAL DONATIONS
const numbers = donated.map(Number);
function add(a, b) {
return a + b;
}
// SUM VALUE OF NUMBERS IN THE ARRAY
const sum = numbers.reduce(add, 0);
console.log('numbers', numbers);
//THE VALUE OF NUMBERS IN ARRAY, TURNED INTO A PERCENTAGE
const total = 100;
const percentage = (sum / total) * 100;
console.log('percentage', percentage);
// LOOP THROUGH EVERY NUMBER IN THE ARRAY, AND ADD A DIV WITH A MATCHING WIDTH
for (var i = 0; i < numbers; i++) {
if (i < 100) {
const div = document.createElement('div');
div.style.background = 'red';
div.style.width = numbers + 'px';
div.style.height = '50px';
div.style.float = 'left';
document.querySelector('.bar').appendChild(div);
}
}
The loop works, slightly. The first div in the array gets added. But as I add more donations, no more divs are added to the progress bar.
Eventually, I want to stop at 100...

Got it working! I needed to set numbers[i] in my style width:
for (var i = 0; i < numbers.length; i++) {
if (i < 100) {
div +1;
const div = document.createElement('div');
div.style.background = 'red';
**div.style.width = numbers[i] + 'px';**
div.style.height = '50px';
div.style.float = 'left';
document.querySelector('.bar').appendChild(div);
}
}

As i see, you styled your divs float left. That mean each div will appears over the previous on left. In chrome, right click on the div and left click on inspect. You will see that you have many divs generated in your Dom.

Any Possible to get A4 page size at jquery?

How to get Page height while Print, like this Image
currently tried the code, I Get Each li height and added. then total Height reached that limit wrapAllwith col-md-6
var $records = $('#two_column li'),
total = 0,
group = 0;
limit = 1118.73; //px
if (total > limit) {
total = $record.outerHeight(true);
group++;
}
for (var i = 0; i <= group; i++) {
$('[data-group="' + i + '"]').wrapAll('<div class="col-md-6"></div>')
}
My Problem was, I can't to get Page height(limit) while Print
Limit value need A4 page Height

move object using css

I have an array of image objects:
var pics = ["pic1","pic2","pic3","pic4","pic5","pic6"]
I want to loop through and set the style.left value to 1 less than the current value. This loop iterates 100 times.
I got a great suggestion here to use css for this. I created a style called move:
margin-left: -1px;
This works great the first time through the loop:
for (i = 0; i < 100; i++) {
for (j = 0; j < 6; j++) {
var image = document.getElementById(pics[j]);
image.className = image.className + " move"
}
}
The problem is the images do not move after the first iteration though the loop. Any ideas what I can do?

The images do not move after the first iteration because you are applying the move class which sets the margin left to -1. Note it does not subtract 1 from their current left margin it sets it to -1.
So lets say it starts out with a left margin of 10 . When it goes through this loop I think you are expecting it to have a left margin of 9 to move it one pixel closer to the left side of the screen. Instead when it goes through this loop it will skip all the way -1 as the left margin because you are explicitly telling it to do that with your move class.
What you really want to do is use javascript to grab its current left margin , subtract 1 from that and then reset the left margin as the new, now less one, number.
At quick glance I think this tutorial could help you.

You can save off the margin variable and apply css with this:
var margin = -1;
for (i = 0; i < 100; i++) {
for (j = 0; j < 6; j++) {
var image = document.getElementById(pics[j]);
image.style.marginLeft = margin + "px";
margin--;
}
}

Dynamically generate a grid of images to fit a predefined area

I need to create a grid of instagram images and fit them in a predefined area. For example: I have a div of 600x400px and 50 square images (there will always be an even number of images). I need to arrange the images in rows and columns to fill as much space of the containing div as possible.
You can see a fiddle of what I am trying to achieve here. This is the end result:
This is actually quite a good result. Things get a little more out of whack when you change the number of images, to 44 for example.
This is how I am working out the grid rows and columns:
//container size:
var width = 600;
var height = 400;
var items = 44;
var rows;
var cols;
var rows = Math.floor(Math.sqrt(items));
while (items % rows != 0) {
rows = rows - 1
}
cols = (items / rows);
if (rows > cols) { //make it landscape
//swap values
rows = [cols, cols = rows][0];
}
The output of this for 44 images for example is 4 rows of 11 columns. The combined height of the 4 rows is 232px, quite a lot less than 400px. So how do I change this to fill more space in the container?

The math's a bit tricky due to wrapping. An alternative is to build the images string without any dimensions, then grow them iteratively until they overflow the container.
var width = 400,
height = 300,
items = 44,
grid_str = '',
$grid = $('#grid'),
i;
function dimensions(x) {
$('#grid div').css({
width: x,
height: x
});
};
$grid.width(width).height(height);
for(i = 0 ; i < items ; i++) {
grid_str+= '<div class="col"></div>';
}
$grid.html(grid_str);
for(i = 1 ; i < 1000 ; i++) {
dimensions(i);
if($grid[0].scrollHeight > $grid.height()) {
break;
}
}
dimensions(i-1);
In this fiddle, change width, height, and items, and you'll see that the maximum size is always chosen for div squares.