How to control the size of pop-up window? - javascript

I used the following js to pop-up a new window from original window:
oWin = window.open("PServlet?module=LoginHandler","_blank",
"directories=no,location=no,menubar=no,resizable=yes,status=yes,titlebar=yes,toolbar=no",
false);
As you can see, I did not set the size or location of new window, But my test results is that the size of pop-up windows on every time was shown irregularly from the same size of original window, sometimes it is half, sometime it is full screen or partial size.
Everybody know what is reason?
If I wouldn't change the JS, how can I let the pop-up window to be displayed in full screen in every times.

http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
function mypopup()
{
mywindow = window.open("http://www.javascript-coder.com", "mywindow", "location=1,status=1,scrollbars=1, width=100,height=100");
mywindow.moveTo(0, 0);
}
For fullscreen, see here: http://javascript-array.com/scripts/window_open/
function popup(url)
{
params = 'width='+screen.width;
params += ', height='+screen.height;
params += ', top=0, left=0'
params += ', fullscreen=yes';
newwin=window.open(url,'windowname4', params);
if (window.focus) {newwin.focus()}
return false;
}

Related

How can I fill up the paper during printing? Is it possible to fill the entire page with this image?

I am using html2canvas to capture a div on my Calendar and open the image on a new window,then print it.
But on the print preview,the image is not filling up the paper.There are always blanks up, down, left and right, I want it to fill the page.
This is set to "Fit to page width":
And scale 100% is worse:
Here is my code:
function printCalendar(){
var printMaxWidth = "1420px";
var printMaxHeight = "890px";
//Create the option to open a window
var option = 'width=' + printMaxWidth + ',height=' + printMaxHeight;
var calendartPrintWindow = window.open("", "", option);
//Open the document of the window
calendartPrintWindow.document.open();
//Html2canvas
html2canvas(document.querySelector("#calendarContainer")).then(canvas => {
//Insert the created html document inside it
calendartPrintWindow.document.write('<img src="'+canvas.toDataURL()+'"/>');
//Close the document the window
calendartPrintWindow.document.close();
//Print
setTimeout(function(){calendartPrintWindow.print();},100);});
}
"Fit to page width" looks good but it will be great when the image can fill the entire page.Is there and Ideas?Thanks.

Getting the Window Height of an Embedded Tableau Dashboard

After my dashboard initializes and is fully loaded, I need to get the window height of the embed inside the iframe. Ideally, I'd like to get innerHeight inside of onFirstInteractive, but am unable to do so.
function initViz() {
var containerDiv = document.getElementById("vizContainer");
var url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms";
var options = {
onFirstInteractive: function() {
// How do I get the height of the rendered contents?
}
};
var viz = new tableau.Viz(containerDiv, url, options);
}
Subscribe to the VIZ_RESIZE event, it provides the new dimensions of the iframe on initialization and resize:
viz.addEventListener(tableau.TableauEventName.VIZ_RESIZE, function(event) {
console.log(event.getAvailableSize());
});
Which gives the following:
When the iframe appears like this:
If you absolutely want to retrieve the information in onFirstInteractive, you can do this:
onFirstInteractive: function(viz) {
const iframeStyle = viz.$1._impl.$1h.style;
const { height, width } = iframeStyle;
console.log({ height, width });
}
But it's a little bit hacky because this solution uses properties that are not supposed to be public, so this kind of code may break on future Tableau JS library updates.

Get offsetHeight after manipulating DOM

I wrote the following code:
var image_pinch_help = document.getElementById("image_pinch_help");
var pinch_img_el = document.getElementById("pinch_img_el");
function openImage(img_url) {
pinch_img_el.src = img_url;
if (pinch_img_el.complete) {
IMGloaded();
}
else {
pinch_img_el.addEventListener('load', IMGloaded())
pinch_img_el.addEventListener('error', function() {
alert('error')
});
}
image_pinch_help.style.display = "block";
document.getElementById("pinch_values").setAttribute("content", "");
}
function IMGloaded() {
var screen_height = window.screen.height;
console.log("HERE IS THE HEIGHT: " + screen_height);
var img_height = pinch_img_el.offsetHeight;
console.log("HERE IS THE IMAGE: " + img_height);
}
The code starts at the function openImage(). This function is called to open an Image at my webpage. So the image gets the full width of the screen. The screen where the image is shown on is image_pinch_help. You see that I make this screen visible. To allow the user to zoom into the image I am manipulation the HTML DOM, that the user can scroll at the whole page. I do this here: document.getElementById("pinch_values").setAttribute("content", "");.
When the Image loaded I need to get the height of the screen, which works perfectly. But I also need to get the height of the loaded image. The problem is that its always returning an empty string. I read a long time ago that this could be caused by HTML DOM Manipulations.
But how to fix this disaster?
~Marcus

