Develop Reference

Select all text frames and ALIGN RIGHT in all ODD numbered pages of InDesign (Javascript)

I want to select all text frames and then ALIGN its content to the right of the page of all the ODD numbered pages of my document in InDesign using only Javascript.
here's my progress so far and I know I can determine the odd numbers but still can't make selecting a page work thus no progress to select its text frames too.
main();
function main() {
var myDocument = app.documents.item(0);
var myPage = myDocument.pages.item(0);
var i = 0;
for (i = 1; i < myDocument.pages.count(); i = i + 2) {
\\ select the page, then find all text frames in that page, then align right
}
}
any help is appreciated. thank you.

To get all of the frames on a page:
var myFrames = myDocument.pages[i].textFrames;
Then you can loop through the frames and their paragraphs and apply (use different counter variables, e.g "c" and "b")
myFrames[c].paragraphs[b].justification = Justification.RIGHT_ALIGN;
You can also try everyItem()
myDocument.pages[i].textFrames.everyItem().paragraphs.everyItem().justification = Justification.RIGHT_ALIGN;

Here is a simplest solution:
var pages = app.activeDocument.pages;
for (var i = 1; i < pages.length; i = i + 2) {
app.select(pages[i].textFrames);
try {
app.menuActions.item("$ID/Horizontal Page Align Left").invoke()
} catch(e) {}
}
It relies on selection objects and invoke the menu action. Sometimes this is not the best idea (that is why try/catch). The solution can be more complicated and robust. It depends on your limitations and additional details.
Update
I didn't get that you need to align CONTENT of the frames rather than the frames. It can be done, but the solution differs for linked and non-linked text frames. Except when one paragraph belongs two neighboring pages.

Rendering only partial parts of html page to pdf multiple times using jspdf and html2canvas

My existing code is able to render the whole body of the HTML page to the PDF. Kindly check the code below.
function exportScorecard() {
var doc = new jsPDF();
var source = $('#main')[0];
var options = { background: '#fff' };
doc.addHTML(source, options, function () {
doc.save('scorecard.pdf');
});
}
Below is also the result of the code.
But my goal is to break down the current result per chart/div. Like a decent report, I am planning to add text analysis below each chart. How can I ONLY grab the div containing the canvas chart?
I have tried using multiple addHTML() functions and it renders nothing since I have to take out the doc.save() function, therefore giving me a blank page.
Thank you very much!

How do I loop over images in table, get the src of ALL images and apply to new images in new table?

I am looping through the images in a table, trying to get the source and then applying that src to a new image in a different table. I have managed to create new image objects in the new table cells (tested) but for some reason all I can get is the last image to display. Well, actually I know this is because the loop writes over the variable each time and it has the last value when it is applied, but I don't know how to get them all. Here is the relevant code. If you need more just holler or see Why can't I get my images to appear in table cells/nodes.. maybe I can get some closure? Thanks for your help.
newImages = newTable.getElementsByTagName('img');
for(var i = 0; i < newImages.length; i += 1) {
var picSource = newImages[i]['src'];
console.log(picSource);//This logs the path to the four different images
var newImg = new Image();//creates a new image for each
newImg.src = picSource;//gives each image src?? Just gives the last image
}

There are two ways you might go about this, either creating new img elements and copying over the src property, or just clone the element. For example, if you have the following table:
<table id="t0">
<tr><td><img src="a.png">
<tr><td><img src="b.png">
<tr><td><img src="c.png">
</table>
You can get all the images in the document using document.images, but you want just the ones in the table so you can do:
var images = document.getElementById('t0').getElementsByTagName('img')
which is a live collection (it will be updated automatically if you add or remove images from the table), or using a selector:
var images = document.querySelectorAll('#t0 img')
which is a static collection that stays the same no matter what you do to the table. The first method is supported in all browsers in use, but most will also support the selector version.
To make another table with the same images by copying the src property, you could do:
var table = document.createElement('table');
var row, cell, img;
for (var i=0, iLen=images.length; i<iLen; i++) {
row = table.insertRow(-1);
cell = row.insertCell(-1);
// create new image and append to cell
img = new Image();
img.src = images[i].src;
cell.appendChild(img);
}
Using the clone method, the last 3 lines can be replaced with:
cell.appendChild(images[i].cloneNode(false));
Finally, add the new table to the document:
document.body.appendChild(table);

