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.
Related
I was trying to make a notification with line notify but I dont know how to insert a command that puts a link from my google sheet to the message of the notification
// Line Notify
function onFormSubmit() {
var form = FormApp.openById('1ELczQ-uW1mauQrHFBpHK2pQnCCkvPf_4Nq-DPqM4nMw');
var fRes = form.getResponses();
var formResponse = fRes[fRes.length - 1];
var itemResponses = formResponse.getItemResponses();
var link = shape.getLink();
if (link != null && link.getLinkType() == SlidesApp.LinkType.URL) {
Logger.log('Shape has link to URL: ' + link.getUrl());
}
var msg = 'Electric Forklift Incentive'
+ ' \n' + itemResponses[5].getItem().getTitle() + ': ' + itemResponses[5].getResponse()
+ ' \n' + itemResponses[0].getItem().getTitle() + ': ' + itemResponses[0].getResponse()
+ ' \n' + itemResponses[1].getItem().getTitle() + ': ' + itemResponses[1].getResponse()
+ ' \n' + itemResponses[2].getItem().getTitle() + ': ' + itemResponses[2].getResponse()
+ ' \n' + itemResponses[3].getItem().getTitle() + ': ' + itemResponses[3].getResponse()
+ ' \n' + itemResponses[4].getItem().getTitle() + ': ' + itemResponses[4].getResponse()
+ ' \n' + itemResponses[4].getItem().getTitle() + ': ' + itemResponses[4].getResponse()
sendLineNotify(msg);
}
function sendLineNotify(message) {
var token = ["DdiU5tUykpSRpxRVqmEnM7ul3hcE3NEvc6Vzwknyzo7"];
var options = {
"method": "post",
"payload": "message=" + message,
"headers": {
"Authorization": "Bearer " + token
}
};
UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
}
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 );
});
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.
I'm doing a query on Yahoo finance xchange, but seems the time of update is not the most updated. Seems random, for each refresh, this value change, sometimes most updated, and sometimes less updated.
There is a way to always get the last time it was updated ?
Thank you.
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDUSD%22%2C%22USDEUR%22%2C%20%22USDJPY%22%2C%20%22USDCNY%22%2C%20%22USDGBP%22%2C%20%22USDBRL%22%2C%20%22EUREUR%22%20%2C%22EURUSD%22%2C%20%22EURJPY%22%2C%20%22EURCNY%22%2C%20%22EURGBP%22%2C%20%22EURBRL%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=", function (data) {
var indices = '<p style=\"border:1px solid #ccc; width:auto; padding:0 10px; background:#ddd;\"><strong>' + data.query.results.rate[0].Name + '</strong> ' + money(data.query.results.rate[0].Rate) + '</p>' +
'<p><strong>' + data.query.results.rate[1].Name + '</strong> (Fechamento ' + money(data.query.results.rate[1].Rate) + ') - ' + data.query.results.rate[1].Date + ' - ' + data.query.results.rate[1].Time + '</p>' +
'<p><strong>' + data.query.results.rate[2].Name + '</strong> (Fechamento ' + money(data.query.results.rate[2].Rate) + ') - ' + data.query.results.rate[2].Date + ' - ' + data.query.results.rate[2].Time + '</p>' +
'<p><strong>' + data.query.results.rate[3].Name + '</strong> (Fechamento ' + money(data.query.results.rate[3].Rate) + ') - ' + data.query.results.rate[3].Date + ' - ' + data.query.results.rate[3].Time + '</p>' +
'<p><strong>' + data.query.results.rate[4].Name + '</strong> (Fechamento ' + money(data.query.results.rate[4].Rate) + ') - ' + data.query.results.rate[4].Date + ' - ' + data.query.results.rate[4].Time + '</p>' +
'<p><strong>' + data.query.results.rate[5].Name + '</strong> (Fechamento ' + money(data.query.results.rate[5].Rate) + ') - ' + data.query.results.rate[5].Date + ' - ' + data.query.results.rate[5].Time + '</p>' +
'<p style=\"border:1px solid #ccc; width:auto; margin:20px 0 0; padding:0 10px; background:#ddd;\"><strong>' + data.query.results.rate[6].Name + '</strong> ' + money(data.query.results.rate[6].Rate) + '</p>' +
'<p><strong>' + data.query.results.rate[8].Name + '</strong> (Fechamento ' + money(data.query.results.rate[8].Rate) + ') - ' + data.query.results.rate[8].Date + ' - ' + data.query.results.rate[8].Time + '</p>' +
'<p><strong>' + data.query.results.rate[7].Name + '</strong> (Fechamento ' + money(data.query.results.rate[7].Rate) + ') - ' + data.query.results.rate[7].Date + ' - ' + data.query.results.rate[7].Time + '</p>' +
'<p><strong>' + data.query.results.rate[9].Name + '</strong> (Fechamento ' + money(data.query.results.rate[9].Rate) + ') - ' + data.query.results.rate[9].Date + ' - ' + data.query.results.rate[9].Time + '</p>' +
'<p><strong>' + data.query.results.rate[10].Name + '</strong> (Fechamento ' + money(data.query.results.rate[10].Rate) + ') - ' + data.query.results.rate[10].Date + ' - ' + data.query.results.rate[10].Time + '</p>' +
'<p><strong>' + data.query.results.rate[11].Name + '</strong> (Fechamento ' + money(data.query.results.rate[11].Rate) + ') - ' + data.query.results.rate[11].Date + ' - ' + data.query.results.rate[11].Time + '</p>';
$('#info').html(indices);
});
money = function (n) {
var
c = 4,
d = ',',
t = '.',
s = n < 0 ? "-" : "",
i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
};
Well, I ended up constructing a date for each element in the array (map) and then filtering them to the oldest date (reduce)
what do you want to do with this date, I am not sure but here it is...
UPDATED
updated to return full JSON record containing the latest date/time stamp (instead of returning only the latest date)
// sample response
var response = {"query":{"count":12,"created":"2016-04-29T20:13:39Z","lang":"en-us","results":{"rate":[{"id":"USDUSD","Name":"USD/USD","Rate":"1.0000","Date":"N/A","Time":"N/A","Ask":"1.0000","Bid":"1.0000"},
{"id":"USDEUR","Name":"USD/EUR","Rate":"0.8775","Date":"4/29/2016", "Time":"12:38pm","Ask":"0.8777","Bid":"0.8775"},{"id":"USDJPY","Name":"USD/JPY","Rate":"107.3910","Date":"4/29/2016","Time": "2:55pm","Ask":"107.3940","Bid":"107.3910"},{"id":"USDCNY","Name":"USD/CNY","Rate":"6.4868","Date":"4/29/2016","Time":"12:49pm","Ask":"6.4878","Bid":"6.4868"},{"id":"USDGBP","Name":"USD/GBP","Rate":"0.6843","Date":"4/29/2016","Time":"1:15pm","Ask":"0.6844","Bid":"0.6843"},{"id":"USDBRL","Name":"USD/BRL","Rate":"3.4492","Date":"4/29/2016","Time":"3:33pm","Ask":"3.4496","Bid":"3.4492"},{"id":"EUREUR","Name":"EUR/EUR","Rate":"1.0000","Date":"1/29/2016","Time":"8:26am","Ask":"1.0002","Bid":"0.9998"},{"id":"EURUSD","Name":"EUR/USD","Rate":"1.1443","Date":"4/29/2016","Time":"3:08pm","Ask":"1.1443","Bid":"1.1443"},{"id":"EURJPY","Name":"EUR/JPY","Rate":"122.5650","Date":"4/29/2016","Time":"4:00pm","Ask":"122.6200","Bid":"122.5100"},{"id":"EURCNY","Name":"EUR/CNY","Rate":"7.4054","Date":"4/29/2016","Time":"2:08pm","Ask":"7.4070","Bid":"7.4037"},{"id":"EURGBP","Name":"EUR/GBP","Rate":"0.7836","Date":"4/29/2016","Time":"3:22pm","Ask":"0.7837","Bid":"0.7836"},{"id":"EURBRL","Name":"EUR/BRL","Rate":"3.9637","Date":"4/29/2016","Time":"4:28pm","Ask":"3.9679","Bid":"3.9595"}]}}};
//console.log(response.query.results.rate);
var times = response.query.results.rate.map(function(elem){
if( elem.Time === 'N/A' || elem.Time === 0){
elem.fullDateTimeStamp = elem.Time;
//console.log(elem);
return elem;
}
// create full date from the time (using time and date combined)
// 1) is it AM or PM
var elemIsPm = (elem.Time.substring(elem.Time.length-2).indexOf("am") == -1);
// 2) remove AM/PM and get hour:min into array
var elemArr = elem.Time.substring(0, elem.Time.length-2).split(":");
// 3) add 12 hours if PM and not noon
if( elemIsPm && elemArr[0] != 12){
elemArr[0] = parseInt(elemArr[0]) + 12;
}
//console.log(elemArr[0]);
// 4) however, if it is 12, we deduct 12 if it's not PM
if( elemArr[0] == 12 && !elemIsPm ){
elemArr[0] = elemArr[0] - 12;
}
// 5) create date object
var elemDateString = elem.Date;
var elemDateOnly = new Date(elemDateString);
//console.log(elemDateOnly);
var elemTS = new Date(elemDateOnly.getFullYear(), elemDateOnly.getMonth(), elemDateOnly.getDate(), elemArr[0], elemArr[1], 0, 0);
elem.fullDateTimeStamp = elemTS;
// console.log(elem);
// 4) return
return elem;
});
console.log( times );
var lastOne = times.reduce(function(prevVal, elem) {
// console.log('p');
// console.log(prevVal );
// console.log('e');
// console.log(elem );
if( prevVal === 'N/A' || prevVal === 0 || prevVal.Time){
return elem;
}
//console.log(prevVal.fullDateTimeStamp);
return (prevVal.fullDateTimeStamp < elem.fullDateTimeStamp)? elem : prevVal;
}, 0);
document.getElementById('latest').innerHTML = JSON.stringify(lastOne);
console.log('====> ');
console.log( JSON.stringify(lastOne.fullDateTimeStamp) );
Last date:
<div id='latest'></div>
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