I want create in html tags which will create gallery,I have 7 images and I want this images will display one time.this means this code must output 3 rows 7 images.
var img=["sea.jpg","monkey.jpg","birtday.jpg","picture.jpg","nintendo.png","square.png","chrome.png"];
function gallery(galleryWidth,columnCount,gutter,divCount){
var n=0;
document.write('<div class="gallery"style="width:'+galleryWidth+'px">');
while(n<img.length%columnCount){
document.write('<div class="row">');
for(i=0;i<img.length;i++){
document.write('<div class="galItem"style="width:'+(galleryWidth/columnCount-2*gutter)+'px;margin:'+gutter+'px"> <img src="img/'+img[i]+'"/></div>');
img.shift();
}
document.write('</div>');
document.write('<div class="clear"></div>');
n++;
}
document.write("</div>");
}
gallery(240,3,5,7);
your code seem like this.
var img = ["sea.jpg", "monkey.jpg", "birtday.jpg", "picture.jpg", "nintendo.png", "square.png", "chrome.png"];
function gallery(galleryWidth, columnCount, gutter) {
document.write('<div class="gallery" style="width:' + galleryWidth + 'px">');
for (var j = 0; j < img.length; j++) {
var startNewLine = j && !(j % columnCount);
if (startNewLine) {
document.write('<div class="row">');
}
document.write('<div class="galItem" style="width:' + (galleryWidth / columnCount - 2 * gutter) + 'px;margin:' + gutter + 'px"> <img alt="' + img[j] + '"/></div>');
if (startNewLine) {
document.write('</div>');
document.write('<div class="clear"></div>');
}
}
document.write("</div>");
}
gallery(240, 3, 5, 7);
.row {
display: block;
clear: both;
}
.clear {
height: 0;
}
img {
width: 100%;
height: 100%;
min-height:30px;
}
.galItem {
float: left;
}
First thing, avoid document.write. There are far more reliable ways of doing this. Second, do/while and your for loop seem to be getting tangled. This may be what you're trying to do.
var img = ["sea.jpg",
"monkey.jpg",
"birtday.jpg",
"picture.jpg",
"nintendo.png",
"square.png",
"chrome.png"
];
function gallery(galleryWidth, columnCount, gutter, divCount) {
this.width = galleryWidth;
this.cols = columnCount;
this.gutter = gutter;
this.divs = divCount;
var myRow, myDiv, myImg, myClearDiv;
var n = 0;
var myGallery = document.createElement('div');
myGallery.classList.add('gallery');
myGallery.style.width = this.width + "px";
myRow = document.createElement('div');
myRow.classList.add('row');
for (i = 0; i < img.length; i++) {
if (n >= this.cols) {
myGallery.appendChild(myRow);
myClearDiv = document.createElement("div");
myClearDiv.classList.add("clear");
myGallery.appendChild(myClearDiv);
myRow = document.createElement('div');
myRow.classList.add('row');
n = 0;
}
myDiv = document.createElement('div');
myDiv.classList.add('galItem');
myDiv.style.width = this.width / this.cols - 2 * this.gutter + 'px';
myDiv.style.margin = this.gutter + 'px';
// Create the image element, and append it...
myImg = document.createElement('img');
myImg.src = '"img/' + img[i] + '"';
myDiv.appendChild(myImg);
// then, append the div to the row.
myRow.appendChild(myDiv);
n++;
}
myGallery.appendChild(myRow);
myClearDiv = document.createElement("div");
myClearDiv.classList.add("clear");
myGallery.appendChild(myClearDiv);
myRow = document.createElement('div');
myRow.classList.add('row');
var container = document.getElementById("container");
container.appendChild(myGallery);
}
gallery(600, 3, 5, 4);
.galItem {
width: 50px;
height: 50px;
display: inline;
border: 1px dotted blue;
}
<div id="container">
</div>
Related
for some reason when i use JavaScript to edit the css of batata[y] nothing happens. The objective of the code is to create multiple blocks and move then from the top to the button of the page.
var p1
var p2 = [];
var y = 0;
var x = 0;
var telaJogo, telaJogo2, telaInicio;
var balao = [];
var a = 0;
var batata;
function ola() {
var bola = setInterval(addBalao, 1000);
}
function addBalao() {
telaJogo2 = document.getElementById('telaJogo2');
p2.push(0);
balao.push(0);
p1 = Math.floor(Math.random() * 445);
batata = "balao" + y;
balao[y] = document.createElement('div'); //create the block
balao[y].setAttribute("id", batata);
telaJogo2.appendChild(balao[y]);
balao[y].style = "top:" + p2[y] + "px;";
balao[y].style = "left:" + 30 + "px;";
balao[y].style = "background-color: red;";
balao[y].style = "height: 50px;";
balao[y].style = "width: 50px;";
balao[y].style = "position: absolute";
console.log("p2[y]" + p2[2]);
setInterval(ola2, 100);
y++;
}
function ola2() {
// move block
for (x = 0; x < y; x++) {
p2[x]++;
atualiza();
}
a = 0;
//console.log(p2);
}
function atualiza() {
// update the frame
balao[x].setAttribute("style", "top:" + p2[x] + "px;");
}
#telaJogo2 {
height: 800px;
width: 445px;
background-color: #90ee90;
}
<body onLoad="ola()">
<script type="text/javascript">
</script>
<div id="telaJogo2">
<div id="barra1"></div>
</div>
I want to add 10 points when blue box goes into brown box.
I tried to set score = 0 and points to add = 10 but it doesn't work.
I alert '+10 points' and it shows me the alert so I guess the problem is the DOM ?!?
Any suggestions ?
Thanks !
let moveCounter = 0;
let score = 0;
let obs = 10;
document.getElementById('score').textContent = '0';
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 49; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var obstacles = [];
while (obstacles.length < 10) {
var randomIndex = parseInt(49 * Math.random());
if (obstacles.indexOf(randomIndex) === -1) {
obstacles.push(randomIndex);
var drawObstacle = document.getElementById('square' + randomIndex);
$(drawObstacle).addClass("ob")
}
}
var playerOne = [];
while (playerOne.length < 1) {
var randomIndex = parseInt(49 * Math.random());
if (playerOne.indexOf(randomIndex) === -1) {
playerOne.push(randomIndex);
var drawPone = document.getElementById('square' + randomIndex);
$(drawPone).addClass("p-0")
}
}
var addPoints = $('#score');
$('#button_right').on('click', function() {
if ($(".p-0").hasClass("ob")) {
alert('add +10 points !!!')
addPoints.text( parseInt(addPoints.text()) + obs );
}
moveCounter += 1;
if ($(".p-0").hasClass("ob")) {
}
$pOne = $('.p-0')
$pOneNext = $pOne.next();
$pOne.removeClass('p-0');
$pOneNext.addClass('p-0');
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.ob {
background-color: brown;
}
.p-0 {
background-color: blue;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="grid-box">
</div>
<div class="move">
<button id="button_right">right</button><br>
</div>
<div id="score">
</div>
Thank you very much! I am new to JavaScript/ JQuery
Thank you very much!
You are trying to change the HTML inside of the div with id "score".
Selecting the css element using $("#id") retrieves the DOM element and not its contents so adding the score directly to it has no consequences.
What you want to do is: update the score variable and then set the HTML inside the div to the score value.
So instead of just:
addPoints += obs
you should
score += obs
addPoints.html(score)
I have a yellow box in a grid. When click button 'UP' the yellow box is going one box UP. How can I stop the yellow box when it arrives at the edge? I do not want it to go out of the grid.
let moveCounter = 0;
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 100; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var playerTwo = [];
while (playerTwo.length < 1) {
var randomIndex = parseInt(99 * Math.random());
if (playerTwo.indexOf(randomIndex) === -1) {
playerTwo.push(randomIndex);
var drawPtwo = document.getElementById('square' + randomIndex);
$(drawPtwo).addClass("p-1")
}
};
$('#button_up').on('click', function() {
moveCounter += 1;
$pOne = $('.p-1')
var id = $pOne.attr('id')
var idNumber = +id.slice(6);
var idMove = idNumber - 10
var idUpMove = 'square' + idMove;
$pOne.removeClass('p-1');
$('#' + idUpMove).addClass('p-1');
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.p-1{
background-color: yellow;
}
<div id="grid-box"></div>
<div class="move">
<button id="button_up">UP</button>
<br>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
I am new to Javascript / jQuery. Any help will be much appreciated ! Thank you
let moveCounter = 0;
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 100; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var playerTwo = [];
while (playerTwo.length < 1) {
var randomIndex = parseInt(99 * Math.random());
if (playerTwo.indexOf(randomIndex) === -1) {
playerTwo.push(randomIndex);
var drawPtwo = document.getElementById('square' + randomIndex);
$(drawPtwo).addClass("p-1")
}
};
$('#button_up').on('click', function() {
moveCounter += 1;
$pOne = $('.p-1')
var id = $pOne.attr('id')
var idNumber = +id.slice(6);
var idMove = idNumber - 10;
if(idMove < 0){idMove +=10;}
var idUpMove = 'square' + idMove;
$pOne.removeClass('p-1');
$('#' + idUpMove).addClass('p-1');
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.p-1{
background-color: yellow;
}
<div id="grid-box"></div>
<div class="move">
<button id="button_up">UP</button>
<br>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
Here I have added the condition which restrict box to out of the grid
if(idMove < 0){idMove +=10;}
if movable position is in the minus then it again initialise it existing position.
You can add a check to stop it from moving out of the squares
var idMove = idNumber - 10
if(idMove > 0){
// do all the moving stuffs
}
$('#button_up').on('click', function() {
moveCounter += 1;
$pOne = $('.p-1')
var id = $pOne.attr('id')
var idNumber = +id.slice(6);
var idMove = idNumber - 10;
if(idMove > 0) {
var idUpMove = 'square' + idMove;
$pOne.removeClass('p-1');
$('#' + idUpMove).addClass('p-1');
}
});
You can use an if statement to check idMove > 0) If it is, then you can move your square, if it isn't then you shouldn't move your square. it will be undefined, and so you can run your code only when pOne's id is not undefined.
See example below:
let moveCounter = 0;
var grid = document.getElementById("grid-box");
for (var i = 1; i <= 100; i++) {
var square = document.createElement("div");
square.className = 'square';
square.id = 'square' + i;
grid.appendChild(square);
}
var playerTwo = [];
while (playerTwo.length < 1) {
var randomIndex = parseInt(99 * Math.random());
if (playerTwo.indexOf(randomIndex) === -1) {
playerTwo.push(randomIndex);
var drawPtwo = document.getElementById('square' + randomIndex);
$(drawPtwo).addClass("p-1")
}
};
$('#button_up').on('click', function() {
moveCounter += 1;
$pOne = $('.p-1')
var id = $pOne.attr('id')
var idNumber = +id.slice(6);
var idMove = idNumber - 10
if (idMove > 0) {
var idUpMove = 'square' + idMove;
$pOne.removeClass('p-1');
$('#' + idUpMove).addClass('p-1');
}
});
#grid-box {
width: 400px;
height: 400px;
margin: 0 auto;
font-size: 0;
position: relative;
}
#grid-box>div.square {
font-size: 1rem;
vertical-align: top;
display: inline-block;
width: 10%;
height: 10%;
box-sizing: border-box;
border: 1px solid #000;
}
.p-1 {
background-color: yellow;
}
<div id="grid-box">
</div>
<div class="move">
<button id="button_up">UP</button><br>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
I have a dynamic group of n by m divs to form a grid. The items in this grid can be selected. The end result which I am hoping to achieve is to be able to combine and split the selected divs.
I have managed to get the divs to show correctly and select them, storing their id's in a list. Is there a way I could combine the selected divs, keeping the ones around it in their place?
#(Html.Kendo().Window()
.Name("window") //The name of the window is mandatory. It specifies the "id" attribute of the widget.
.Title("Dashboard Setup") //set the title of the window
.Content(#<text>
<div id="divSetup">
<div class="dvheader">
<b>Dashboard Setup</b>
</div>
<div>
<p>Enter the number of columns and rows of dashboard elements. This will create an empty dashboard with a set number of items which can be filled with KPI charts.</p>
<br />
<div class="dvform">
<table>
<tr style="margin-bottom: 15px;">
<td>
#Html.Label("Number of Columns: ")
</td>
<td>
<input type="number" name="NumColumns" id="NoColumns" min="1" max="20" />
</td>
</tr>
<tr style="margin-bottom: 15px;">
<td>
#Html.Label("Number of Rows: ")
</td>
<td>
<input type="number" name="NumRows" id="NoRows" min="1" max="20" />
</td>
</tr>
</table>
</div>
</div>
<div style="float: right">
<button id="btnSave" class="k-primary">Save</button>
<button id="btnClose">Close</button>
</div>
</div>
</text>)
.Draggable() //Enable dragging of the window
.Resizable() //Enable resizing of the window
.Width(600) //Set width of the window
.Modal(true)
.Visible(false)
)
<div id="dashboard">
</div>
<button id="combine" title="Combine">Combine</button>
<script>
$(document).ready(function () {
debugger;
$("#window").data("kendoWindow").open();
$("#btnClose").kendoButton({
click: close
});
$("#btnSave").kendoButton({
click: Save
});
$("#combine").kendoButton();
});
var array = [];
function clicked(e)
{
debugger;
var selectedDiv = "";
var x = document.getElementsByClassName('column')
for (var i = 0; i < x.length; i++)
{
if (x[i].id == e.id)
{
x[i].classList.add("selected");
array.push(x[i]);
}
}
for (var x = 0; x < array.length - 1; x++) {
array[x].classList.add("selected");
}
}
function close() {
$("#window").hide();
}
function Save()
{
debugger;
var col = document.getElementById("NoColumns").value;
var row = document.getElementById("NoRows").value;
for (var x = 1; x <= row; x++)
{
debugger;
document.getElementById("dashboard").innerHTML += '<div class="row">';
debugger;
for (var i = 1; i <= col; i++)
{
document.getElementById("dashboard").innerHTML += '<div onclick="clicked(this)" id="Row ' + x + ' Col ' + i + '" class="column">' + i + '</div>';
}
document.getElementById("dashboard").innerHTML += '</div>';
}
}
<style>
.selected {
background-color: #226fa3;
transition: background-color 0.4s ease-in, border-color 0.4s ease-in;
color: #ffffff;
}
#dashboard {
width: 80%;
margin: auto;
background-color: grey;
padding: 20px;
}
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
padding: 20px;
border: 1px black solid;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
Below is an image of the selected blocks I would like to combine into one, while keeping it's place
If you were using a table it would be much easier, for div's, I can think of a solution if the style position is absolute, maybe it would help you start at least.
<div id="container"></div>
<button id="combine" title="Combine" disabled="disabled">Combine</button>
<div id="output"></div>
the script:
<script>
var cc;
function group() {
var xx = $(".selected").map(function () { return $(this).attr("data-x"); }).get();
var yy = $(".selected").map(function () { return $(this).attr("data-y"); }).get();
this.minX = Math.min.apply(Math, xx);
this.minY = Math.min.apply(Math, yy);
this.maxX = Math.max.apply(Math, xx);
this.maxY = Math.max.apply(Math, yy);
this.selectedCount = $(".selected").length;
this.CorrectGroup = function () {
var s = this.selectedCount;
return s == this.cellsCount() && s > 1;
}
this.width = function () {
return this.maxX - this.minX + 1;
}
this.height = function () {
return this.maxY - this.minY + 1;
}
this.cellsCount = function () {
return this.width() * this.height();
}
}
function cell(x, y, g) {
this.x = x;
this.y = y;
this.g = g;
this.spanX = 1;
this.spanY = 1;
this.visible = true;
var cellWidth = 80;
var cellHeight = 50;
this.div = function () {
var output = jQuery('<div/>');
output.attr('id', 'y' + y + 'x' + x);
output.attr('data-x', x);
output.attr('data-y', y);
output.attr('style', this.left() + this.top() + this.width() + this.height());
output.addClass('clickable');
output.html('(y=' + y + ' x=' + x + ')')
return output;
}
this.left = function () {
return 'left:' + (x * cellWidth) + 'px;';
}
this.top = function () {
return 'top:' + (100 + y * cellHeight) + 'px;';
}
this.width = function () {
return 'width:' + (this.spanX * cellWidth) + 'px;';
}
this.height = function () {
return 'height:' + (this.spanY * cellHeight) + 'px;';
}
}
function cells(xx, yy) {
this.CellWidth = xx;
this.CellHeight = yy;
this.CellList = [];
for (var y = 0; y < yy; y++)
for (var x = 0; x < xx; x++) {
this.CellList.push(new cell(x, y, 1));
}
this.findCell = function (xx, yy) {
return this.CellList.find(function (element) {
return (element.x == xx && element.y == yy);
});
}
this.displayCells = function (container) {
container.html('');
for (var y = 0; y < yy; y++)
for (var x = 0; x < xx; x++) {
var cell = this.findCell(x, y);
if (cell.visible)
cell.div().appendTo(container);
}
}
}
$(document).ready(function () {
$('#combine').click(function () {
$(".selected").each(function () {
var x = $(this).data('x');
var y = $(this).data('y');
var cell = cc.findCell(x, y);
cell.visible = false;
cell.g = 'y';
});
var first = $(".selected").first();
var xx = $(first).data('x');
var yy = $(first).data('y');
var cell = cc.findCell(xx, yy);
var g = new group();
cell.visible = true;
cell.g = xx + '_' + yy;
cell.spanX = g.width();
cell.spanY = g.height();
cc.displayCells($('#container'));
});
//make divs clickable
$('#container').on('click', 'div', function () {
$(this).toggleClass('selected');
if (CheckIfSelectedAreGroupable())
$('#combine').removeAttr("disabled");
else
$('#combine').attr("disabled", "disabled");
});
cc = new cells(12, 10);
cc.displayCells($('#container'));
});
function CheckIfSelectedAreGroupable() {
var g = new group();
return g.CorrectGroup();
}
</script>
Style:
<style>
.selected {
background-color: #226fa3 !important;
transition: background-color 0.4s ease-in, border-color 0.4s ease-in;
color: #ffffff;
}
.clickable {
border: 1px solid lightgray;
margin: 0px;
padding: 0px;
background-color: lightyellow;
position: absolute;
}
</style>
Im starting the divs by the following line, you can hock your form to trigger something similar.
cc = new cells(12, 10);
the combine button will not activate if you dont select a correct group, a rectangle shape selection.
the split will not be hard too but I did not have time to put it together, if this solution help, I can update it for the split.
Note: I wrote this quickly so its not optimized.
to try the solution use :
jsfiddle
I was looking for a function which would take the overall width, max height, min height parameters as the input and fit multiple images in the given overall width adjusting their width.
So for an example in this page , all the images (in same row) should get auto adjusted to the same height keeping their original aspect ratio with javascript changing their widths.
Edit: I have Answered
You need only to change the height of the picture. The aspect ratio remains.
function height100() {
var imgages = document.getElementsByTagName('img');
Array.prototype.forEach.call(imgages, function (a) {
a.style.height = '100px';
});
}
<button onclick="height100();">100px height</button><br>
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/100/200/">
<img src="http://lorempixel.com/300/200/">
<img src="http://lorempixel.com/400/300/">
<img src="http://lorempixel.com/400/150/">
<img src="http://lorempixel.com/800/200/">
<img src="http://lorempixel.com/450/200/">
<img src="http://lorempixel.com/400/250/">
You dont necessarily need JS to accomplish this, unless your height is dynamic.
Flexbox should be able to take care of it for you.
Here is what you could do.
div {
border: 1px solid black;
display: flex;
flex-flow: row wrap;
}
img {
border: 1px solid red;
max-width: 100%;
height: 100px;
}
<div>
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/100/200/">
<img src="http://lorempixel.com/300/200/">
<img src="http://lorempixel.com/400/300/">
<img src="http://lorempixel.com/400/150/">
<img src="http://lorempixel.com/800/200/">
<img src="http://lorempixel.com/450/200/">
<img src="http://lorempixel.com/400/250/">
</div>
If you are looking for a dynamic height, just set the height at run time and could do something like this.
var imgs = document.querySelectorAll('img');
[].forEach.call(imgs, function(img) {
img.style.height = "100px";
});
div {
border: 1px solid black;
display: flex;
flex-flow: row wrap;
}
img {
border: 1px solid red;
max-width: 100%;
}
<div>
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/100/200/">
<img src="http://lorempixel.com/300/200/">
<img src="http://lorempixel.com/400/300/">
<img src="http://lorempixel.com/400/150/">
<img src="http://lorempixel.com/800/200/">
<img src="http://lorempixel.com/450/200/">
<img src="http://lorempixel.com/400/250/">
</div>
As stated in the other answers, it's a trivial job to adjust images to have the same height. Once you have scaled the images to have same height, according to their individual aspect ratio they will have different widths. Assuming that you have a certain width per row of images you might do as follows to distribute the images to the rows such that rows evenly get populated with the maximum amount of image and minimum white space.
function lineUpImages(imageWidths,totalWidth){
var sum = imageWidths.reduce((p,c) => p+c),
avg = sum/imageWidths.length;
initial = [...Array(Math.ceil(avg))].map(sa => (sa = [], sa.sum = 0, sa)); // initial rows array
return imageWidths.sort((a,b) => b-a)
.reduce((lines,image) => { var line = lines.reduce((p,c) => p.sum < c.sum ? p : c);
line.push(image);
line.sum += image;
return lines;
},initial);
}
var imageWidths = [...Array(20)].map(_ => ~~(Math.random()*4)+2), // generate a random array of image width values
result = lineUpImages(imageWidths,20); // maximum row width allowed is 20
console.log("Image Widths: :", JSON.stringify(imageWidths));
console.log("Rows:", JSON.stringify(result));
You might also chain up a map instruction to the very end and shuffle the images in each row (shuffling the sub arrays).
The answer so that images are of constant height and fills the outer div.
The example here
The javscript here -
$(function(){
//var pics;
var pic1 = {height:"10", width:"20", ap:1.374, rh:0};
var pics = [pic1];
//pics.push(pic3);
//$('#test').html(pics[2].height);
$('#some').imagesLoaded(function() {
$('#test').html('test ');
$('#some img').each(function(index) {
//setting const height
$(this).height(150);
var apic = {height:$(this).height() , width: $(this).width() ,ap: $(this).width() / $(this).height() , rh:0};
pics.push(apic);
});
$('#test').append(pics.length+ '<br />');
for (var j=1; j <pics.length;j++) {
$('#test').append(pics[j].width + ' ' + pics[j].ap + '<br />');
}
$('#test').append('Calculating width ' + '<br />');
var set = [0];
for (var j=1; j <pics.length;j++) {
var t = 0;
var c = j
do {
t = t+ pics[c].width;
$('#test').append(c + ' ' + t+ '<br />');
c=c+1;
}while (t < 645 && c<pics.length);
c=c-1;
if(t>645) {
c = c -1;
}
set.push(c);
j = c;
}
$('#test').append('Sets are: <br />');
var v = 1;
var st = 0;
for (p = 1; p<set.length; p++) {
$('#test').append(set[p] + ' ');
st = v;
v = set[p];
$('#test').append(p + ': ');
var tot = 0;
var inc = 0;
while(tot < 645 ) {
var tot1=0;
for(var g = st; g<v+1; g ++) {
tot1 =tot1+ (pics[g].ap * (pics[g].height+inc));
}
tot=tot1;
inc = inc+1;
}
for(var g = st; g<v+1; g ++) {
$('#some img').eq(g-1).height ( 150 + inc);
}
$('#test').append( '<br / >');
v = v+1;
}
$('#test').append('<br />');
/*
var tot = 0
var wid;
var wid1;
var inc=0;
var r = 1;
for (r =1; r<pics.length-1; r++) {
inc = 0;
tot = 0;
while ( tot < 645) {
wid = pics[r].ap * (pics[r].height+inc);
wid1 = pics[r+1].ap * (pics[r+1].height+inc);
tot = wid + wid1;
inc = inc+ 1;
}
$('#test').append('Total ' + inc +' '+ wid + ' ' + wid1 + '<br />');
$('#some img').eq(r-1).height ( 150 + inc);
$('#some img').eq(r).height ( 150 + inc);
r=r+1;
*/
}
);
});