I'm working with Phonegap on a mobile device. And its issues and bugs are too much to solve. One of them is:
window.open('new_window.html','well','width=300,height=200');
(I have already created a new_window.html under assets/www/.)
it appears a full screen window, and of course. If I set scroll bar option is true, it's still no use. The system is like a dummy.
I have searched the solution for several days, trying use iframe/frame to replace it. But they are not appropriate or no use. In my development environment, I just want to let the user press a button and a small window pops out. I can set the tile, location, size...
Any alternatives or suggestions?
Thanks.
You could try setting the size on the actual page that is popping up and try window.open() again, if that does not work try:
window.location.href = "newindow.html";
If that does not work either and you could try using a jQuery Dailog box (need to import the jQuery Library found here jQuery) as the popup, code would be something like this:
$(document).ready(function()
{
$('#buttonID').click(function()
{
$help.dialog('open');
return false;
});
var $help = $('<div></div>')
.html('Your HTML copy goes here!')
.dialog
({
autoOpen: false,
height:200,
width: 300,
title: 'Window Title'
});
});
You are treating it like a web browser when it is not a web browser. You can use the ChildBrowser plugin from https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser
Related
I have a fun little button on a website I am developing here:
http://dev.lapiazzaonline.com/merrick.php
When you click on the takeout menu button on desktop and chrome inspector iPhone simulator it works great.... with a nice little delay.
Now on iOS, nothing happens. I think it might have to do with the hover state issue, but more think my JS is messed up.
this is the js in the behavior.js file
// cool buttons
(function() {
var removeSuccess;
removeSuccess = function() {
return $('.button').removeClass('success');
};
$(document).ready(function() {
return $('.button').click(function(e) {
e.preventDefault();
var goTo = this.getAttribute("href");
$(this).addClass('success');
setTimeout(removeSuccess, 1500);
setTimeout(function(){
window.open(goTo);
},1500);
});
});
}).call(this);
Any ideas?
Thanks,
-Muhu
Your issue here is the use of window.open. You can read more about this here and other similar issues if you search. Unfortunately, there are multiple reports that jQuery trigger will not work either. So, what I would do is just use something like Modernizr, or if you just want to figure out which browser it is, this is a nice tool, and then when you're on iOS or a browser with similar blocking functionality, run a different function that doesn't prevent the default, and opens the link normally.
I use JQwidgets ,, I use to print data onclick print-button
as code :
$("#print").click(function () {
var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
var newWindow = window.open('', '', 'width=800, height=500'),
document = newWindow.document.open(),
pageContent =
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="utf-8" />\n' +
'<title>jQWidgets Grid</title>\n' +
'</head>\n' +
'<body>\n' + gridContent + '\n</body>\n</html>';
document.write(pageContent);
document.close();
newWindow.print();
});
When I close printing-widow(not continue printing), I can't use the grid-scroll (on chrome)..
google-chrome Version 34.0.1847.131 m
This worked fine on Firefox and IE..
How to fix the scroll after closing printing-window on chrome
Fiddle-Demo
It looks like you're not the only one with this issue.
I understand that your code is already setup and you want to run with what you have, but unless someone comes up with a hack or Google decided to fix what is clearly a bug, I think you need to re-think how you are approaching this issue.
If chromeless windows were an option, or if the print dialogue were a modal then you could pull this off with the current strategy, but neither of those options are possible in Chrome. Even if you were able to get around this scrolling issue somehow you're still left with a less than desirable UX problem in that if the user hits "cancel" in the print dialogue then they are left with a still open blank window.
Here is a JS fiddle to demonstrate that you need to change your approach: DEMO
You can see from this demonstration that even if we run a completely separate script from within the new window by passing it as plain text in the content object, it still causes the same issue. This means to me that this is a parent/child type of a relationship that is not easily circumvented with JS.
I recommend 2 alternative possible solutions:
Option1:
<input type="button" value="Print" onclick="window.print(); return false;" />
This triggers a full screen print dialogue that can't be closed from the "Windows Close Button." That way you can avoid the issue all together. Then you can use a combination of JS and Print Styles to target and isolate the information you want to print. I know it's more work but I think may be the better cross-platform solution.
This option is more brute force and simplistic in nature (and you have already commented that you know this but I'm leaving it up because it's still an option).
DEMO
Option2:
User clicks on a link/button that opens a new tab/window
In the same function the data from your table gets loaded into a JSON Object
The JSON object is loaded into a print template in the new tab/window
the template initiates the print function
By taking these actions, I think you will have disassociated the JS instance enough that the new tab will not affect the initiating script.
This is a browser bug - you'd have to find some sort of hack to fix it.
Doesn't sound like you want to put the print dialog code elsewhere thus not affecting your scroll bar. That is the obvious solution but it sounds like you can't do that.
Here's what I would do: Wait until someone has triggered the problematic condition, then put an event listener on the scroll event. when it happens... go ahead and reload the page.
Simple, easy, fun.
var needToReload = false;
$("#print").click(function () {
... as you have
needToReload = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
}
$('#contentjqxgrid').scroll(function () {
if (needToReload) {
window.location.reload();
}
});
$("#jqxscrollbar").jqxScrollBar({
width: 5,
height:180,
theme:'energyblue',
vertical:true
});
$("#jqxscrollbar1").jqxScrollBar({
width: 300,
height:5,
theme:'energyblue'
});
Look at jsfiddle: http://jsfiddle.net/8PtUX/6/
I have made an addon for firefox. I install it but i have two problems.I use windows.open because the panel isn`t suitable for me because if the user want to copy something in it, the panel is disappearing when he leaves it. So i have windows. I have this code:
var widgets = require("sdk/widget");
var windows = require("sdk/windows").browserWindows;
var self = require("sdk/self");
var widget = widgets.Widget({
id: "open window",
label: "test",
contentURL: self.data.url("favicon.ico"),
onClick: function() {
windows.open({
url: "http://www.example.com",
onOpen: function(window) {
}
});
}
});
I don`t know where to put the attributes of width,height,no scroll :/ in order to be displayd as a popup window.
And the second problem is that the button is displayed at the bar of addons.How it is possible to display it at the nav bar next to firebug?
The windows module does not support specifying window features.
You could use the unstable window/utils module and the openDialog function to provides.
Or you could get yourself chrome privileges and re-implement the stuff yourself. The implementation of openDialog is surprisingly pretty straight forward and can be borrowed from easily.
Either way, you'll need to wait for a window to actually fully load (newWindow.addEventListener("load", ...)) before you can safely interact with it. Or get somewhat hackish and listen for the first open event via the windows module.
I've been wondering if there is any way to open a .png pictue separately from the main window (window.open) but without the dreadful browser appearance, I would like to see only the image??
Thank you,
Andraz.
It sounds like you need the window.open function. You can pass a bunch of paameters into that to tell it to not show the address ar, toolbar, status bar, etc etc
You'd just neec to set the href/document source as the png file.
Anthony is correct.
window.open ("www.yoururl.com","mywindow","status=1");
you can use:
<script type="text/javascript">
function poponload()
{
testwindow = window.open("www.yoururl.com", "mywindow","location=0,status=0,scrollbars=0,width=700,height=500");
testwindow.moveTo(0, 0);
}
</script>
<body onload="javascript: poponload()">
You could look at a plugin like Colorbox which can show an image in the current window, quite nicely. Very easy to implement :)
If you want it in a new window without the toolbars and so on, you should look for documentation on window.open and look at the 3rd parameter it takes.
I'm testing an intranet web app in an iPad but the animations to open "windows" and show message boxes are horribly slow.
I've tried setting the global Ext.enableFx to false, and confirmed that flag is still false after page load in Firebug. The animations are still occurring though so I must be doing something wrong.
Thanks...
When you show a window, the second (optional) argument to show() is the target to animate from. Omit that and you should not get the animation.
EDIT:
Not tested, but glancing at the Window code you should be able to do this (put it after your Ext includes and before your app code):
Ext.override(Ext.Window, {
animShow: function(){
this.afterShow();
},
animHide: function(){
this.el.hide();
this.afterHide();
}
});