window.open parameters as a variable - javascript

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

Related

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.

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);});

Web app to launch google maps directions from link using lat & long

I have found the following link showing how to create links to launch navigation from a web app.
My JS code is:
// Build "ask for directions" url based on browser / OS type
function directionsButton(found) {
if (found) {
// Detect type of device to prepare URL for map directions
switch(true) {
case (/ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase())):
var directionsUrl = 'maps:?saddr=Current Location&daddr=' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
break;
case (/windows phone 7/i.test(navigator.userAgent.toLowerCase())):
var directionsUrl = 'maps:' + $('#address1').val() + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
break;
case (/windows phone 8/i.test(navigator.userAgent.toLowerCase())):
var directionsUrl = 'bingmaps:?where=' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
break;
case (/android/i.test(navigator.userAgent.toLowerCase())):
var directionsUrl = 'geo:' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
break;
case (/blackberry/i.test(navigator.userAgent.toLowerCase())):
var directionsUrl = "javascript:blackberry.launch.newMap({'address':{'address1':'" + $('#address1').val() + ' ' + $('#address2').val() + "','city':'" + $('#city').val() + "','country':'" + $('#country_id option:selected').text() + "','stateProvince':'" + $('#state').val() + "','zipPostal':'" + $('#postcode').val() + "'}})";
break;
default:
var directionsUrl = 'http://maps.google.com?q=' + $('#address1').val() + ' ' + $('#address2').val() + ' ' + $('#city').val() + ' ' + $('#state').val() + ' ' + $('#postcode').val() + ' ' + $('#country_id option:selected').text();
}
$('#directions-button').attr('href', directionsUrl);
$('#directions-button').prop('disabled', false);
} else {
$('#directions-button').attr('href', '#');
$('#directions-button').prop('disabled', true);
}
}
I call the above function after the Google Map resolves the address like so (for successful map address geocoding):
directionsButton(true);
I would like to achieve the above for each browser / OS but using lat/long instead of address. I cannot to find the url structure examples for this.
thank you for any help.
First, most of your code only shows the location on the map, not the navigation to that location. I've changed this in the code below.
Now to your question.
The following isn't tested on all the devises, but is according to the respective documentation.
It assumes you have an input with id="lat" and one with id="lng":
// Build "ask for directions" url based on browser / OS type
function directionsButton(found) {
if (found) {
// Detect type of device to prepare URL for map directions
switch(true) {
case (/ipad|iphone|ipod/i.test(navigator.userAgent.toLowerCase())):
var directionsUrl = 'https://maps.google.com/?saddr=Current+Location&daddr=loc:' + $('#lat').val() + ',' + $('#lng').val();
break;
case (/windows phone 7/i.test(navigator.userAgent.toLowerCase())):
var directionsUrl = 'maps:' + $('#lat').val() + ',' + $('#lng').val();
break;
case (/windows phone 8/i.test(navigator.userAgent.toLowerCase())):
var directionsUrl = 'ms-drive-to:?destination.latitude=' + $('#lat').val() + '&destination.longitude=' + $('#lng').val();
break;
case (/android/i.test(navigator.userAgent.toLowerCase())):
var directionsUrl = 'google.navigation:q=' + $('#lat').val() + ',' + $('#lng').val();
break;
case (/blackberry/i.test(navigator.userAgent.toLowerCase())):
var directionsUrl = "javascript:blackberry.launch.newMap({'nav_end':{'latitude':" + $('#lat').val() + ",'longitude':" + $('#lng').val() + "}})";
break;
default:
var directionsUrl = 'https://maps.google.com?daddr=loc:' + $('#lat').val() + ',' + $('#lng').val();
}
$('#directions-button').attr('href', directionsUrl);
$('#directions-button').prop('disabled', false);
} else {
$('#directions-button').attr('href', '#');
$('#directions-button').prop('disabled', true);
}
}
Documentation used:
Blackberry:
https://developer.blackberry.com/native/documentation/device_platform/invocation/maps.html
iOS: https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html
Windows Phone 8: https : //msdn.microsoft.com/en-us/windows/uwp/launch-resume/launch-maps-app (I need a reputation of 10 to post more than 2 links)
For Windows Phone 7 I can't find the documentation anymore, it's old code. Android and desktop (default:) are tested.

Multiple PopUp Window

I am working on a webpage that involves interactive media opening in different popup windows. I want the focus to go to the newest window when it opens. I am having trouble keeping all of my pop up windows open at once. When the next window opens, the previous closes.
Here is the code
First window:
<script language="javascript">
function popup(url) {
var width = 300;
var height = 300;
var left = 200;
var top = 100;
var params = 'width=' + width + ', height=' + height;
params += ', top=' + top + ', left=' + left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
win1 = window.open(url, "laser", params);
if (window.focus) {
win1.focus()
}
return false;
}
setTimeout(function() {popup('laser.html');}, 10000)
</script>
Second Window:
<script language="javascript">
function popup(url) {
var width = 300;
var height = 300;
var left = 500;
var top = 300;
var params = 'width=' + width + ', height=' + height;
params += ', top=' + top + ', left=' + left;
params += ', directories=no';
params += ', location=no';
params += ', menubar=no';
params += ', resizable=no';
params += ', scrollbars=no';
params += ', status=no';
params += ', toolbar=no';
win2 = window.open(url, "fire", params);
if (window.focus) {
win2.focus()
}
return false;
}
setTimeout(function() {popup('fire.html');}, 13000)
</script>

Categories

Resources