How to change an image on a site using XML data & jQuery

I have a site that has a banner at the top of the page. I've started to overhaul my HTML structure and am now getting various pieces of information that populate the site out of an XML file. My HTML that uses the jQuery is:
<script>
function myExampleSite()
{
var myURL = window.location.href;
var dashIndex = myURL.lastIndexOf("-");
var dotIndex = myURL.lastIndexOf(".");
var result = myURL.substring(dashIndex + 1, dotIndex);
return result;
}
var exampleSite = myExampleSite();
</script>
<script>
var root = null;
$(document).ready(function ()
{
$.get("Status_Pages.xml",
function (xml)
{
root = $(xml).find("site[name='" + exampleSite + "']");
result = $(root).find("headerImage");
$("td#headerImage").html($(result).text());
var imageSrc=$(root).find("headerImage").text();
$(".PageHeader img").attr("src",imageSrc);
result = $(root).find("version");
$("td#version").html($(result).text());
result = $(root).find("status");
$("td#status").html($(result).text());
result = $(root).find("networkNotes");
$("td#networkNotes").html($(result).text());
....etc etc
});
});
</script>
My XML file looks like this.
<sites>
<site name="Template">
<headerImage>images/template-header.png</headerImage>
<productVersion>[Version goes here]</productVersion>
<systemStatus color="green">Normal</systemStatus>
<networkNotes>System status is normal</networkNotes>
</site>
</sites>
I have several <site>s that all have their own data that will populate different areas of individual sites. I've ran into some snags though.
The first snag is how it currently obtains its header image:
html
<div class="container">
<div class "PageHeader"> <!-- Header image read from XML file -->
<img border="0" src=""/>
</div>
Right now it's hard-coded to be the template header image, but I need to make that generic and read the XML value for that site. So instead of being hard-coded as images/template-header.png it would read the XML value for the current site, which is still going to be the template header - but it won't for every page.
How can I read in the image string to populate my HTML so that each site has a different image depending on what's in the XML?
Edit: Edited code to match current issue. Currently, I just get a broken image, but I can still change it back to the hard-coded image URL (images/template-header.png) and it works.

As you already have the code that can extract the image URL information from the XML, which is
result = $(root).find("headerImage");
$("td#headerImage").html($(result).text());
It's now a matter of attaching that URL, to the image tag. We need to select the object, and then simply change it's src attribute. With jQuery this is actually pretty easy. It'll look something like
var root = $(xml).find("site[name='" + site + "']");
//get the image url from the xml
var imageSrc=$(root).find("headerImage").text()
//get all the images in class .PageHeader, and change the src
$(".PageHeader img").attr("src",imageSrc)
And it should work
Example
In conclusion, if you already have some values you want to put in HTML tags dynamically, it's pretty easy. There's .html("<b>bold</b>") for content, there's .attr("attrName","attrValue") for general attributes. .css("background","red") for changing CSS directly. There's also some class modifying stuff that would be useful in the future.

Javascript - trying to locate an image

I am not expert in javascript, so, excuse my lack of knowledge.
I am trying to interact with an image on a page on the web, to create some automation.
I need to click on that image using javascript, from a script.
I did everything to discover how to access that image and no success at all. The image is not responding to anything. I suppose I am not reaching the right object.
Trying to discover the object, I created a very simple script, that will scale every image on that page, to see at least if I can reach all img object.
This is the script
for (i=0;i<=100;i++) {
document.image[i].width.value = '300';
}
No changes at all.
Is the script correct? is that anything that may be preventing the image to respond from external scripts?
Any clues? thanks.
___ EDIT
the image I need to click is declared like this:
<div class="leaderboard-text">
<span id="addon-add-language-button"><image class="ajaxListAddButtonEnabled" listId="localizationList" src="/itc/images/blue-add-language-button.png"><image class="ajaxListAddButtonDisabled" listId="localizationList" style="display:none;" src="/itc/images/blue-add-language-button-disabled.png"></span>
</div>

There is no document.image, there is document.images
for (var i=0, l=document.images.length; i<l; i++) {
var ing = document.images[i];
img.width = 300; // but why do you want all images to be equal width?
}

You missed an 's' in images and some other things.
for (i=0, lughez = document.images.length; i<lughez ; i++) {
document.images[i].width= '300';
}
but if the image has an id you could do:
document.getElementById('id').click()
to click your image where 'id' is the id you are using