Develop Reference

InDesign CC 2019 | Getting page dimensions (pageWidth and pageHeight), not document dimensions with JSX?

I have a document in InDesign with a spread of pages with different width-dimensions. Now i want to add vertical guidelines with a JS-Script. Therefore i have to add pageWidth + pageWidth (of a specific page).
But i only know how to get the document dimensions (pageHeight and pageWidth. But i have different pages, and obviously different dimensions.
var pageWidth = app.activeDocument.documentPreferences.pageWidth
will give me the document page width
but i need something like this (fiction)
var pageWidth = app.activeDocument.pages[0].documentPreferences.pageWidth
Thanks for your help

main();
function main() {
var doc = app.activeDocument;
var page = doc.pages[0];
var bounds = page.bounds;
var width = RoundWithDecimal(bounds[3] - bounds[1], 3);
var height = RoundWithDecimal(bounds[2] - bounds[0], 3);
}
function RoundWithDecimal(number, decimals){
var multiplier = Math.pow(10,decimals);
return Math.round(number*multiplier)/multiplier;
}
Found the answer:

Straight Reload/Refresh of DIV Contents on Window Resize Using

I'm adding Amazon Affiliate banners to my website, but because the banner code isn't responsive, the larger size banners break out of my container in the smaller sizes. I've created the following code so that when the page initially loads, it will load an appropriate sized banner in the correct space. However, I would like to set it so that when the browser window is resized, the DIV containing the banner code (bannerdiv) is refreshed and the script is re-executed.
I'm a novice at this, so your patience and idiot-simple instructions will be appreciated. I'm also sure this code is written in a painfully clunky manner.
NOTE: I've updated the code per suggestions in the comments, but it's still not working. Any suggestions?
<script type='text/javascript'>
function loadBanners() {
function lrgBanner() {
amzn_assoc_ad_type = 'banner';
amzn_assoc_tracking_id = 'livcouintheci-20';
amzn_assoc_marketplace = 'amazon';
amzn_assoc_region = 'US';
amzn_assoc_placement = 'assoc_banner_placement_default';
amzn_assoc_linkid = 'AC2XN3SJ34RJMGYK';
amzn_assoc_campaigns = 'outdoorrecreation';
amzn_assoc_p = '48';
amzn_assoc_banner_type = 'category';
amzn_assoc_isresponsive = 'false';
amzn_assoc_banner_id = '1XTRE8BRWXGWQJTWPJ82';
amzn_assoc_width = '728';
amzn_assoc_height = '90';
}
function medBanner() {
amzn_assoc_ad_type = 'banner';
amzn_assoc_tracking_id = 'livcouintheci-20';
amzn_assoc_marketplace = 'amazon';
amzn_assoc_region = 'US';
amzn_assoc_placement = 'assoc_banner_placement_default';
amzn_assoc_linkid = 'OTLU2UB6UY5JMUHP';
amzn_assoc_campaigns = 'outdoorrecreation';
amzn_assoc_p = '26';
amzn_assoc_banner_type = 'category';
amzn_assoc_isresponsive = 'false';
amzn_assoc_banner_id = '0CDY3FGJ2PD68NJXFKG2';
amzn_assoc_width = '468';
amzn_assoc_height = '60';
}
function smlBanner() {
amzn_assoc_ad_type = 'banner';
amzn_assoc_tracking_id = 'livcouintheci-20';
amzn_assoc_marketplace = 'amazon';
amzn_assoc_region = 'US';
amzn_assoc_placement = 'assoc_banner_placement_default';
amzn_assoc_linkid = 'G7YQZ5D43772NXLC';
amzn_assoc_campaigns = 'outdoorrecreation';
amzn_assoc_p = '42';
amzn_assoc_banner_type = 'category';
amzn_assoc_isresponsive = 'false';
amzn_assoc_banner_id = '1VHGPZ2J9GDJGYKD5G82';
amzn_assoc_width = '234';
amzn_assoc_height = '60';
}
var winwidth = window.innerWidth;
if (winwidth >= 1200) {
lrgBanner();
} else if (winwidth < 980 && winwidth >= 920) {
lrgBanner();
} else if (winwidth >=980 && winwidth < 1200) {
medBanner();
} else if (winwidth >= 600 && winwidth < 920) {
medBanner();
} else {
smlBanner();
}
}
loadBanners();
</script>
<div id="bannerdiv">
<script id="bannerscript" src='//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1'></script>
</div>
<script type="text/javascript">
function amznScript() {
var banDiv = document.getElementById('bannerdiv');
var oldScript = document.getElementById('bannerscript');
var newScript = document.createElement('script')
newScript.type = 'text/javascript';
newScript.src = '//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1';
newScript.id = 'bannerscript'
banDiv.replaceChild(newScript,oldScript);
}
</script>
<script type="text/javascript">
function adBanner() {
loadBanners();
amznScript();
}
window.addEventListener("resize", adBanner);
</script>

Found something related to Amazon banners here:
Amazon Associates Site

I don't have experience with this particular library, but I'll share some thoughts just looking at your code:
Do the docs say the numeric variable settings need to be strings or numbers? (amzn_assoc_width, amzn_assoc_height, etc). Usually, number should be without the quotes (amzn_assoc_width = 234 instead of amzn_assoc_width = '234')
Take the lrgBanner, medBanner, and smlBanner functions OUT of the loadBanners function. You have them defined inside of it. loadBanners will work fine with them outside.
Because you're defining the variables inside of functions, they may not be getting set where the Amazon script can see them (the global space). In your browser, after the page loads, open the browser console and type in the name of any of the variables in the console and it will output whatever the variable is set to. If it outputs undefined, either you're doing something wrong in the console or the variables aren't being set in the global space. Additionally, try typing window.variableName in the console to double check.
Related to the previous bullet, try prefixing all the variable definitions in your functions with window. to explicitly set them in the global space, which is where the Amazon script is probably expecting to find them.

If you can't use responsive banners for your category, try just dynamically loading the banners using the iframe banners. Here's an example using jQuery
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script language="javascript">
$(window).on('load resize', function() {
winWidth = $(window).width();
if ( winWidth >= 1200) {
$('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=48&l=ur1&category=home&banner=1T8X6QB60F8G26A33RG2&f=ifr&linkID=WHAOQICV37C7EWOX','width':'728','height':'90'})
} else if (winWidth >= 600 && winWidth < 1200) {
$('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=26&l=ur1&category=home&banner=017THAMGVS89AQ891982&f=ifr&linkID=5ORSSCSEHTUJ6JZS','width':'468','height':'60'})
} else {
$('#myBanner').attr({'src':'http://rcm-na.amazon-adsystem.com/e/cm?t=codedemo-20&o=1&p=42&l=ur1&category=home&banner=1VCFP7EH9H4CBCD6ADR2&f=ifr&linkID=IHZPNRGMTYWEIYAS','width':'234','height':'60'})
}
});
</script>
</head>
<body>
<iframe id="myBanner" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
</body>
Using a blank iframe for the initial load helps to prevent the banner from changing while the page is loading.
Hope that helps!

