Develop Reference

Finding page sizes in InDesign multipage document with different page sizes

I'm trying to write a simple script that looks at the active InDesign file and reports the page width and height. However, I have a multiple page document, and not all pages are the same size. So I cannot use the document page sizes. How do I read the individual page sizes?
here is my starting code:
#target "InDesign"
var doc=app.activeDocument;
// set in inches
doc.viewPreferences.horizontalMeasurementUnits = MeasurementUnits.inches;
doc.viewPreferences.verticalMeasurementUnits = MeasurementUnits.inches;
for(var j =0;j<doc.pages.length;j++)
{
// gather data
var pageW=doc.documentPreferences.pageWidth;
var pageH=doc.documentPreferences.pageHeight;
// display
//$.writeln("w: " + pageW + " h: " + pageH );
$.writeln(doc.pages[j].name);
$.writeln(doc.pages[j].properties);
}

Strike that. Found it.
#target "InDesign"
var doc=app.activeDocument;
// set in inches
doc.viewPreferences.horizontalMeasurementUnits = MeasurementUnits.inches;
doc.viewPreferences.verticalMeasurementUnits = MeasurementUnits.inches;
for(var j =0;j<doc.pages.length;j++)
{
// gather data
var pageW=doc.documentPreferences.pageWidth;
var pageH=doc.documentPreferences.pageHeight;
// display
//$.writeln("w: " + pageW + " h: " + pageH );
$.writeln(doc.pages[j].name);
$.writeln("Page Width : " + doc.pages[j].bounds[3] + "\rPage Height : " + doc.pages[j].bounds[2] );
}

Just a followup. The above answer only works if there is no content in your slug area. The following is a better answer.
#target "InDesign"
var doc=app.activeDocument;
// set in inches
doc.viewPreferences.horizontalMeasurementUnits = MeasurementUnits.inches;
doc.viewPreferences.verticalMeasurementUnits = MeasurementUnits.inches;
$.writeln(doc.pages.item(0).marginPreferences.top);
for(var j =0;j<doc.pages.length;j++)
{
// gather data
var pageW=doc.documentPreferences.pageWidth;
var pageH=doc.documentPreferences.pageHeight;
// write data
$.writeln("Page : " + doc.pages[j].name);
$.writeln(" Page Width : " + (doc.pages[j].bounds[3]-doc.pages[j].bounds[1]) + "\r Page Height : " + (doc.pages[j].bounds[2] - doc.pages[j].bounds[0] ));
}

React window.addeventlistener doesn't work

I am trying to add spotify authentication to the single page application.
Here is my button click handler event.
var CLIENT_ID = '****';
var REDIRECT_URI = window.location.href;
function getLoginURL(scopes) {
return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
'&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
'&scope=' + encodeURIComponent(scopes.join(' ')) +
'&response_type=token';
}
var url = getLoginURL([
'user-read-email',
'user-read-birthdate',
'user-read-private',
'user-library-modify',
'user-library-read',
'user-follow-read',
'user-follow-modify',
'streaming',
'playlist-modify-private',
'playlist-modify-public',
'playlist-read-collaborative',
'playlist-read-private'
]);
var width = 450,
height = 730,
left = (window.screen.width / 2) - (width / 2),
top = (window.screen.height / 2) - (height / 2);
window.open(url,
'Spotify',
'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
);
console.log("window is open");
});
When authentication is performed should will work window.addEventListener('message')
Here is event listener:
componentDidMount() {
window.addEventListener('message', (event) => {
***console.log("Spotify Window sent event data.");
var hash = JSON.parse(event.data);
if (hash.type == 'access_token') {
console.log(hash.access_token);
}
}); }
But it doesn't work. Where is the problem in here? The section marked with *** doesn't even work.
By the way I used this documentation: http://jsfiddle.net/JMPerez/62wafrm7/

It could be possible that, because Spotify is redirecting back to your page, the event is being fired before the component is mounted, which would mean the window isn't listening for it.
I would consider moving your window.addEventListener() code into your index.js file outside of any components.

Set width dynamically in .each - JS

I have a problem in setting width of an element dynamically. I have multiple .each loops and then I append an element which should have calculated width. This is the code I have
$.each(roomsArray, function(index, row) {
$.each(datesArray, function (dateIndex, date) {
$.each(row.calendarList, function(calendarIndex, cal) {
if(cal.roomId == row.id && new Date(cal.dateFrom).toDateString() == new Date(date).toDateString()) {
var cellElements = $(".day[data-date='" + new Date(date).toDateString() + "']");
$.each(cellElements, function (indexElement, element) {
if (element.parentElement.attributes[1].value == cal.roomId) {
var to = new Date(cal.dateTo);
var from = new Date(cal.dateFrom);
//the width should be 44*numOfDays
var numOfDays = Math.ceil((to.getTime() - from.getTime()) / (1000 * 3600 * 24));
console.log(element);
$(element).append(`
//This element needs to take the width
<div id="` + element.attributes[0].value + element.attributes[1].value + `" class="draggable"></div>
`);
//This is just something I tried to do, but it doesnt work.
$('#' + element.attributes[0].value + element.attributes[1].value).css('width', 44 * numOfDays + 'px');
}
});
}
});
})
});
Thanks for help in advance!

