I have this image table that has two columns and 20 rows. When executing this for loop, all the rows are working okay except for the first row, which only displays the first image on the left. It's really weird; is there something wrong with the order of the execution?
var image= [];
var rows=5;
for (var i = 0; i < test.length; i++) {
var avatar = test[i].image; // The profile image
if(i % 2 === 0){
image[i]= Titanium.UI.createImageView({
top:row,
image:avatar
align:right
});
win.add(image[i]);
//trying to increase the image
row =row+200;
} else if(i % 2 === 1) {
image[i]= Titanium.UI.createImageView({
top:row,
image:avatar
align:left
});
win.add(image[i]);
}
}
i=0, i%2=0, show the image (supposed to be right), row+=200;
i=1, i%2=1, show the image (left side), row stays same
i=2, i%2=0, show the image (right side), row+=200
0%2 = 0, and that represents your right side image, and then it goes to the next line. Just need to play around with where you increment row and which side your loop starts with.
Related
I currently have a document, with help from StackOverflow users already, that randomly generates questions, adds it to the end of a document, and then has the ability to delete all the questions posted. This is based on deleting everything under a horizontal rule.
Link to GDrive containing example document & code: LINK TO GDRIVE
You can also see what it currently does here: https://imgur.com/QVrOZKu
However, I now want to only want to add content after a certain point in the document, as well as only delete content between two certain points. You can see the two horizontal rules in an image below in which I want to add/delete
content.
The first horizontal rule in the picture is the third horizontal rule in the document.
Has anyone got any ideas how I can delete and add content between those two points? I've tried using child index's but failed miserably.
This is similar to Deleting all content down from the second horizontal line in a document so I adapt the solutions. First function deletes the paragraphs between the 3rd and 4th line. It counts horizontal lines as we loop through paragraphs. When the count reaches 3, start deleting subsequent paragraphs. When it exceeds 3, stop the loop.
function deleteFrom3to4() {
var body = DocumentApp.getActiveDocument().getBody();
body.appendParagraph('');
var para = body.getParagraphs();
var ruleCount = 0;
for (var i = 0; i < para.length - 1; i++) {
if (para[i].findElement(DocumentApp.ElementType.HORIZONTAL_RULE)) {
ruleCount++;
}
else if (ruleCount == 3) {
body.removeChild(para[i]);
}
if (ruleCount > 3) {
break;
}
}
}
And this one inserts a paragraph after the 3rd horizontal line. Again, it loops until the 3rd line is found; inserts a paragraph after it (expressed by body.getChildIndex(para[i]) + 1 child index) and stops.
function insertAfter3() {
var body = DocumentApp.getActiveDocument().getBody();
body.appendParagraph('');
var para = body.getParagraphs();
var ruleCount = 0;
for (var i = 0; i < para.length - 1; i++) {
if (para[i].findElement(DocumentApp.ElementType.HORIZONTAL_RULE)) {
ruleCount++;
}
if (ruleCount == 3) {
body.insertParagraph(body.getChildIndex(para[i]) + 1, "Here is a new paragraph");
break;
}
}
}
<!doctype html>
<html>
<head>
<script>
function do_something() {
var theBody = document.getElementsByTagName("body")[0];
var theImg = document.createElement("img");
theImg.src = "cat.png";
theBody.appendChild(theImg.cloneNode(true));
var count = 0;
for (var i = 0; i < 10; i++, count++) {
if (i == 5) continue;
if (count == 3) {
count = 0;
theBody.removeChild(theBody.lastChild);
} else {
theBody.appendChild(theImg.cloneNode(true));
}
if (i > 7) break;
}
}
</script>
</head>
<body onload="do_something()"></body>
</html>
I am supposed to tell how many images would a modern browser display.
I have two major doubts here:
When i=4, what is the value of count? I think it would be 0, but don't why I am confused about it.
As the code tells, when count = 0, an image will be removed from the body. Does the code append an image, and then remove an image? Or, does it simply remove one image? This is the part that is confusing because nothing is said about what happens when i=3.
According to the given answer, 6 images are added in the loop, and 2 are removed. So, a total number of 5 images are displayed.
When i=4, what is the value of count? I think it would be 0, but don't why I am confused about it.
When i == 3, count is set to 0. At the end of the for block, count++ is executed, so by the time i == 4, count == 1
As the code tells, when count = 0, an image will be removed from the
body. Does the code append an image, and then remove an image? Or,
does it simply remove one image? This is the part that is confusing
because nothing is said about what happens when i=3.
i == 0 append
i == 1 append
i == 2 append
i == 3 image from previous step removed
i == 4 append
etc.
I am trying to make the blank or "0" function of ms in a web page.
The goal:
what happens in mine: what should happen:
the red square indicates the button that was clicked, and the green circles indicate its adjacent squares/tiles.
My approach or logic to make this function was:
step1: if the button that was clicked is a 0, reveal its adjacent tiles.
step 2: for every adjacent tile, if THAT tile is 0, reveal THAT TILES' adjacent tiles. and so on until all adjacent tiles of every connected 0 is revealed.
The code of my function: (the parameters are the coordinates of the button that is clicked. e.g.the red square/tile in the picture above has coordinates 3,6)
function RevealNearbyTiles(y,x){
var cordsx; //cordsx and cordsy represent the adjacent tiles of the coordinates (the parameters).
var cordsy;
var coordinates;
for(i=-1; i<2; i++){ //for every adjacent tile:
for(j=-1;j<2;j++){
cordsx = x;
cordsy = y;
if(i === 0 && j === 0){
continue;
}
else{
cordsx += j;
cordsy += i;
//if this ^ offset is within the grid:
if((cordsx >= 0 && cordsx < 10) && (cordsy >= 0 && cordsy < 10)){
//the coordinates of the tile.
coordinates = $("#mstable tr:nth-of-type("+(cordsy+1)+") td:nth-of-type("+(cordsx+1)+") .tiles");
//if it has not been revealed
if(coordinates.parent().attr("data-revealed") === "false"){
//reveal this coordinate.
coordinates.empty().append("<p id='number'>"+coordinates.parent().attr("data-value")+"</p>");
coordinates.parent().attr("data-revealed", "true");
//if this coordinate is 0
if(coordinates.parent().attr("data-value") === " "){
//reveal this coordiantes' nerabytiles
RevealNearbyTiles(cordsy,cordsx);
}
}
}
}
}
}
}
The attribute "data-value" is the number of nearby bombs the tile has.
The attribute "data-revealed" is true if the tile is revealed, or false if it's not. They both work, don't worry too much about them.
The code for every tile button:
$(".tiles").click(function(){
//if this button is clicked, reveal this tile
$(this).empty().append("<p id='number'>"+$(this).parent().attr("data-value")+"</p>");
$(this).parent().attr("data-revealed","true");
//if this tile's value is 0, call the function
if($(this).parent().attr("data-value") === " "){
RevealNearbyTiles($(this).parent().data("index").a,$(this).parent().data("index").b);
}
});
What I think the problem is: The for loop is supposed to run for every adjacent tile of the tile that was clicked, but when it runs the function for the first tile, it forgets about all other adjacent tiles. I need to make it so that the function runs on all adjacent tiles that are 0, and on all of THEIR adjacent tiles that are 0 and so on.
Thanks for your help, its a hard problem to explain =/. I searched many places but could not find an answer. Sorry for the very long and specific problem.
I think the issue is with your two for loops, they use global vars called i and j which are the same for each call to RevealNearbyTiles(). You can fix this with the following code...
for(var i=-1; i<2; i++){ //for every adjacent tile:
for(var j=-1;j<2;j++){
I think what happened was that your algorithm ran until it hit the case where it had revealed all adjacent tiles (e.g. i = 1, j = 1), it then exited up the call chain with those values and exited each loop rather than keep executing them.
I have an array of image IDs.
var images = ['238239', '389943', '989238', ... ];
max = images.length;
Array index obviously starts at 0. The array size can vary.
For example. If there are 5 images in the array, the indexes are 0, 1, 2, 3, 4.
I'm swapping the images with Jquery by incrementing the current index like so:
<script>
currindex = 0
// Previous image, onclick event swap
$("previous").click(function(){
currindex = (currindex+1) % max;
...some more code to swap image...
});
// Next image, onclick event swap
$("next").click(function(){
currindex = (currindex+max-1) % max;
...some more code to swap image...
}
</script>
This allows the images to rotate and begin again at index 0 when user clicks "Next" on last index nr. 4. The same applies to rotating with "Previous".
I want to display a counter of current position like so:
<div>Image 3 of 5</div>
How can I implement the counter which will always begin at 1 at index 0 and will rotate both ways?
function updateCounter(){
document.getElementById("counter").innerHTML = "Image "+(currindex+1)+" of "+max;
}
Add some element to your code with the id of "counter", and add the function updateCounter() to both the click events.
I have the following function:
function slideDown() {
//get the element to slide
sliding = document.getElementById('slideDiv1');
//add 1px to the height each time
sliding.style.height = parseInt(sliding.style.height)+1+'px';
t = setTimeout(slideDown,30);
if (sliding.style.height == "401px") {
clearTimeout(t);
}
}
which is called within this function:
function addDiv(nextImageSlide) {
//finds the src attribute of the image nested in the Li
elemChild = nextImageSlide.firstChild;
imageSrc = elemChild.getAttribute('src');
//loops and creates six divs which will be the slices. adds background property etc
for (i = 0, j = 0, k = 1; i< = 19; i++, j++, k++) {
var newDiv = document.createElement('div');
newDiv.setAttribute('class', 'new-div');
newDiv.id='slideDiv' + k;
newDiv.style.height = '1px';
newDiv.style.background = 'url(' + imageSrc +') scroll no-repeat - '+39.5 * j + 'px 0';
var a = document.getElementById('content');
a.appendChild(newDiv);
}
slideDown();
}
Which is called within another function that defines nextImageSlide. It later removes all the divs that it just made.
The idea is for an image gallery. When the user hits the next button, I want slices of the next image to slide down to show the next image. Those slices are then taken away and the new image revealed.
I would like something like this: http://workshop.rs/projects/jqfancytransitions/.
It's for an assignment so we have to write all the code ourself and this is the best way I can think to replicate it. The only problem is that I keep getting an error:
'sliding is null. sliding.style.height = parseInt(sliding.style.height)+1+'px';'
No matter what I do I can't get rid of it. The thing is if I define sliding as a totally different id, (for example I made a random little div outside of everything), it working.
This error shows when I try to access the divs, it just made that it throws a hissy fit.
Anyone see any errors in my code?
Hopefully this is just a typo while pasting into the site here, but:
car a = document.getElementById('content');
^---syntax error, which'll kill your entire script - var?