HighCharts: How to use reflow to allow auto-resize after changing size

In our Angular app we're using highcarts-ng for our HighCharts implementation.
Here is the Chart Maximize and Minimize function, which works:
function expandChartPanel() {
vm.chartMaxed = !vm.chartMaxed;
viewHeader = ScopeFactory.getScope('viewHeader');
highChart = ScopeFactory.getScope('highChart');
var chart = highChart.chartObject;
var highChartContainer = document.getElementById("highchart-container");
var highChartContainerWidth = document.getElementById('highchart-container').clientWidth;
var highChartContainerHeight = document.getElementById('highchart-container').clientHeight;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
if (vm.chartMaxed) {
vs.savedWidth = highChartContainerWidth;
vs.savedHeight = highChartContainerHeight;
console.log('savedWidth = ', vs.savedWidth);
console.log('savedHeight = ', vs.savedHeight);
root.chartExpanded = true;
viewHeader.vh.chartExpanded = true;
highChart.highChartMax = true;
highChartContainerHeight = document.getElementById('highchart-container').clientHeight;
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
highChart.chartConfig.size.width = windowWidth;
highChart.chartConfig.size.height = windowHeight - 220;
chart.setSize(windowWidth, windowHeight - 220);
}
else {
root.chartExpanded = false;
viewHeader.vh.chartExpanded = false;
highChart.highChartMax = false;
highChart.chartConfig.size.width = vs.savedWidth;
highChart.chartConfig.size.height = vs.savedHeight;
chart.setSize(vs.savedWidth, vs.savedHeight);
}
highChart.restoreChartSize();
}
Here is the reflow function:
function restoreChartSize() {
console.log('restoreChartSize');
if (!vs.chartObject.reflowNow) {
vs.chartObject.reflowNow = vs.chartObject.reflowNow = function() {
this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height');
this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width');
this.setSize(this.containerWidth, this.containerHeight, true);
this.hasUserSize = null;
}
}
vs.chartObject.reflowNow();
}
This reflow function above, works perfectly in this jsFiddle, but not in our app.
The full Gist file of our HighChartsDirective file.
After clicking Maximize, the chart will expand to the full size of the browser window, but then after dragging to resize the browser window, I call the restoreChartSize function, which activates the reflow.
However the size of the chart does not go to auto-size 100% 100%, it goes back to the previous size of the chart :(
Before Maximize:
After the Maximize function:
Now after resizing the browser window:
window.onresize = function(event) {
console.log('window resizing...');
highChart = ScopeFactory.getScope('highChart');
highChart.restoreChartSize();
console.log('highChart.chartConfig = ', highChart.chartConfig);
};
^ back to the smaller static sizes, not auto-size 100%

You can do this by adding a new method to chart that will manually trigger the reflow like so:
chart.reflowNow = function(){
this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height');
this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width');
this.setSize(this.containerWidth, this.containerHeight, false);
this.hasUserSize = null;
}
Then whenever you want to get away from manual resizing using setSize() just call chart.reflow()
Here's an working example: jsFiddle
Reference taken from: github-issue
UPDATE for ng-highcharts users
For doing this when using ng-highcharts library, you can simply pull out the chart object in the controller that has highcharts-ng dependency and add the reflowNow function, like so:
var chart = this.chartConfig.getHighcharts();
chart.reflowreflowNow = function (){ ... }
This is also the recommended way to pull out chart to do custom jobs by author of ng-highcharts as noted here and this fiddle.

I ended up finding an alternative solution to be the only thing I could get working, and it actually was pretty simple and straight forward to do. In case anyone else is looking for a fix for this, here's links to the resources that were useful and solved the issue for me.
You can simply add this to your chart config object, at the same level as the config.series or config.options. The comment references info but the actual solution that worked for me uses $timeout with 0 seconds, here
*For using highcharts-ng obviously
http://plnkr.co/edit/14x7gfQAlHw12XZVhWm0?p=preview
$scope.chartConfigObject = {
// function to trigger reflow in bootstrap containers
// see: http://jsfiddle.net/pgbc988d/ and https://github.com/pablojim/highcharts-ng/issues/211
func: function(chart) {
$timeout(function() {
chart.reflow();
//The below is an event that will trigger all instances of charts to reflow
//$scope.$broadcast('highchartsng.reflow');
}, 0);
}
};

How to replace screen.width value with my own defined value?

How to replace screen.width value with my own defined value?
I want to define a fake screen.width:
var screen.width = 1024;
in <head>
So that when the below code loads it will always display = <h1>test 2</h1> in any screen.width
I am using the following the code:
<script type="text/javascript">
if (screen.width>=1400)
{
document.write('<h1>test 1</h1>');
}else
{
document.write('<h1>test 2</h1>');
}
</script>
Hope I am clear to explain my issue.

Just for fun, you could make screen's properties mutable like this:
var tempScreen = {};
for (var obj in screen)
tempScreen[obj] = screen[obj];
tempScreen.__proto__ = screen.__proto__;
screen = tempScreen;
screen.width = 400;
console.log(screen.width); // -> 400

How would use javascript to open an image in a separate window after I resize it?

This is the code that I have to re-size the image for me. What I don't know how to do is have the code open the image after it has been re-sized.
So what I wish for it to is is
Resize the image(It is already doing this).
Once image is re-sized, open it in a separate window
This is the code that re-sizes the image for me.
function resize(which, max) {
var elem = document.getElementById(which);
if (elem == undefined || elem == null) return false;
if (max == undefined) max = 1024;
if (elem.width > elem.height) {
elem.width = max;
elem.height = 768;
}
}

That code does not actually resize the picture, it just changes how it is displayed. If the image is downloaded or opened in a separate window, it will be the dimensions of the original image. I don't think there is any way of modifying the image through JavaScript.
What you could do, though, is find a program that can do that for you and call that through an Ajax call. For example, I think the Gimp can handle that, and if you can call that from a PHP script, then you can call that PHP script through an Ajax call and display that. It's kind of a complicated solution but that's the best I can think of.

As tjameson pointed out, JavaScript doesn't really resize your image.
If you want to take this image to a new window, here is a way to do it:
var im = document.getElementsByTagName('img')[0];
var w = window.open("");
var b = w.document.body;
b.appendChild(im);
You can apply the resize function on this image if you want it displayed resized.

I appended the needed code to the initial resize function
function resize(which, max)
{
var elem = document.getElementById(which);
if (elem == undefined || elem == null) return false;
if (max == undefined) max = 1024;
if (elem.width > elem.height)
{
elem.width = max;
elem.height = 768;
}
var f = window.open("", "_blank", "height=500, width=600,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10");
f.document.title = elem.alt;
f.document.body.innerHTML += '<img src="'+elem.src+'" height="'+elem.height+'" width="'+elem.width+'" alt="'+elem.alt+'">';
}