I am using jQTouch and Phonegap and it perfectly runs in my Xcode and iPhone simulator. What I am trying to develop is to dynamically display external webpages within my application.
For example, when you first run the application it shows table with data "User Interface", "Animations" ... etc. What I want to make is when user taps on "User Interface" it should display some external web pages ( lets say google's home page).
I wrote the following code and this is inside User Interface->Edge to Edge->(here I want to dispaly the home page of google). The width:340 and height:420 will be the display area of google's home page. Please help me to make it.
<div id="edge">
<div class="toolbar">
<h1>Edge to Edge</h1>
back
</div>
<div style="width:340px; height:420px; background:red;">
<ul class="edgetoedge scroll">
<li class="sep">under construction...</li>
</ul>
</div>
</div>
Thank you
You will need to load an <iframe> into the div you want to display the content of the external page.
http://www.w3schools.com/tags/tag_iframe.asp
Make sure to add the external URL to the whitelist (ExternalHosts entry in PhoneGap.plist as per the PhoneGap for iOS FAQ: http://wiki.phonegap.com/w/page/41631150/PhoneGap%20for%20iOS%20FAQ) and set the Boolean for OpenAllWhitelistURLsInWebView to YES.
Related
When using the javascript sdk the app opens a dialog with a link, facebook will fetch some sort of a display for that link, based on the og tags in it, and will put it inside an element with id "UIStoryAttachment".
Is there a way to somehow produce the same UIStoryAttachment display inside a container element of my choice? like, for example something similar to:
<div id="storyContainer">
<div class="fb-story" data-url="MY_PAGE_URL"></div>
</div>
And then:
FB.XFBML.parse(document.getElementById("storyContainer"));
This of course does not exist, but is there anything similar in anyway?
Thanks.
I'm trying to use Jquery Mobile for a web-app, and depending on what button the user clicks, redirect them to a new web page.
Example:
A user visits foo.com/index.php.
When they click login it takes them to foo.com/login.php.
That much I've been able to figure out using:
<a class="ui-block-a" data-role="button" type="submit" onclick="window.location.replace('./login.php');">Login</a>`
When I try setting href to "./login.php", it sends me to foo.com/#./login.php.
That is all well and good, but the web browser is really going to:
foo.com/index.php
foo.com/index.php#undefined
foo.com/login.php
which is causing a problem because the user has to click the back button twice.
How can I send the user from index.php to login.php without the browser trying to go to #undefined first?
I also tried:
<a class="ui-block-a" data-role="button" type="submit" onclick="window.location.replace('./login.php');" href="">Login</a>
but it still sends the viewer to foo.com/index.php# before redirecting properly.
<a href="javascript:location.replace('./login.php');" class="ui-block-a" data-role="button" type="submit" >Login</a>
Also, have you considered just simply linking to the page normally but with an attribute of rel="external" ?
try making it window.location.replace('login.php');
or window.location.replace('/login.php');
I have a fairly simple jQuery mobile app, which works fine as a web app (tested in browsers on desktops/smartphones) but when porting it to android using phonegap, I have one major issue. It occurs both on a real phone and in an AVD.
there's a form in the app, like:
<div data-theme="a" data-role="dialog" id="a-form">
<div data-role="content">
<h3>...</h3>
<form action="http://a-live-site.com/a-form.php" method="post">
...
<div data-role="fieldcontain">
<button type="submit">Submit</button>
</div>
</form>
</div>
</div>
Its response content loads perfectly in the browser (the action is a relative link there), but within phonegap I just get a white screen and the hardware back button exits the app instead of the usual step back in history. The puzzling thing is that the request actually gets through. The server side code triggers an email, so I know the server is getting the request. I have added the appropriate <access /> rules in the phonegap.xml file, but I'm not sure that's enough.
EDIT: the form is in static content so, in phonegap, it's loaded by file:// and shouldn't have cross-domain issues.
The problem was due to data-role="dialog" in the result. Using page fixed it. It only broke in phonegap and phonegap's logs made it look like it was something else. A real PITA.
I am currently developing a Web App under jQTouch, and I want to know how I should proceed to redirect the user automatically to another page of my Web App.
For instance, let's suppose I have this code :
<div id="foo1">
...
</div>
<div id="foo2">
...
</div>
Now, let's suppose that the currently visible block is foo1. Which code should I write in my JavaScript file to redirect to block foo2 (as though I clicked a link with href="#foo2")?
Thanks and sorry for my English (I'm French).
You may use the jQT.goTo() to transfer to another page, e.g.
jQT.goTo('#foo2', 'slideup');
If you just want to trigger a click event on a link, you could use the click function in jQuery:
<a id="goToFoo2" href="#foo2">Go To Foo2</a>
<script>$("#goToFoo2").click()</script>
A standard link
Link
will not work, but you are on the right track, it just has to be in the correct setting (either a button, or a list). so either:
<ul class="rounded">
<li class="arrow">
Link
</li>
</ul>
or
<a class="button" href="#foo2">Link</a>
will work.
Hey guys, I have developed a small site that i would like to embed into a tab on a facebook page.
Previously I used this code to load in an iframe, it worked great:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Link 1</a> | <a class="red" onClick="outside_location.setInnerFBML(link_2);" style="cursor: pointer;">Link 2</a>
<div id="outside_location"></div>
<fb:js-string var="link_1"><fb:iframe width="760" height="1280" frameborder='0' src='http://www.WebWhispers.in' /></fb:js-string>
<fb:js-string var="link_2"><fb:iframe width="760" height="1280" frameborder='0' src='http://google.com/' /></fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = d
document.getElementById('outside_location');
</script>
However, it has stopped working. I dont think facebook allows iframe inside of pages, only applications.
How can I load this page in without learning FBML? The site uses Jquery so I cant use FBML anyway.
I know applications can use iFrames, can I make it an application and then embed the application into a page tab somehow?
No. Tab pages can not contain iFrames. They must be written using FBML and FBJS.
One reason for this is that Facebook does not want to enable Tab pages to detect who looks at them. All requests (including images) on tab pages are proxied through Facebook for this reason. If iframes were allowed then the application would be able to detect who looked at it, which would present a privacy issue for Facebook users.
This is either a policy change by Facebook or, more likely, a bug. I say it's unlikely to be a policy change as it throws a script error, whereas a policy change would more likely strip the code out before it's rendered.
There's a bug report you can add votes to and follow here.