I'm struggling with a Phonegap-Android application. I'm using jQuery Mobile 1.3.1 and jQuery 1.9.1, with Phonegap 2.9.0. I've got some data-role pages in my index.html and I'm generating some other dynamically with an ajax function. The problem is that always, after showing a dynamically generated page the screen goes all white. This never happens if I navigate between pages statically created in the index.html.
Any suggestions? I've tried with:
< meta name="viewport" content="width=device-width, user-scalable=no" />
CSS: .ui-page {
-webkit-transform: translateZ(0);
-webkit-perspective:1000;
-webkit-backface-visibility: hidden;
-msie-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
defaultPageTransition = "none"
The new pages are created using Mustache.js.
Something to quickly try would be to globally enable DOM caching in jQuery Mobile:
$.mobile.page.prototype.options.domCache = true;
or
pageContainerElement.page({ domCache: true });
I would say it stems from a given page not containing the dynamically generated markup, which you need in order to utilize jQM's ajax navigation... which uses it's own internal history tracking object to fuel the hashchange and/or popstate event.
Beyond that, I would step through how the dynamic pages are actually being added to the DOM. You should be able to keep using Mustache's template plugin, but you'll have to make sure to use the jQM to add the markup to the DOM. (Or go through a potentially long process of creating overrides... which I think you should avoid if possible.)
When you use jQM to update the DOM, it ensures the correct events fire and in the correct order, thus keeping the app data/state up-to-date.
I'm sure you're using the documentation, but I would give this another look. Might give you a better idea on what Mustache method you need to stop using, or extend/override.
Hope this helps.
jQM References
DOM Caching: http://view.jquerymobile.com/1.3.1/dist/demos/#nav-cache
Navigation Event: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/navigation/#nav-event-example
Dynamic Page Loading: http://jquerymobile.com/demos/1.3.1/docs/pages/page-dynamic.html
Related
I'm trying to optimalize web for speed and wanna ask about Eliminating render-blocking CSS and JS.
by JS 'm only using async attr. - lets say, throwin' it at plugins like flexslider, lightbox.. but should I also use this with the base scripts like ?:
<script src="https://cdnjs.cloudflare.com/.../4.5.3/js/bootstrap.min.js" async></script>
<script src="js/script.js" async></script>
Whenever i add async on some script and test it, that .js script won't just operate - as if not linked. What am I doing wrong? And is this enough ... ?
-by CSS - tring to impove it like this :
<link rel="preload" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" media="print" as="style" onload="this.onload=null;this.rel='stylesheet'" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><noscript><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"></noscript>
This cuts down the time of rendering CSS resources, but again when using it on e.g fontawesome - icons are not loaded as if link was't there...So, is this a good way of rendering CSS please ?
JavaScript
When using async you have to ensure that load order does not affect your implementation.
Async basically says "load everything as quickly as you can, I don't care about load order".
If you haven't accounted for this then the easiest fix is to use defer on your JavaScript instead of async. This basically says "load everything after the HTML has loaded but please keep the order as some scripts depend on others".
This will be slightly slower overall but still fix the JavaScript being render blocking.
You should defer all scripts, except any scripts that are essential for above the fold operations (and then you should inline those scripts in a <script> tag in the <header>, obviously keep this to a minimum).
CSS
Render blocking CSS is anything sitting in an external file that relates to content "above the fold".
To understand this fully you need to understand how the browser render things but in essence anything that is visible without scrolling ("above the fold" content) is delayed if your CSS is in an external file as it needs that information to know how to present and lay things out.
What you need to do is find all the styles that apply to your above the fold content and inline them in a <style> tag in the page <header>. Yet again this needs to be kept to a minimum so you may need to make the above the fold CSS custom rather than using bootstrap....including the whole of bootstrap inline would not be good!
Then all other styles can sit in external style sheets.
This way the second the page's HTML is downloaded it has everything it needs to layout the page without waiting for any other requests.
Font Awesome
Ah fonts for icons. I won't go into why that is a bad practice from an accessibility and performance perspective as I have covered that numerous times before.
Instead I will simply say that for any "above the fold" icons you should instead swap them for inline SVGs. This is for the same reason as inlining your CSS, inline SVGs do not need a network request to render so the second the HTML is loaded your page can be displayed.
just a suggestion, have no way of testing atm but try putting 'async' before the source attribute. also, try adding a copied line with the attribute defer instead of async for wider browser support.
it is possible to change the mouse cursor's form into busy mode (for example: hourglass) when processing ajax button in JSF (specifically primefaces)? I want to change my cursor's form while my p:dataTable is loading data when i navigate it to the next page. Thanks.
You can achieve this with a little help of CSS and jQuery. With CSS, you can create a class which changes the cursor on the entire document. With jQuery, you can add/remove that CSS class. Under the covers, PrimeFaces uses jQuery for the ajax magic and you can for PrimeFaces <4 hook on standard jQuery ajaxStart and ajaxStop events and for PrimeFaces 4+ hook on PrimeFaces specific pfAjaxSend and pfAjaxComplete events to perform the add/remove of that CSS class.
CSS:
html.progress, html.progress * {
cursor: progress !important;
}
(the !important overrides any style set by style attribute and stronger CSS selectors for the case that)
jQuery and PrimeFaces:
$(document).on("ajaxStart pfAjaxSend", function() {
$("html").addClass("progress");
}).on("ajaxStop pfAjaxComplete", function() {
$("html").removeClass("progress");
});
For the case you're also using standard JSF <f:ajax> elsewhere and would like to have the same progress indicator, here's how you can do that:
jsf.ajax.addOnEvent(function(data) {
$("html").toggleClass("progress", data.status == "begin");
});
As always, BalusC provided a great answer. If you happen to be using the PrimeFaces p:ajaxStatus component, you can simply incorporate the JavaScript to add and remove the progress class like:
<p:ajaxStatus ...
onstart="$('html').addClass('progress')"
oncomplete="$('html').removeClass('progress')">
...
</p:ajaxStatus>
This does require you to add the following CSS:
html.progress, html.progress * {
cursor: progress !important;
}
If you don't know where to put the CSS (or JavaScript), please see How to reference CSS / JS / image resource in Facelets template?
Primefaces by itself doesn't look like it does that. It has some components that allow you to visualize when its working (AjaxStatus, BlockUI), but it doesn't look like it does anything with the cursor.
You'd have to directly use Javascript to do that. This looks like a nice option.
change cursor to busy while page is loading
I'm working on a new website re-design; so far every browser compatibility issue has been resolved no problem - but there's one that remains in IE7.
The client has a dropdown menu from the header which extends over the content, but the problem occurs when the client has a related video on the page as this is often displayed first; the video [being displayed just below the header] pushes the menu behind.
The dropdown is created in CSS using a high z-index value (1000).
JavaScript is used to hide and show the menu by altering the 'visibility' value.
The video uses jPlayer, given the age of IE7 it doesn't use HTML5 to display the video but instead includes a .swf file.
I have tried altering the z-index of the header, jPlayer, etc to the suggestions on this site but had no luck. I have also tried changing the position from absolute to relative but this broke the dropdown.
I have modified the parameter 'wmode' so that it's property is 'transparent', I've also tried 'opaque'.
The only difference I have made so far is adding hours to the work-log.
The page is question can be found here:
http://www.newforest.gov.uk/healthandleisure/
Thanks!
Have you tried an iframe shim? I had a similar experience with the google earth plugin, and adding the shim to the pieces that need to go on top of the swf elements as:
<iframe class="bgi" frameborder="0" scrolling="no" src="about:blank">
<html><head></head><body></body></html>
</iframe>
where bgi is a class that has
height:100%;
width:100%;
z-index:-1;
There is a page on my site with two sets of tabs, each tab's link is ajax-driven but has a proper href in case javascript is not enabled. I'm about to implement an ajax 'back-button' solution using a plugin such as jQuery Address.
My problem/confusion with this solution is that a page's default content is still loaded before the javascript has a chance to parse the hash and load the correct content. If I initially hide the content, non-javascript users will never see anything. If I don't initially hide the content, the user will see the wrong page for a moment before it gets updated (besides the extra overhead of first loading the wrong tab and then the correct tab).
What are the best / most common approaches to dealing with this?
Thanks, Brian
If you use hashes, you will always have the wrong content first. You need to use a server-side solution with the HTML5 History API to avoid this. Read more
You can use:
https://github.com/browserstate/ajaxify
And have the tabs render on the server side with something like if ( $_GET['tab'] === '2' ) // render 2
I think this is a good question. Have you tried using the <noscript> tag to include css that shows the content that's hidden initially for JS users. Something like this:
<style type="text/css">
#area-1, #area-2 { display: none; }
</style>
<noscript>
<style type="text/css">
#area-1, #area-2 { display: block; }
</style>
</noscript>
Hope this helps!
I have a strange result happening when loading a Partial View using jQuery Ajax into the DOM, but only when viewing the result using IE8.
The Partial View in question (for example purposes only) looks like this;
<aside>Example test</aside>
When the result comes back from the Ajax call it appears to look exactly as above. However when viewing the DOM using the developer tools in IE8 the result looks like this;
<aisde/>
Example test
</aside/>
As a result the element is not recognised and the text does not sit within it. Also the style sheet class for 'aside' is not being applied. This only happens in IE8 as far as I can see.
Any one got any suggestions, other than do not use custom tags?
Thanks in advance
You need to make sure the DOM recognizes HTML5 elements. Essentially you will have to do:
document.createElement('aisde');
Have a look at this link. Without creating the element older IE browsers will not see or style the elements.
The common practice around these issues is to load a html5 fix javascript file within a conditional comment block. The script does a createElement on all new html5 node types.
<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->