When I try to move to the next page using window.open on my iPhone, I always get a
quick white screen before the next page is loaded. I am using jquery mobile and cordova 2.1.
I have two pages.. I used the code below to move to the next page when I click on the "next" button :
function MovetoNextForm()
{
window.open("nextpage.html");
}
It moves to the next page, but the problem is before the next page appears, it's showing a white screen for few seconds (1-2 sec).
I have used these includes :
<script src="cordova-2.2.0.js" type="text/javascript"></script>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
Here are some screenshots of the issue.
Firstpage :
White screen :
Secondpage :
How can I solve this ?
You should use $.mobile.changePage("pagename.html").
Also you should read http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html for more information about Multi-Pages templates in jQuery Mobile.
Kind regards,
Related
I have list of collapsible view i am using view.toggle(500) code to collapse and expend with animation of 500 millisecond. It was working fine until i update my android web view client. Now its looking bad when i expend and collapse. I am using phonegap cordoava to create android application.
Edit
I have used the following js files
<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/jquery.jcarousellite.js">
following is the code
$("#Expand"+id).toggle(500);
The code I use to render share button is:
<a name="fb_share" share_url="http://www.XYZ.com" type="button_count"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
The above code exists in the page and works fine and when users clicks a button, that action will add the above code (with a different url) to the dom and My goal is to render another facebook button with count. However the problem is that the FB.Share js seems to somehow know it has already did the job and will not render again.
After poking around with the FB.Share script a bit I found this methoe FB.Share.renderAll() can force a re-render but without count numbers.
Anyone has any insights? Thanks!
try calling the JavaScript SDK's FB.XFBML.parse();
See: http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
When you re-add facebook share script, it renders again the share button.
for example: $.getScript("http://static.ak.fbcdn.net/connect.php/js/FB.Share");
Situation: I have a page with an iframe, which contains a form. But the iframe is longer than a screen page and the user has to scroll down to submit it. But it loads just the contents of the iframe, so it'll be scrolled by the same amount before submitting the page. I want to be at the top of the page. But since the user scrolled the facebook page and not the iframe, I cannot use scrollTo (not allowed for cross domain iframes).
Question: Is it possible submit the form to facebook to reload the entire page and still gives me access to the form data?
Not completely sure if this is what you're asking, but if it's an iframe app you can use FB.Canvas.scrollTo to control the main Facebook page position. You can either call it selectively or you can put code like this in the <head> section of every page:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type='text/javascript'>
window.onload=function() { FB.Canvas.scrollTo(0,0); }
</script>
That way every time you load a new page in your iframe, the main page will return to the top.
As of today my social commenting plugin is getting cut off.
In my tab page settings I chose fluid for height.
I have my main div with height:100%
Then i have a script that I used to auto resize the page and show all the comments if you clicked show more. This was working fine yesterday.
<script>
window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>
Here is a link to my tab page:
http://hostfb.com/files/2598/af1d87a797314ed16ec3db8b3f094c45f30f8cf3/
https://www.facebook.com/dewafelbakkers?sk=app_246342282051389
I need my page to extend to show ten comments and then extend more to show more comments if clicked.
Remove the fixed height of 500 on the div that wraps the plugin control (right about fb-root div).
I have this Facebook application profile page:
http://www.facebook.com/developers/editapp.php?app_id=122313254494566#!/apps/application.php?id=122313254494566
which is associated with my iframe-based Facebook application, Gem Spinner:
http://apps.facebook.com/gemspinner/
What I'm seeing is that, depending on the window height, my iframed content will appear with a fixed height and a scroll bar, instead of just flowing down the page (and off the bottom of the page, as necessary), as I would like. When I make the window shorter, the scroll bar appears; when I make the window taller, the scroll bar disappears. My understanding is that it's Facebook determining this height and adding the scroll bar (but maybe I'm wrong about that). In any case, I would appreciate any help in understanding this and letting my content flow down the page as necessary.
Well, I did a few things to get it to work.
(1) In my application settings, under the Facebook Integration tab, under IFrame size, I chose Auto-resize instead of Show scrollbars.
(2) I loaded the Facebook connect API (see code below).
(3) I called FB.Canvas.setAutoResize( 100 ) in two different places. I call it twice because it wasn't clear to me which location would make it take effect more quickly. In early testing, I was seeing the iframe height start out short (maybe 800 pixels tall) and then grow to the full size of my content (maybe 1100 pixels tall). In subsequent tests the iframe resizes immediately so I don't see the two states. So I'm not totally clear on the timing/mechanism here.
<body>
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
FB.init({
appId : 'your app id here',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : false // parse XFBML
});
FB.Canvas.setAutoResize( 100 );
</script>
... the rest of the page body goes here ...
<script type="text/javascript">
FB.Canvas.setAutoResize( 100 );
</script>
</body>