I am using Phonegap.0.9.6, trying to get native tab bar in iPad app but no luck
I download NativeControls from github and setup
By adding .m and .h file in plugin directory and .js file in www directory also adding that .js file in index.html. also addedNativeControls as a key and value in phonegap.plist file and using below code in index.html but no luck.
var nativeControls;
var tabBarItems = new Array('More','Favorites','Search');
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
nativeControls = window.plugins.NativeControls;
setupTabBar();
showTabBar();
}
function setupTabBar()
{
nativeControls.createTabBar();
var i = 0;
for (i = 0; i < tabBarItems.length; i++)
{
setUpButton(tabBarItems[i]);
}
nativeControls.showTabBarItems('More', 'Search', 'Favorites');
}
function showTabBar()
{
var options = new Object();
options.position = 'bottom';
nativeControls.showTabBar(options);
}
function hideTabBar()
{
nativeControls.hideTabBar();
}
function setUpButton(name)
{
var options = new Object();
options.onSelect = function()
{
alert(name);
};
nativeControls.createTabBarItem(name, name, 'tabButton:'+name, options);
}
function onFail(mesage) {
alert('Failed because: ' + message);
}
thanks.
In case anyone is still look for a solution, like I was, I found https://github.com/tblomseth/cordova-ios-tab-bar which was based on Native Controls. I made a few tweaks and a working example here: https://github.com/squerb/cordova-ios-tab-bar.
According to their wiki:
UIControls are now officially dead as of 0.9.2 and will not be
supported (it never really was officially part of the core). If you
still want this functionality have a look
at:http://github.com/phonegap/phonegap-plugins/tree/master/iPhone/NativeControls/
Source
Related
im trying to download a file that constructs itself based on the value it recives. This is my code
<html>
<head>
<script>
var myList=[];
window.onmessage = function(event){
if (event.data) {
myList = event.data;
if (myList.length>0) {
buildHtmlTable();
}
}
else {
myList = [];
}
};
function buildHtmlTable() {
var columns = addAllColumnHeaders(myList);
for (var i = 0 ; i < myList.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#excelDataTable").append(row$);
}
return exportF(); // Make Excel file download now
}
function addAllColumnHeaders(myList)
{
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0 ; i < myList.length ; i++) {
var rowHash =`enter code here` myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1){
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#excelDataTable").append(headerTr$);
return columnSet;
}
function exportF() {
var table = document.getElementById("excelDataTable");
var html = table.outerHTML;
var url = 'data:application/vnd.ms-excel,' + escape(html);
var link = document.getElementById("downloadLink");
link.setAttribute("href", url);
link.setAttribute("download", "export.xls"); // Choose the file name here
link.click(); // Download your excel file
return false;
}
</script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="">
<table id="excelDataTable" border="1">
</table>
<a style="display: none" id="downloadLink"></a>
</body>
</html>
The code itself works, but the error i get is "Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not set. See https://www.chromestatus.com/feature/5706745674465280 for more details."
What can i do to work around this? It feels like ive tried everything i can get my hands on but nothing seems to work for it to download
As the warning message says, you can't initialize downloads from a sandboxed iframe if it doesn't have the allow-downloads permission.
All solutions will imply having access to the page where the iframe is displayed (hereafter "the embedder").
The easiest and recommended way,
is to ask the embedder to add this permission when they define their iframe:
<iframe src="yourpage.html" sandbox="allow-scripts allow-downloads"></iframe>
An other way would be to ask them to not sandbox that iframe at all,
<iframe src="yourpage.html"></iframe>
but I guess that if they did, it's because they don't trust your page enough.
Finally a more complex way would be to pass the generated file back to the parent window.
For this you'd need to define a new API with your clients.
You could obviously just emit a global message event back to them, but I guess the cleanest is to make them pass a MessageChannel's MessagePort along with the myList data, so they can wait for the response there easily and be sure they'll only catch the response and no other unrelated message.
So in the embedder page they'd do
frame.onload = (evt) => {
const channel = new MessageChannel();
// handle the response from the iframe
channel.port2.onmessage = (evt) => {
const file = evt.data;
saveAs( file, "file.html" ); // the embedder is reponsible to initialize the download
};
frame.contentWindow.postMessage( embedders_data, [ channel.port1 ] );
};
And in your page you'd do
window.onmessage = (evt) => {
const myList = evt.data;
// get the MessageChannel's port out of the transfer-list
const port = evt.ports[ 0 ];
// buildHtmlTable has to return the final file, not to make it download
const file = buildHtmlTable( myList );
if( port ) {
port.postMessage( file ); // send back to embedder
}
};
See it as a live plnkr.
Ps: note that your files are not xlsx files but HTML markup.
The correct answer
Under normal circumstances Kaiido's answer is indeed the correct solution to your problem. They will NOT work in your case though.
The answer that will work on WixSince you are using Wix there is no way for you to directly edit the Sandbox attribute of the iframe element. This is just how Wix does things. You can, however, use custom code (only applies to premium websites) to get the class name of the iframe and programatically use javascript to set the new attribute to the existing iframe.
You must use the web inspector to find out the class name (iframes in Wix do not have ids) then add "allow-downloads" to the sandbox attribute. You might then need to reload the iframe using js as well. Go to your website's settings -> Custom Code -> Create custom code at the end of the body tag
If you do not have a premium website then you unfortunately cannot do this. This is due to Wix's own limitations as a platform. If this is an absolute "must" for you project, I recommend you to not use Wix since they limit your freedom as a developer when it comes to working with
technologies that were not made by them. Not to mention that they lock features such as custom elements behind a pay wall. So we can't even test our ideas before committing to a hosting plan. For anyone reading this in the future, take this into consideration and look into other platforms.
Thanks for answers, i didnt find a sollution with the recomended answers. What i did is that i made a completely new page, instead of initializing a html iframe i redirected the current window to the new page i created. The new page took a variable from "www.page.com/?page={value} and downloaded what i needed from there instead. Its messy but it works so if anyone else has this problem i recomend this if you are using wix.
i want the new html file to be created in the same folder in which HTML is present. please help me. am searching a lot , no luck
<script>
function makeDocument() {
var doc = document.implementation.createHTMLDocument("newdoc");
var p = doc.createElement("p");
p.innerHTML = "This is a new paragraph.";
try {
doc.body.appendChild(p);
} catch(e) {
console.log(e);
}
var opened = window.open("");
opened.document.write(doc);
}
</script>
Use a back-end server. Because the HTML page and the scripts are executed on the client-side. You can't really create a file on the client-side while the page is loaded in a browser.
The other way around, you won't want the client to create arbitrary files on the server as well. It poses a great security risk and might lead to possible remote code execution (RCE).
You do not have a closing brace on your function
<script>
function makeDocument() {
var doc = document.implementation.createHTMLDocument("newdoc");
var p = doc.createElement("p");
p.innerHTML = "This is a new paragraph.";
try {
doc.body.appendChild(p);
} catch(e) {
console.log(e);
}
var opened = window.open("");
opened.document.write(doc);
}
</script>
As for the wording of your question, if you are asking to create a new file that gets saved, then Aviv Lo's answer is what you need
I have implemented ZeroClipboard functionality on our site - http://couponvoodoo.com/rcp/Jabong.com/coupons-offers?field_offer_type_tid=All
I am using Drupal-7
It is working fine on the desktop version but not working on the mobile version of the site.
I have put the following code in the footer :
<script type="text/javascript">
copy_coupon_footer();
function copy_coupon_footer(){
var divArray = document.getElementsByClassName("unlock_best_coupon");
for (var i = 0, len = divArray.length; i < len; ++i) {
var offer_type = divArray[i].getAttribute('data-clipboard-text');
// alert('offer_type '+offer_type );
try{
var id = divArray[i].getAttribute( 'id' );
var client = new ZeroClipboard( document.getElementById(id), {moviePath:'/moviePath' } );
client.on( 'load', function(client) {
client.on( 'complete', function(client, args) {try{
var url = this.getAttribute("href");
var coupon_code = url.split('&c=')[1].split('&')[0];
this.innerHTML = coupon_code;
var classname = this.className+' copied_coupon';
this.setAttribute("class",classname);
// window.open(url,'_blank');
window.location.href = url;
}catch(e){}
} );
} );
}catch(e){alert(e.message);}
}
return false;
}
</script>
ZeroClipboard requires Adobe Flash in order to perform it's clipboard function and thus it will not work in any browser that does not have Adobe Flash installed.
So, since there are hardly any mobile devices with Adobe Flash (only a few older Android devices), it won't work on mobile devices.
When I asked this question about an alternative to ZeroClipboard that doesn't require Adobe Flash, no other solutions were offered.
This answer may be a bit late, but I have created a pure JavaScript alternative to zeroclipboard that is very easy to use. Here it is: Github repository. Here is the code:
function clip(text) {
var copyElement = document.createElement('input');
copyElement.setAttribute('type', 'text');
copyElement.setAttribute('value', text);
copyElement = document.body.appendChild(copyElement);
copyElement.select();
document.execCommand('copy');
copyElement.remove();
}
I am using IE in a mobile browser. I add a javascript function to a button that when the User clicks it says 'hello'.
This works.
I then add a timer.
On a desktop browser it works.
it does not work on my mobile browser.
This is my code. (note I Had just tried placing an alert('hi'); in the swapImages() and that did not work either.
var div = document.getElementById('divImage');
var imgCached = document.getElementById('imgCached');
document.execCommand("BackgroundImageCache", false, true);
function OnImgLoaded() {
img1.src = imgCached.src;
}
var interval = 30;
var _timer;
var _index = 0;
function test() {
_timer = setInterval('swapImages()', interval);
}
function swapImages() {
imgCached.onload = OnImgLoaded();
imgCached.src = 'my server url~/' + '0000' + _index + '.jpg';
_index = _index + 1;
if (_index == 10) {
_index = 0;
clearTimeout(_timer);
}
}
UPDATE!!
I had been runningit on Chrome desktop and not IE. I am mow testing it in IE desktop. I get the same erro so now I can debug.
The error is this line:
img1.src = imgCached.src;
It tells me:
Unable to get property 'src' of undefined or null reference
I have changed the code to:
var imgLive = document.getElementById('imgLive'); (I have renamed the img control)
function OnImgLoaded() {
imgLive.src = imgCached.src;
}
I get the same error.
I look in Source and the control is correctly named..
Thanks
i'm not sure that the following line is valid in your mobile phone:
imgCached.src = 'http://127.0.0.1/Cloud/test/' ...
the timer executes successfully, but the image doesn't get the proper src since the device doesn't run a web server on it (unless you configured one).
and to answer your topic question, yes- you can use javascript timers in mobile browsers just like desktop browsers.
hope that helped.
First of all: Do you ever call the test function, that starts the timer?
Second: Maybe it's really document.execCommand("BackgroundImageCache", false, true), that fails - it may not be enabled in the mobile version of IE that you are using. You can check if it's enabled using the queryCommandEnabled function, see more here: http://msdn.microsoft.com/en-us/library/ie/ms536676(v=vs.85).aspx
Hallo,
I'm new to objective-j and cappuccino and just have tried to create a
small application, that creates the gui dynamically from a xml file.
Unfortunately it works only partially. It seems that the button
regions are disorder. This means, that the buttons also response if
I click besides the button....
Please help me. I dont get it..
- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
mControlList = [CPArray alloc];
theWindow = [[CPWindow alloc] initWithContentRect:CGRectMakeZero()
styleMask:CPBorderlessBridgeWindowMask],
contentView = [theWindow contentView];
[contentView setFrame:[[contentView superview] bounds]];
[contentView setAutoresizingMask:CPViewWidthSizable |
CPViewHeightSizable];
// Loadxmlfile
var xhttp;
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest()
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP")
}
xhttp.open("GET","test.xml",false);
xhttp.send("");
xmlDoc = xhttp.responseXML;
//Get controls nodeand iterate through all controls
var node = xmlDoc.getElementsByTagName("controls")[0];
for (var i=0; i<node.childNodes.length; i++) {
if(node.childNodes[i].nodeName=="button"){
var item = node.childNodes[i];
var name = item.attributes["name"].nodeValue;
var text = item.getElementsByTagName("text")
[0].childNodes[0].nodeValue;
var x= item.getElementsByTagName("rect")
[0].attributes["x"].nodeValue;
var y= item.getElementsByTagName("rect")
[0].attributes["y"].nodeValue;
var width= item.getElementsByTagName("rect")
[0].attributes["width"].nodeValue;
var height= item.getElementsByTagName("rect")
[0].attributes["height"].nodeValue;
var b = [[Button alloc] InitWithParent:contentView Text:text X:x
Y:y Width:width Height:height];
[mControlList addObject:b];
}
}
[theWindow orderFront:self];
}
#implementation Button : CPObject
{
CPButton _button;
}
- (Button)InitWithParent:(CPView)contentView Text:(CPString)text X:
(int)x Y:(int)y Width:(int)width Height:(int)height
{
_button = [[CPButton alloc] initWithFrame:
CGRectMake(x,y,width,height)];
[_button setTitle:text];
[_button setTarget:self];
[_button setAction:#selector(cmdNext_onClick:)];
[contentView addSubview:_button];
return self;
}
- (void)cmdNext_onClick:(id)sender
{
}
#end
Cappuccino gives you most of this functionality for free.
You can load files by using a CPURLConnection.
Also Atlas (or Interface Builder and nib2cib) will automatically create cib files for you, Cappuccino itself already knows how to build up it's UI from a cib files.
If you really want to implement your own system to do this, could you please provide the actual XML you are trying to load? Also try loading the button without using the XML. For example:
var myButton = [CPButton buttonWithTitle:#"My Cool Button"];
[contentView addSubview:myButton];
+ buttonWithTitle: will automatically call - sizeToFit on the initialized button, so you can just add it to your contentView and it should be visible with the appropriate size.