I know variations of this question have been asked dozens of times, but I haven't yet found one that addresses this combination: I want to be able to see a non-overlapping statusbar on iOS 7, using Adobe's Phonegap Build.
I have added the PhoneGap Statusbar plugin to my config.xml:
<gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
This causes a black statusbar to appear correctly non-overlapping my site, but the text is (presumably) black, because I can't see it.
I have removed the ios-statusbarstyle preference from config.xml for good measure, it doesn't seem to make any difference.
The plugin page mentions that the config.xml options are not supported by PhoeGap build, so I tried to use the StatusBar javascript object. This is my complete index.html file:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
StatusBar.show();
StatusBar.overlaysWebView(false);
StatusBar.backgroundColorByHexString("#C8DB2F");
}
</script>
</head>
<body onload="onLoad()">
Test.
</body>
</html>
but the backgroundColorByHexString() function does nothing and, in fact, there appears to be no StatusBar object at all -- this is confirmed by using PhoneGap Build's debug window, and because any JS that I try to put after those lines will not be executed, so presumably it is throwing an error.
Any thoughts on how to set either the statusbar background color or the text color? Do I have to use CLI instead of PhoneGapBuild?
May be too late for this... but I used your exact code and it worked for my app on phonegap build. I used this plugin instead.
<gap:plugin name="org.apache.cordova.statusbar" version="0.1.4" />
and this to call the onDeviceReady function:
// wait for phonegap to be ready
document.addEventListener('deviceready', onDeviceReady, false);
I noticed the JS works when testing with PhoneGap Developer App but not with iOS emulator (i.e. when running cordova emulate ios from command line). Testing further, it seems the deviceready event doesn't fire at all when in iOS emulator.
Googling for "phonegap deviceready not fired" gives me similar error reports, albeit they all got mystically resolved, usually by reinstalling or fixing a typo.
One tangentially useful answer pointed out the problem may lie in plugins; File plugin in particular. I didn't use the File plugin, but I checked the emulator's system.log, which gave me some errors relating to plugins:
Sep 12 10:26:58 username.local MyApp[8218] <Warning>: ERROR: Plugin 'StatusBar' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
[…]
Sep 12 10:26:58 username.local MyApp[8218] <Warning>: ERROR: Plugin 'Device' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
So I removed all the projects' plugins and then re-added them. I checked the versions before and after re-install and while the versions were identical:
org.apache.cordova.console 0.2.10 "Console"
org.apache.cordova.device 0.2.11 "Device"
org.apache.cordova.geolocation 0.3.9 "Geolocation"
org.apache.cordova.statusbar 0.1.7 "StatusBar"
Running the emulator again, the deviceready event got fired and status bar color changed!
So, to sum up: what plugins do you use and have you tried re-installing them?
Related
I am trying to develop a firefox extension that adds a panel allowing the user to interact with the DOM of any webpage. I'd like to reuse web components that I've already built. The web components are built using libraries like jquery, angular, d3, and a bunch of others, most of which don't play nice with XUL. To deal with that, I'm including a browser element that contains a web page with my components.
<overlay id="testOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox id="browser">
<splitter></splitter>
<vbox flex="1">
<browser
src="chrome://testApp/content/index.html"
type="content"
flex="1"/>
</vbox>
</hbox>
</overlay>
This works, and shows my index.html in a panel to the side as expected. However, I cannot figure out how to debug any scripts that are included on the index.html page. The documentation for debugging extensions seems very sparse.
So the question I have is: how can I point the firefox debugger at the browser element in the pane that I've created.
Follow the instructions here for enabling the browser (as opposed to content) debugger: https://developer.mozilla.org/en-US/docs/Debugging_JavaScript#JavaScript_Debugger
Once your scripts are loaded in the browser, they should become visible in the debugger's sources pane (but not before that).
If you still can't get that to work, I would love a test case and detailed steps to reproduce, so I could try and diagnose the problem :)
Aim is to have a "View PDF" button which allows the user to view the PDF on an iPad.
Here is the plugin I want to add to Cordova (Phonegap).
This is the code on GitHub.
So far I have updated my html file to run the scripts and same function on button click (All this is in the body tag like his example):
<button id="externalPdf" onclick="app.openExternalDoc();">Open pdf</button>
<script type="text/javascript" src="../assets/js/index.js"></script>
<script type="text/javascript" src="../assets/js/ExternalFileUtil.js"></script>
<script type="text/javascript">
console.log("initialize app");
app.initialize();
</script>
I have copied the Index.js and ExternalFileUtil.js into the project.
I have linked the 2 Objective-C file to the plugin folder (Not sure if this is correct)
And I have edited the config.xml file to run the plugin:
<plugins>
<plugin name="ExternalFileUtil" value="CDVExternalFileUtil"/>
</plugins>
It still doesn't seem to work though, any ideas?
Thanks
The plugin needs updating to use the new plugin signature in order to use it with the most recent versions of Phonegap. The JS is OK, but the Objective-C needs updating.
For example, change:
- (void) openWith:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;
to
- (void) openWith:(CDVInvokedUrlCommand*)command;
I am trying to create a Hello World JS Metro app on Visual Studio 2011, using YUI3.
I´ve grabbed a local copy of YUI, added to a subfolder in the solution, and added a reference to yui-min.js on my default.html page:
<!-- TodoJS references -->
<link href="/css/default.css" rel="stylesheet">
<script src="/js/default.js"></script>
<script src="js/yui/build/yui/yui.js"></script>
and then at the bottom of the page I´ve added the following code:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
YUI().use("event", function () {
//some code will go here..
});
}, false);
</script>
When I run the code, I get a null ref error on YUI(). I do get intelissense working in Visual Studio (e.g YUI().add), so the reference seems to be OK, but YUI is not found on run time. Any tips?
I would try the steps outlined in How To: Create a Windows 8 Metro App with JS and YUI 3
I take it that you've got the issue fixed. However if you'd like to use the YUI components such as "calendar", "tabview" etc, you'll have to modify a few files that include innerHTML calls and wrap the added html content with toStaticHTML.
There were only a couple of files(dom-base.js, yui.js) that needed to be modified and most of the components worked fine(including the "datatable" and "charts" widgets), with the exception of the rich text editor. The nice thing about YUI is that it supports touch gestures for a majority of the components, for example panning "datatable" works correctly.
I am using the latest SyntaxHighlighter within my app and for some reason the toolbars do not show in IE, Firefox or Chrome. The code highlights without issue, but I want to have toolbars. What makes things worse is that the toolbar demo on the official website is not working either.
Am I missing something obvious? Below are the code nuggets.
<script src="Scripts/syntaxhighlighter/scripts/shBrushCSharp.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="Scripts/syntaxhighlighter/styles/shCoreDefault.css" />
<script type="text/javascript">
// Highlight code
SyntaxHighlighter.all();
</script>
<pre class="brush: csharp; ruler: true; title: 'Test'; toolbar: true;">
public static bool HelloWorld()
{
// Return
return false;
}
</pre>
I've been trying to figure this one out myself. I won't claim to be 100% correct here, but from what I can tell, this is the answer:
Toolbar was changed in update from version 2 to version 3.
Toolbar no longer includes the icons and whatnot.
The default toolbar is now the simple '?'.
This pretty much sucks, if it's true. The pop-up toolbar w/ icons is one of the things that made me choose SH over the other options.
This is what I'm guessing comparing the included CSS files in the latest package to the CSS available on sites that have a version with the "proper" toolbar enabled.
Here's a link to one I was snooping in: ramymostafa.com
While I would like the toolbar myself, it seems that one of the toolbars features - copy & paste - have been included without the need for a toolbar item:
If you double click anywhere on the code, the entire code view is replaces with a pre-selected view from which users can copy with a simple Ctrl/Cmd-C. Clicking anywhere else returns the view to the original state.
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html#copytoclipboard
I would still like the pop out feature, but less buttons is a good thing, I guess?
the same problem here. looks like there is no toolbar in v3.
i use v2 again: http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_2.1.382
if you copy the css and js around, don't forget to include the images in folder styles
The toolbar can be easily be showing simply go to the plugin configuration, on the Highlighter Version set to VERSION 2X. This way the toolbar will be shown again!
I confirm that in Version 3 the toolbar does not show.
I am developing a Safari extension for both Mac and Win.
My extension is a trigger point for my plugin which i am storing at ** /Library/Internet Plug-ins/**
My extension's global.html is calling for my plugins mime type by an object tag
The issue is when on Mac, I load my extz through safari-extz-builder, the plugin is NOT getting called, but when I drag the same global.html to safari window, it is working.
Also the same global.html is working fine on Windows.
I have repeated the same process with a generic plugin "npsimple" too which gave me same result (i.e. working on direct linking but failing on load from extension builder)
Code of my global.html:
<html>
<body>
<object id="pluginobj" type="application/x-vnd-aplix-foo">Plugin FAILED to load</object>
<script type="text/javascript">
function foo() {
alert(document.getElementById("pluginobj").foo());
}
foo();
</script>
</body>
</html>
Link for npsimple:
http://git.webvm.net/?p=npsimple;a=tree
I must be missing something very stupid.
Any ideas ??
TIA
Parimal Das
OSX 10.5.8 / Safari 5.0.3
I found the same, and the only workaround I could come up with was to add the NPAPI plugin to a menu bar. It works, but it seemingly shuts itself down for no reason and I have to reload it every time it does so. Annoying.