Develop Reference

How to dynamically change size of the new window? [duplicate]

This question already has answers here:
How to get the image size (height & width) using JavaScript
(33 answers)
Closed 3 years ago.
I have a JS file connected with my JSP file. I want to show new window with a photo, every time I hit the link.
So far everything is okay, new window appears, but it has strictly specified width and height.
else if (nameClass == "label3"){
var myWindow = window.open("", "MsgWindow", "width=1600, height=1000");
myWindow.document.write("<img src='images/images/szafa.png'>");
}
How can I change that to have a dynamically changed size of the window, depends of the image size?

I have not tested this code but you will get the idea:
var myWindow = window.open("", "MsgWindow", "width=100, height=100, resizable=1, scrollbars=1, menubar=1");
myWindow.document.write(
'<script language="Javascript" type="text/javascript">' +
'function getElById(idVal)' +
'{' +
' if (document.getElementById != null)' +
' return document.getElementById(idVal)' +
' if (document.all != null)' +
' return document.all[idVal]' +
' alert("Problem getting element by id")' +
' return null' +
'}' +
'function resizer()' +
'{' +
' var elem = getElById("pic");' +
' if(elem)' +
' {' +
' var oH = elem.clip ? elem.clip.height : elem.offsetHeight;' +
' var oW = elem.clip ? elem.clip.width : elem.offsetWidth;' +
' window.resizeTo( oW, oH );' +
' var myW = 0, myH = 0, d = window.document.documentElement, b = window.document.body;' +
' if( window.innerWidth ) ' +
' { ' +
' myW = window.innerWidth; ' +
' myH = window.innerHeight; ' +
' }' +
' else if( d && d.clientWidth ) ' +
' { ' +
' myW = d.clientWidth; ' +
' myH = d.clientHeight; ' +
' }' +
' else if( b && b.clientWidth ) ' +
' { ' +
' myW = b.clientWidth; ' +
' myH = b.clientHeight; ' +
' }' +
' window.resizeTo(6+ oW + ( oW - myW ),6+ oH + ( oH - myH ) );' +
' }' +
'}' +
'</script>'
);
myWindow.document.write("<img id='pic' src='images/images/szafa.png'>");
myWindow.document.body.onLoad='resizer';
Or you can prepare a PHP script which will output the above HTML and provide the image name as URL query parameter to the script.

how to draw the line between the points in javascript

i try to plot the line(border right) in a table using javascript code . My code
plotPoints(item,  index) {
var myElement = document.querySelector("#image-" + item + "-" + index);
(id is id = "image-0-4")
var position = this.getPosition(myElement);
console.log("The image is located at: " + position.x + ", " + position.y);
var first = index + 1;
var second = index + 2;
var third = index + 3;
var testDiv1 = document.getElementById("p1-" + item + "-" + first);
var position1 = this.getPosition(testDiv1);
console.log("The image is located at 1: " + position1.x + ", " + position1.y);
var testDiv2 = document.getElementById("p1-" + item + "-" + second);
var position2 = this.getPosition(testDiv2);
console.log("The image is located at 1: " + position2.x + ", " + position2.y);
var testDiv3 = document.getElementById("p1-" + item + "-" + third);
var position3 = this.getPosition(testDiv3);
console.log("The image is located at 1: " + position3.x + ", " + position3.y);
}
getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
I try to plot the line to connect the same number block .Using position function get all the block x and y position.
how to plot the line between the same number block( like number 1 block to connect line each column )

Forge viewer model position after transformation

I've used the Model transformation extension to move the model from one point to another. Now How can I get the new location/coordinates/position of the transformed model or its bounding box as when I query the bounding box min and max points they are the same all the time. Any ideas??
My target is to get the new position of the model according to the origin after translation.

