Pdf content should always have two div on one page. Only if the content of div is to long, then there can be one div per page, but on next page, it should again be two, again, if the content allows. But that is the rule, show two content, one if content is to long. So I started to work with the javascript, to check the elements height.
let attributeDivs = document.getElementsByClassName("attributeDiv");
for(var i = 0; i < attributeDivs.length; i++) {
var twoElementsOffsetHeight = attributeDivs[i].offsetHeight + attributeDivs[i + 1].offsetHeight;
if (twoElementsOffsetHeight > 550) {
attributeDivs[i].style.pageBreakAfter = "always";
}
}
What this does is check if the two contents are to long, then it will do the page break on the first content.
But the problem is that content can be so small, that 4 of them are smaller then 550. So this is not good. Then I tried to break every second content to see can I work something with that:
for(var i = 0; i < attributeDivs.length; i++) {
var twoElementsOffsetHeight = attributeDivs[i].offsetHeight + attributeDivs[i + 1].offsetHeight;
if (i % 2) {
attributeDivs[i].style.pageBreakAfter = "always";
}
}
But then is the problem if the first is to long, it will break the content on the second page, even if it is small one.
Also, I noticed now that javascript does not calculate the hole element if the content goes on the second page. Only the content on the one page get offsetHeight.
How to approach this task?
just use a counter like this:
let attributeDivs = document.getElementsByClassName("attributeDiv");
var counter = 0; // <--- this is new
for(var i = 0; i < attributeDivs.length; i++) {
var twoElementsOffsetHeight = attributeDivs[i].offsetHeight + attributeDivs[i + 1].offsetHeight;
counter += 1; // <--- this is new
if (twoElementsOffsetHeight > 550) {
attributeDivs[i].style.pageBreakAfter = "always";
counter = 0; // <--- this is new
}else if(counter == 2) // <--- this is new
{
attributeDivs[i].style.pageBreakAfter = "always";
counter = 0;
}
}
Related
In JavaScript I am creating a grid (the type of grid you see in Photoshop) with HTML tables. The grid size is going to be variable, i.e., changeable by the user, so the size of each grid square must be calculated and divided by the number of pixels available to get an exact size grid.
I've done all this, but I have a problem adding in the necessary table elements to create the grid. My code is in full working order, except when I use the appendChild() function inside a for loop it only ever appends a single child, when it should be appending up to a couple of hundred.
My code:
grid.show = function(event)
{
var e = event;
if(grid.show_grid == false)
{
grid.show_grid = true;
parent.document.getElementById("grid_table").style.display = "block";
// Get grid (table) and create some elements.
grid.get_grid = parent.document.getElementById("grid_table");
grid.tr = parent.document.createElement("tr");
grid.td = parent.document.createElement("td");
// Clear the grid of all squares so we don't have to worry about subtracting anything.
grid.get_grid.innerHTML = "";
// Calculate the number of horizontal and vertical squares.
var horizontal = Math.ceil(grid.total_width / grid.size);
var vertical = Math.ceil(grid.total_height / grid.size);
// This was a nested loop, removed for demonstration.
// Attempting to add 10 "<tr><td></td></tr>" to the table.
for(var j = 0; j < 10; j++)
{
grid.tr.appendChild(grid.td);
}
//console.log(grid.tr);
// Add the elements to the table.
grid.get_grid.appendChild(grid.tr);
}
else
{
grid.show_grid = false;
parent.document.getElementById("grid_table").style.display = "none";
}
}
This only ever returns a single table row with single table data inside, like so:
<tr>
<td></td>
</tr>
I've already looked at this page and this page, and they sound promising but I just can't figure out how to make this work.
EDIT: Code now working, solution:
grid.show = function(event)
{
var e = event;
if(grid.show_grid == false)
{
grid.show_grid = true;
parent.document.getElementById("grid_table").style.display = "block";
grid.get_grid = parent.document.getElementById("grid_table");
grid.tr = null;
grid.td = null;
grid.get_grid.innerHTML = "";
var horizontal = Math.ceil(grid.total_width / grid.size);
var vertical = Math.ceil(grid.total_height / grid.size);
for(var i = 0; i < vertical; i++)
{
grid.tr = parent.document.createElement("tr");
for(var j = 0; j < horizontal; j++)
{
grid.td = parent.document.createElement("td");
grid.td.width = grid.size;
grid.td.height = grid.size;
grid.tr.appendChild(grid.td);
}
grid.get_grid.appendChild(grid.tr);
}
}
else
{
grid.show_grid = false;
parent.document.getElementById("grid_table").style.display = "none";
}
}
You are appending the same element over and over. You need to call document.createElement each time you wish to have a new element.
EDIT: If the element setup is really complicated and potentially includes children then you can also use Node.cloneNode
If you want to make one copy of the element, you will need to clone it. Use cloneNode()
So change
grid.tr.appendChild(grid.td);
to
grid.tr.appendChild(grid.td.cloneNode(true));
for(var j = 0; j < 10; j++)
{
grid.tr.appendChild(grid.td);
}
should be
for(var j = 0; j < 10; j++) {
var newTd = parent.document.createElement('td');
grid.tds.push(newTd); // if you need it, not sure why though
grid.tr.appendChild(newTd);
}
i'm bulding a simon game as a student work project in school. i bulit the "card game "Dynamically by entering cell's to a table in pure js now i would want to make the "card game " to flash in a Random Sequence so i had created a random var and add a classList to evry random but here is the problem
1) i would want to creat a random array to compare between the users array when playing and it seems that i cant do a classLiss.add() to it
2)i would want to "flash" the "cards game" that evry time it will flash once and NOT at the same time (and also at the first turn it will flashh once and at the second turn it will flash Twice {not on the same time.exc}) i did use a setTimeout function to remove classList
Here is the code for "card display" and random function:
function cards(user) {
userchioce = parseInt(user.value);
if (userchioce == 4) {
var table = document.getElementById("mytable");
document.getElementById("mytable").innerHTML = "";
for (var i = 0; i < 2; i++) {
var row = table.insertRow(0);
for (var j = 0; j < 2; j++) {
var cell = row.insertCell(-1);
}
}
var t = document.getElementById("mytable");
var idnum = 0;
counter = 0;
for (var r = 0; r < t.rows.length; r++) { //luop at length of rows
for (var c = 0; c < t.rows[r].cells.length; c++) { //luop at length of rows and cells
t.rows[r].cells[c].style.backgroundColor = colorarry[counter];
t.rows[r].cells[c].innerHTML = colorarry1[counter];
t.rows[r].cells[c].setAttribute("class", "td1");
t.rows[r].cells[c].setAttribute("id", "tdd" + idnum++);
counter++;
}
}
}
counter = 0;//end of if 4
function getrandom(rnd) {
rnd = Math.floor(Math.random() * userchioce);
var id = "tdd";
var fullid = id + rnd;
var dispaly = document.getElementById(fullid);
dispaly.classList.add("flash");
{
setTimeout(function () {
dispaly.classList.remove("flash");
}, 850);
}
}
Alright, let's clean up a little first. You are creating looping to create the cells, then looping again to modify them, you should just modify them right away.
if (userchioce == 4) {
var table = document.getElementById("mytable");
document.getElementById("mytable").innerHTML = "";
var idnum = 0;
for (var i = 0; i < 2; i++) {
var row = table.insertRow(0);
for (var j = 0; j < 2; j++) {
var cell = row.insertCell(-1);
cell.style.backgroundColor = colorarry[idnum];
cell.innerHTML = colorarry1[idnum];
cell.setAttribute("class", "td1");
cell.setAttribute("id", "tdd" + idnum++);
}
}
}
I've also removed the counter variable in favour to the idnum variable. They were both defined at 0 at the same place, and also incremented at the same pace...
You do not get to display the lights one after the other because you only do it once. There should be a place where you keep track of the previous randoms.
var moves = [];
function newTurn() {
var rnd = Math.floor(Math.random() * userchioce);
// Add the new random to the moves history.
moves.push(rnd);
//create a copy, we'll be playing with it.
var movesToShow = moves.slice();
showMove();
}
function showMove(moveList){
//Remove first value of the list of moves and use it to show.
var move = moveList.shift();
var id = "tdd";
var fullid = id + move;
var display= document.getElementById(fullid);
display.classList.add("flash");
//Wait a little before removing the hightlight.
setTimeout(function () {
display.classList.remove("flash");
if(moveList.length>0){
//There are more moves, wait just a little
setTimeout(function(){
//Display a new move.
showMove(moveList);
},100);
}
}, 850);
}
// call this to start a new turn.
newTurn();
Also, I would like to urge you to correct all the typos in your script. "dispaly","userchioce" this will make things very hard for you to follow.
I have 6 images and I want to add those images to a div programatically via javascript or jquery. What is the way to do it? Like I want the alignment to be 2 images in every. So, if there are 6 images, I want 3 rows, each row having 2 mages. Is it possible to without css via js or jquery only .
Also, I would like to add a double click handler to each image added. What is best way to it.
I am looping thru various images like :
for(var i = 0; i < elements.length; ++i) {
if(elements[i].querySelector("img")) {
var path = elements[i].querySelector("img").src;
var newimage = document.createElement('img');
newimage.setAttribute('src', path);
var div = document.getElementById("enclosingdiv");
enclosingdiv.appendChild(newimage);
}
}
You can do it like this-
<div id="imagesDisplay">
</div>
<script>
$(document).ready(function(){
var elements = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg");
var noImages = 2; // 2 images per row
var imgCount = 0; // will keep count of images per row
var divHTML = ""; // will hold html tags to be dispalyed once the loop is complete i.e. all the images are added
for(var i = 0; i < elements.length; ++i) {
console.log(elements[i]);
if( imgCount ===0 ) {
divHTML += "<div class='row'>\n";
}
divHTML += "<div class='col-md-6'><img src='images/"+elements[i]+"'></div>\n";
imgCount++;
if( imgCount === noImages) {
imgCount = 0;
divHTML += "</div>\n";
}
}
$("#imagesDisplay").html(divHTML);
});
</script>
Hello I was wondering if anyone can help me write a Photoshop script that will display a number and save the document incrementally?
I got to here so far:
if(app.documents.length != 0){
var doc = app.activeDocument;
for(i = 0; i < doc.artLayers.length; ++i){
var layer = doc.artLayers[i];
if(layer.kind == LayerKind.TEXT){
layer.textItem.contents = 1;
layer.textItem.size = 20;
}
}
}
But I'm having trouble writing the content with increments. I want it so that the page number on my document increases by 1.
It isn't entirely clear what you are after. This will increment the number shown, but every text layer it encounters will get numbered.
if(app.documents.length != 0){
var doc = app.activeDocument;
var j = 1;
for(i = 0; i < doc.artLayers.length; ++i){
var layer = doc.artLayers[i];
if(layer.kind == LayerKind.TEXT){
layer.textItem.contents = j;
layer.textItem.size = 20;
j++;
}
}
}
Client side javascript code creates some elements (about 50-100) in a cycle:
for (var i = 0; i < list.length; i++) {
var obj = document.createElement("DIV");
obj.innerHTML = "<span class=\"itemId\">" + list[i].Id
+ "</span><!-- some more simple code --> ";
mainObj.appendChild(obj);
}
There are some problems with browser rendering. For example, IE just freezes until it finishes the cycle, and then shows all elements at once. Is there a way to show each created element separately and immediately after appendChild()?
This is due to the single threaded nature of browsers. Rendering will not begin until the thread becomes idle. In this case, it's when your loop has completed and the function exits. The only way around this is to (sort of) simulate multiple threads using timers, like so:
var timer,
i = 0,
max = list.length;
timer = window.setInterval(function ()
{
if (i < max)
{
var obj = document.createElement("DIV");
obj.innerHTML = "<span class=\"itemId\">" + list[i].Id
+ "</span><!-- some more simple code --> ";
mainObj.appendChild(obj);
i++;
}
else
window.clearInterval(timer);
}, 1);
The obvious drawback is that this will take your loop longer to complete because it's fitting the rendering inbetween each iteration.
insert a delay between adding successive entries, with setTimeout().
function insertEntry(list, ix) {
if (ix == null) {
ix = 0;
}
else if (ix < list.length) {
var elt= document.createElement("DIV");
var attr = document.createAttribute('id');
attr.value = 'item'+ix;
elt.setAttributeNode(attr);
elt.innerHTML = "<span class='itemCls'>" + list[ix].Id + ': ' + list[ix].Name +
"</span><!-- some more simple code -->\n";
mainObj.appendChild(elt);
ix++;
}
if (ix < list.length) {
setTimeout(function(){insertEntry(list, ix);}, 20);
}
}
Kick it off with:
insertEntry(myList);
where myList is like this:
var myList = [
{ Id : '1938377', Name : 'Sven'},
{ Id : '1398737', Name : 'Walt'},
{ Id : '9137387', Name : 'Edie'}
...
};
demo: http://jsbin.com/ehogo/4
I wold do it like this using jQuery instead:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
timer = window.setInterval(function ()
{
for (var i = 0; i < 100; i++) {
$('#container').append('<div>testing</div><br />');
}
},10);
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
jQuery does it so quickly, you won't even need to bother about showing as they are created, but you can make it smoother by adding a timer as the example shows.
Is there a specific reason you want the DOM to be updated after every cycle?
It would be alot faster if you create all the elements in one javascript element, and add this one element to the DOM when the cycle is finished.
var holder = document.createElement("DIV");
for (var i = 0; i < list.Length; i++) {
var obj = document.createElement("DIV");
obj.innerHTML = "<span class=\"itemId\">" + list[i].Id
+ "</span><!-- some more simple code --> ";
holder.appendChild(obj);
}
mainObj.appendChild(holder);