I have an issue with a certain page in JQM that does not load when accessed by a link but will load. The page it is calling has some google chart libraries added which seem to be causing the non-loading issue. This problem can be sorted if ajax is disabled using the data-ajax="false" command.
Trouble is, when that link is then clicked on when we add the HTML5 as a native app on the iPad, it closes the app and opens safari to display the link.
How is this behavior disabled?
Code is below.
<div data-role="page" data-theme="a">
<div data-role="content" class="ui-grid-b my-breakpoint" align="center">
<div class="ui-block-a">
<img class="icons" border=0 alt="Storage Monitoring" src="Images/Fridge Icon.png">
</div>
Don't use data-ajax="false"... It will open in safari because without ajax it's the same as saying the link they click is external (rel="external"). What you need to do is figure out why it's not working without data-ajax="false".
I assume this has to do with one of the many common scripting errors seen with developers using JQM. Most people think they can use JQM with their current web development knowledge without reading the documentation, and this is a big mistake. Not necessarily saying you are, but it's all too common.
The first thing you need to do is post an example and tell us why it's not working. You also can't expect everything to magically work with JQM, are these charts supported? If not, you may have to tweak it to work properly.
Related
I have problems with rendering of my webpage in iOs using Angular 2/4/5.
A test page is: [REMOVED, I RESOLVED MY PROBLEM]
This page is displayed properly with all operative systems except iOs, I tried it with Android, Windows, with a lot of different browser and all it's ok, but with my iPhone or with my iPad the list of article is not loaded properly.
This page has this implementation for first article and similar for others:
<div class="row" *ngIf="articoli.length > 0">
<div class="col-md-12">
<app-news-card [articolo]="articoli[0]" [autore]="utenti[0]"></app-news-card>
</div>
</div>
In app-news-card component I have:
#Input() articolo: Articolo;
#Input() autore: Utente;
The news-card is built with Angular Material objects. I honestly don't think the problem is caused by this, in recent past I saw a similar situation caused by using *ngFor construct, so I can't understand where and what is the problem with iOs devices.
Somebody can help me?
I have a small extension im making for Umbraco, but i have run into an annoying problem. I have a small website i need to show in my backend of Umbraco. So i make my new section, and my new tree. Then in the edit.html file i simply insert the url to my website on my localhost. Everything works as expected, besides from the native spinner in umbraco wont stop spinning.
<div ng-controller="Netbase.Controller">
<div>
<h2>{{Title}}</h2>
<iframe src="http://localhost:64254/" id="contentPage" style="margin-left:15px;margin-right:15px" width="100%" height="100%" />
</div>
</div>
However, if i remove my iframe, everything works fine and the spinner is gone. It is umbraco that is showing the spinner.
My Angular controller is empty besides for me setting a title (that works fine).
I realize this is an old question, but maybe this will help someone else. The loading graphic is a background applied to all iframes by the Umbraco CSS. Here's how I handled it.
In the HTML for the iframe include the following attribute:
data-ng-init="iframeLoaded()"
Then in your controller:
$scope.iframeLoaded = function() {
$('#contentPage').css('background', 'none');
};
One page app, where there are user-profile pages(that you change dynamically).
This doesnt work, it appears as link
<a href='https://twitter.com/{{user.twitter}}' class='twitter-follow-button' data-show-count='false' data-size='large'>Follow #{{user.twitter}}</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
If it reinitializes the code it doesn't work either
<div ng-show="user.twitter" ng-bind-html-unsafe="user.twitter|followButton">
I'm currently working on an Angular app where I need to implement such widgets - from Facebook, Twitter, Google+ and Pinterest.
Although I wasn't able to make the Facebook button work without using its iframe form, the other three work like charms (read on).
The real issue with Angular seems to be the asynchronous Javascript codes these platforms usually provide (which dynamically create a script tag calling the actual JS code needed to make the button work). If you call the right JS file directly (and synchronously), it works great.
Example for Twitter :
<!-- This won't work : -->
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- This will (note I'm using the same URL for the script) : -->
Tweet
<script src="//platform.twitter.com/widgets.js"></script>
I forgot about Iframe, there's no option on twitter when you generate the button. So it works!
<iframe ng-show="user.twitter" allowtransparency="true" frameborder="0" scrolling="no"
src="//platform.twitter.com/widgets/follow_button.html?screen_name={{user.twitter}}"
style="width:300px; height:20px;"></iframe>
Also very important: iframes update history. To solve this problem I generate element iframe dynamically and then appendChild it to the location where it is supposed to be.
Here's a good example: http://nirlevy.blogspot.com/2007/09/avoding-browser-history-when-changing.html
I am using Jquery mobile.
I am trying to make a carosol like the one in market app.
How ever mine is all web based.
I have seen the swipe at iscroll it is nice but hard to get working in the JQM.
I thought it would be easy:
<div style="width:100%; overflow-x: hidden; scroll-x: auto;">
<img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg">
</div>
Was I ever wrong.
I know the subject has be dealt with but I didn't find a final solution.
Use Flexslider. Works nice with Jquery Mobile.
Another fresh slider script is: SwipeJS
I successfully implemented iscroll after a few try in a jQM project. Maybe you used duplicate id's or placed the functions in wrong place.
code that looks for [data-scroll] will eventually be folded into the jqm page processing code when scrollview support is "official" instead of "experimental".
currentlly scroll-x: auto; is not supported in release of jqm 1.0.1.
you can use scrollview.js http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js
Info:
I am using JQuery Mobile (in Phonegap) for building pages and navigating via them by $.mobile.changePage() or hash.
This is JQuery Mobile page anatomy:
<div id="foo" data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
Problem:
I am looking for XUI.js page anatomy, because there is really poor documentation about this library.
As Phill said, XUI isn't designed for managing DIVs as "pages", but it can be done. Andrew Lunny has built a lightweight page control in his starter application. You can inspect the source on Github and see how he converts the DIVs to pages. It requires a combination of CSS and setting classes on the DIVs in question.
Again; jQueryMobile is designed very specifically to do this all for you. XUI is not.