open new windows in javascript

hi how to use javascriptscript to open a new window and then closing the current window..
currently, i can only open a new window, however my current window is still left open.
Code:
function newfunction()
{
window.open("index.html", "myWindow", "status = 1, height = 300, width = 300, resizable = 0");
}
Opening a new window and closing the old one sounds very much like changing the current page to me. Use location.href = 'newurl'.
And if you want to change its size and so on, that can also be done.
window.innerWidth = 300;
window.innerHeight = 300;
location.href = 'newurl';
use like you said window.open and then in the main window window.close(). But if you use like this, the browser will ask you "This website wants to close this window blabla".
add window.opener.close();
function newfunction()
{
window.open("index.html", "myWindow", "status = 1, height = 300, width = 300, resizable = 0");
window.opener.close();
}
or add this on the index.html file whenever a new window open it will close the parent window
<body onload="window.opener.close()">
Here is the code you need:
function newfunction()
{
window.open("index.html", "myWindow", "status = 1, height = 300, width = 300, resizable = 0");
window.close();
}
This will work only if the current window was opened via script as well, otherwise IE show warning dialog and other browsers might simply ignore it.

Google Maps: Dynamically resize infowindow

How do I resize the info window once it's opened? I have a hyperlink inside the window which generates an AJAX-request; on the callback I would like to resize the info window.
Check out the following. What happens is that i create an initial info window with minimal
info (see getInfoWindowHtml). The gmap.openInfoWindowHtml call provides for a callback which gets called after the infowindow opens. In that callback, make your ajax call and reset the window contents. There are two issues though:
i couldnt get the window to resize exactly to the returned content, so i just used a standard size (see the new GSize(300, 150) in the anonymous function returned by markerClickFn)
Im my case, if a marker is near the extremes of the image bounds, parts of the info window would be clipped. IOW, the map does not recenter to include the infowindow. I can probably fix this, but it has not been a pressing issue.
function markerClickFn(venue, latlng) {
return function() {
var title = venue.Name;
var infoHtml = getInfoWindowHtml(venue);
// need to zoom in
gmap.setZoom(13);
gmap.openInfoWindowHtml(latlng, infoHtml,
{
onOpenFn: function() {
var iw = gmap.getInfoWindow();
iw.reset(iw.getPoint(), iw.getTabs(), new GSize(300, 150), null, null);
$("#info-" + venue.Id.toString()).load("/Venue/MapInfoWindow/" + venue.Id);
}
}
);
};
}
function getSidebarHtml(venue) {
var url = "/Venue/Details/" + venue.Id; // actually should bring up infowindow
var html = "<li id='venue-" + venue.Id + "'>\n";
html = html + venue.Name + "\n";
//html = html + "<p class='description'>" + trunc(venue.Description, 200) + "</p>\n";
html = html + "</li>";
return html;
}
function getInfoWindowHtml(venue) {
var url = "/Venue/Details/" + venue.Id; // actually should bring up infowindow
var html = "<div id='info-" + venue.Id + "'><a href='" + url + "' class='url summary'>" + venue.Name + "</a></div>\n";
return html;
}
function addVenueMarker(venue) {
var icon = new GIcon(G_DEFAULT_ICON);
icon.image = "http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png";
var latLng = new GLatLng(venue.Lat, venue.Lng);
var marker = new GMarker(latLng, { icon: icon });
var fn = markerClickFn(venue, latLng);
GEvent.addListener(marker, "click", fn);
marker.event_ = venue;
marker.click_ = fn;
venue.marker_ = marker;
markers.push(marker);
return marker;
}
It looks like the only solution I found to resize the InfoWindow dynamically is to call the InfoWindow's setContent method. You'll need to pass in the HTML node or the HTML string. This basically redraws the InfoWindow. What it essentially does is close the current one and opens a new one. So, it'll see a flicker during the reloading of the content. This kind of sucks. It seems that Google deprecated their v2 API and made things really hard to do in the newer version. I think Google has hired a bunch of Sun Java developers across the street in Silicon Valley and they guys don't know how to provide simple to use API's like the Microsoft camp. Really frustrating!
It isn't possible to animate the resize of the info window, but there is a reset function. The documentation says that you can leave any parameter null, but if you leave the 'size' parameter null, you'll get an error. This means that you have to specify the size of the InfoWindow.
However, since that ruins the original point of dynamically resizing the window, I would strongly recommend simply closing the original info window and creating a new one - which is what the reset function will appear to do anyhow.

Categories