I isolated the core section of that extension and check the position and bounding box before and after transformation. To be simple, only translate. It looks those values are updated after transformation. Could you check if it could help to diagnose your problem?
To test it, select one object and run the function.
getModifiedWorldBoundingBox (fragIds, fragList) {
const fragbBox = new THREE.Box3()
const nodebBox = new THREE.Box3()
fragIds.forEach(function(fragId) {
fragList.getWorldBounds(fragId, fragbBox)
nodebBox.union(fragbBox)
})
return nodebBox
}
$('#test').click(function(rt){
var dbids = NOP_VIEWER.getSelection();
var it = NOP_VIEWER.model.getData().instanceTree;
var fragList = NOP_VIEWER.model.getFragmentList();
fragIds = [];
it.enumNodeFragments(dbids[0], function(fragId) {
fragIds.push(fragId);
}, false);
var bb = getModifiedWorldBoundingBox(fragIds,fragList);
console.log('boundingbox before transform: [max,min]: ' +
bb.max.x + ' ' + bb.max.y + ' ' + bb.max.z + '\n'+
bb.min.x + ' ' + bb.min.y + ' ' + bb.min.z );
fragIds.forEach(function(fragId){
var fragProxy = NOP_VIEWER.impl.getFragmentProxy(
NOP_VIEWER.model,
fragId)
fragProxy.getAnimTransform()
console.log('frag position in LCS before transform:' +
fragProxy.position.x + ','+
fragProxy.position.y + ','+
fragProxy.position.z);
var wcsMatrix = new THREE.Matrix4();
fragProxy.getWorldMatrix(wcsMatrix);
var wcsPos = wcsMatrix.getPosition();
console.log('frag position in wcs matrix before transform: ' +
wcsPos.x + ' ' + wcsPos.y + ' ' + wcsPos.z);
fragProxy.position.x += 10;
fragProxy.position.y += 10;
fragProxy.position.z += 10;
fragProxy.updateAnimTransform()
});
NOP_VIEWER.impl.sceneUpdated(true)
fragIds.forEach(function(fragId){
var fragProxy = NOP_VIEWER.impl.getFragmentProxy(
NOP_VIEWER.model,
fragId)
fragProxy.getAnimTransform()
console.log('frag position in LCS after transform:' +
fragProxy.position.x + ','+
fragProxy.position.y + ','+
fragProxy.position.z);
var wcsMatrix = new THREE.Matrix4();
fragProxy.getWorldMatrix(wcsMatrix);
var wcsPos = wcsMatrix.getPosition();
console.log('frag position in wcs matrix after transform: ' +
wcsPos.x + ' ' + wcsPos.y + ' ' + wcsPos.z);
});
bb = getModifiedWorldBoundingBox(fragIds,fragList);
console.log('boundingbox after transform: [max,min]: ' +
bb.max.x + ' ' + bb.max.y + ' ' + bb.max.z + '\n'+
bb.min.x + ' ' + bb.min.y + ' ' + bb.min.z );
});

Script only working in the console even with document.ready

I have a script that runs on a page. It doesn't work, but when I type it into the console then run it it works perfectly.
This might sound like other questions such as this one, but I already have $(document).ready(). All the variables already defined here have been defined earlier in the document.
$(document).ready(function(){
for (var i = 0; i < posts.length; i++) {
var post_html = posts_html[i];
var link = posts[i];
console.log(i);
name = $(post_html)[5].childNodes[1].innerHTML;
document.getElementsByClassName('posts')[0].innerHTML = document.getElementsByClassName('posts')[0].innerHTML + '<li>' + name + '</li>'
console.log(name + ' - ' + posts + ' - ' + i + ' - ' + posts[i] + ' - ' + link);
}
});

Add setTime out function in your code.please try below code:
$(document).ready(function(){ setTimeout(function(){
for (var i = 0; i < posts.length; i++) {
var post_html = posts_html[i];
var link = posts[i];
console.log(i);
name = $(post_html)[5].childNodes[1].innerHTML;
document.getElementsByClassName('posts')[0].innerHTML = document.getElementsByClassName('posts')[0].innerHTML + '<li>' + name + '</li>'
console.log(name + ' - ' + posts + ' - ' + i + ' - ' + posts[i] + ' - ' + link);
}
},5000);});

window.open parameters as a variable

Within a function I have a line of code that opens a window whilst drawing its parameters either from the functions own parameters (u.n) or variables created within the function.
This works fine in the script.
win2 = window.open(u, n, 'width=' + w + ', height=' + h + ', ' + 'left=' + wleft + ', top=' + wtop + ', ' + tools);
As this is called several other times in the script but as win3, win4 etc. , to reduce code, I wanted to put the parameters, which are the same each time, into a variable and just use that each time.
myparameters = u + ',' + n + ',width=' + w + ', height=' + h + ', ' + 'left=' + wleft + ', top=' + wtop + ', ' + tools;
win3 = window.open(myparameters);
I have tried playing around with this without much luck, can it be done?
Thanks.

Yes you can, to some extent by wrapping it in function call. What I typically do is to have a utility function which I can call upon whenever required.
Something like this:
popOpen: function (url, target, height, width) {
var newWindow, args = "";
args += "height=" + height + ",width=" + width;
args += "dependent=yes,scrollbars=yes,resizable=yes";
newWindow = open(url, target, args);
newWindow.focus();
return newWindow;
}
You can further reduce the parameters by making it an object like:
popOpen: function (params) {
var newWindow, args = "";
args += "height=" + params.height + ",width=" + params.width;
args += "dependent=yes,scrollbars=yes,resizable=yes";
newWindow = open(params.url, params.target, params.args);
newWindow.focus();
return newWindow;
}
And you can call it like this:
var param = { url: '...', height: '...', width: '...' };
popOpen(param);
Or,
var param = new Object;
param.url = '...';
param.height = '...';
popOpen(param);

The way you are trying is not possible. You might want to do this:
var myparameters = 'width=' + w + ', height=' + h + ', ' + 'left=' + wleft + ', top=' + wtop + ', ' + tools;
win3 = window.open(u, n, myparameters);
Fiddle: http://jsfiddle.net/aBR7C/

You are missing some additional parameters in your function call:
var myparameters = 'width=' + w + ', height=' + h + ', ' + 'left=' + wleft + ', top=' + wtop + ', ' + tools;
win3 = window.open(u, n, myparameters);
^ ^ ^
//Here you are passing parameters