Try this fiddle: http://jsfiddle.net/TrrCh/
I think you are trying to run the Javascript before the HTML is loaded. Bind it to the document.ready and it should be working
window.onload=function(){
var elem = document.getElementById('chart');
elem.style.width = 70 + "%";
}

Modifying an X and Y variable, based on position in For Loop

EDIT - I don't think I explained it very well the first time.
I have a lot of data - it's in an Array, with each item in the array being an object. In the system I am working in (a control system for A/V devices, which uses JavaScript as the programming language), I am generating buttons based on the length of the array. I want to be able to position a button, and essentially know the X and Y coordinates for each button in the array - with X and Y being Row/Column. (which I then translate to a X/Y pixel position on my UI.
My initial code, which is below, is within a for loop, and I manually calculated the button position. But this is tedious, as I use this same function to show off different groups/sizes of buttons.
Anywhere there is mirage.log = console.log.
The code below is part of a For Loop
button.element.style.position = 'absolute'; //Do to all Buttons.
if (i == 0) //First Item
{
button.element.style.left = btn_Info.startLeft + 'px'; button.element.style.top = btn_Info.startTop + 'px';
}
else if (i <= btn_Info.numRow-1) //First Column.
{
mirage.log('Setting Position of First Column');
button.element.style.left = btn_Info.startLeft + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * i + btn_Info.startTop + 'px';
}
else if (i > btn_Info.numRow - 1 && i <= btn_Info.numRow * 2 - 1)
{
mirage.log('Setting Second column ' + i);
button.element.style.left = btn_Info.startLeft + btn_Info.width + btn_Info.hOffset + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * (i-btn_Info.numRow) + btn_Info.startTop + 'px';
}
else
{
mirage.log('Setting Third column ' + i);
button.element.style.left = btn_Info.startLeft + ((btn_Info.width + btn_Info.hOffset)*2) + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * (i - (btn_Info.numRow*2)) + btn_Info.startTop + 'px';
}
Thanks in advance for the help - I have grabbed so many answers from this forum over the last year, you guys are awesome!
EDIT -
I was able to get some adjustment if I generate rows first then columns:
I was able to get a little close with the help of a friend, and be able to adjust for a 2 column layout by doing the following:
encoder = {
'buttonVals':{'width':125,'height':50,'numCols':2,'numRows':null;'vOffset':10,'hOffset':10}
var posLeft;
var posTop;
posLeft = (i % encoder.buttonVals.numCols) * (encoder.buttonVals.width + encoder.buttonVals.hOffset) + encoder.buttonVals.startLeft;
posTop = Math.floor(i / encoder.buttonVals.numCols) * (encoder.buttonVals.height + encoder.buttonVals.vOffset) + encoder.buttonVals.startTop;

After working on this for a bit - here is the code that I got to work. This prints out both the row position, and the column position.
testFunction = function(incRow, incCol){
var myFunc = {
'testLength':0,
'numRows':incRow,
'numCols':incCol,
'array':[],
};
myFunc.testLength = incRow * incCol;
for(var c=0, posCol = 0, posRow = 0; c < myFunc.testLength; c++)
{
var whichRow;
posRow = Math.floor(c/myFunc.numRows);
whichRow = Math.floor(c/myFunc.numRows) + c;
if (whichRow > myFunc.numRows)
{
whichRow = whichRow - (myFunc.numRows * posRow) - posRow;
if (whichRow === 0)
{
posCol = posCol + 1;
}
}
console.log(c + ' : ' + whichRow + ' : ' + posCol);
}
};
testFunction(6,4);

Why are my pictures not opening in a separate window?

Heres the Javascript code:
function showCard(linkTarget) {
var propertyWidth = 400;
var propertyHeight = 350;
var winLeft = (screen.width-propertyWidth)/2;
var winTop = (screen.height-propetyHeight)/2;
var winOptions = "toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=no";
winOptions += ",width=" + propertyWidth;
winOptions += ",height=" + propertyHeight;
winOptions += ",left=" + winLeft;
winOptions += ",winTop=" + winTop;
cardWindow = window.open(link.target,"cardInfo", winOptions);
cardWindow.focus();
}
var cardWindow;
href="valentine.jpg" onclick="showCard('valentine.jpg');return false">Valentine's Day
(I removed the tags because the code is not showing up with them)

window.open(link.target...) should be window.open(linkTarget...)
This is causing an error, so the return false; is never reached and the link navigates as normal.

Looks to me like your problem is here:
Your function is declared as:
function showCard(linkTarget)
but you refer to the parameter passed in later in the code with a dot as
cardWindow = window.open(link.target,"cardInfo",winOptions);