I am using bootstrap version 2.x and when i use the app on a non mobile browser the scrollbars work correctly, however when i browse using iOS (iphone 5) there are no scrollbars -- specially vertical scrollbars and i cannot touch scroll on the screen - its just fixed i cannot more left or right or up or down......
Is there something i need to enable for touch scrolling like a different js library? or is there something broken.
I have read that if the tags for are not closed properly this could occur but my tags are closed.
So basically all my content is now not visible except for the first portion as i cannot scroll down...
Here is some code ( i am using durandal as a SPA)
this is my shell:
<div>
<header>
<!--ko compose: {view: 'nav'} --><!--/ko-->
</header>
<section id="content" class="main container-fluid">
<!--ko compose: {model: router.activeItem,
afterCompose: router.afterCompose,
transition: 'entrance'} -->
<!--/ko-->
</section>
<footer>
<!--ko compose: {view: 'footer'} --><!--/ko-->
</footer>
</div>
at the moment i removed all 'nav' and 'footer' rendering and only something in the content HTML that is rendered in there a simple page:
<section>
<div>
<button id="btnrefresh" class="btn btn-info btn-force-refresh pull-right"><i class="icon-refresh"></i> Refresh</button>
<button id="btnrefresh2" data-bind="click: refresh" class="btn btn-info btn-force-refresh pull-right"><i class="icon-refresh"></i> Data Refresh</button>
<h3 class="page-title" data-bind="text: title" ></h3>
<div data-bind="visible: showDetails" style="height:500px;width:50px;background-color:red">
</div>
</div>
</section>
this will not scroll in IOS :(
The answer to this was that it as a Durandal based problem.
After severe debugging and stripping everything out except durandal i figured out this can be fixed by opening up durandal/app.js and commenting out the following lines of code:
adaptToDevice: function() {
//document.ontouchmove = function (event) {
// event.preventDefault();
//};
}
Cheers
Related
I am facing a strange behaviour of IONIC 1 IOS application in IOS 11.0.3 .
I had a list of Item and which I rendered on screen via using ng-repeat via using following code. i.e
<div class="list-container" ng-cloak>
<div ng-repeat="message in messageCtrl.messageList track by $index" ng-class="messageCtrl.checkClass
(message);" class="messages" ng-cloak>
<div class="message" ng-cloak>
<span ng-cloak>
<a href="javascript:void(0);" ng-click="goToSechduleScreen(message, 'present');" ng-cloak>
{{ message.message }}
<strong ng-cloak>{{ message.annotation }}</strong>
<span ng-cloak class="scheduleMessage" ng-if="messageCtrl.doesMessageIsScheduled(message
);"><i class="icon ion-clock"></i></span>
</a>
</span>
<div class="datetime" am-time-ago="message.date_created" ng-cloak></div>
</div>
</div>
</div>
The above code is working fine in all IOS device which is running on IOS 10 or lower. but in IOS 11.0.3 some "ng-repeat" item are not displayed .when I scroll up and down sometime Items are visible or some not.
Please check following screen-short for better clarity.
When some items are displayed and some items are not,
When all items are displayed sometime when I scroll up and down,
when just only single item displayed and rest of item are not displayed
Any kind of help or suggestion is appreciated.
Thanks in advance.
I'm using Material Design Lite (http://getmdl.io) along with dialog-polyfill (https://github.com/GoogleChrome/dialog-polyfill) for the modal dialog boxes.
Everything works great on my desktop browsers (Chrome, Safari, etc.), but on iOS (both Chrome and Safari), I can't tap inside the modal dialog boxes. It just doesn't respond.
I've tried the suggestion I've seen posted several places to put "cursor: pointer" in the CSS, but either I'm not doing it correctly, or it's not working.
Here's a typical modal dialog from my code:
<dialog class="mdl-dialog" id="delete_alias_confirm_dialog">
<h4 class="mdl-dialog__title">
Delete alias
</h4>
<div class="mdl-dialog__content" id="delete_alias_confirm_dialog_content">
<p>
Alias [ALIAS NAME] has been successfully deleted.
</p>
<form action="#">
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button mdl-button--raised mdl-button--colored" onClick="delete_alias_confirm_dialog.close()" id="delete_alias_confirm_dialog_ok_button">OK</button>
</div>
</form>
</div>
</dialog>
<script>
var delete_alias_confirm_dialog = document.querySelector('#delete_alias_confirm_dialog');
if (! delete_alias_confirm_dialog.showModal) {
dialogPolyfill.registerDialog(delete_alias_confirm_dialog);
}
var delete_alias_curr_name=""
function show_delete_alias_confirmation(clicked_element) {
delete_alias_curr_name=((clicked_element.parentNode).parentNode).parentNode.parentNode.querySelector('#alias_name').innerText
var delete_alias_dialog_delete_button=document.querySelector('#delete_alias_dialog_delete_button');
var delete_alias_dialog_alias_name=document.querySelector('#delete_alias_dialog_alias_name');
delete_alias_dialog_alias_name.innerHTML=delete_alias_curr_name
delete_alias_dialog.showModal();
delete_alias_dialog_delete_button.blur();
}
</script>
Check the order in which you load the CSS.
If you are loading dialog-polyfll.css before material.min.css that might be the source of the problem.
Also check if you don't have a dialog duplicate, this also results on a dialog that can't be closed on IOS.
I'm trying to implement a jQuery-based image crop function that exports to base64 text. CropIt seems perfect for the job, and works beautifully, UNLESS it's not the first jQuery Mobile page in the list of jQm "pages", that displays by default in the HTML file. If it's not, everything works except for the zoom slider. I've created a jsFiddle to illustrate the problem:
http://jsfiddle.net/f97r3suf/5/
Any help getting the zoom slider to work would be appreciated, thanks! Code attached.
<!-- ********* DEFAULT JQUERY MOBILE PAGE **************** -->
<div data-role="page" id="splash" data-theme="f">
<div data-role="content">
<p>Here's a stripped-down example based on the sample CropIt code on GitHub. The long URL in the external resources list is a "locally" hosted version of Cropit.min.js on Google Drive. Everything else works, including the imageState tag, the drag-to-pan on the image, the image upload and export. Only the zoom slider doesn't work.</p>
Example: CropIt is the second jQm page
<p>If I switch the order of the jQuery Mobile pages, so that the Cropit page is the first (default) page of the HTML instead of this page, the zoom works fine: Example: Cropit is the first jQm page.</p>
</div>
</div>
<!-- ******** UPLOAD PAGE ******* -->
<div data-role="page" id="upload" data-close-btn="none">
<div data-role="content" style="padding:0px">
<!-- content -->
<div class="image-editor">
<input type="file" class="cropit-image-input">
<div class="cropit-image-preview"></div>
<div class="image-size-label">Resize image</div>
<input type="range" class="cropit-image-zoom-input">
<button class="export">Export</button>
</div>
</div>
</div>
I am developing an application using worklight framework from IBM in which I use jquery mobile library to code.
Unfortunately, when I use $.mobile.silentScroll to scroll, it has no effect, it does not work.
Has anyone met that issue? In other work, How to scroll page in worklight?
I don't think you can do this with jQuery Mobile's silentScroll, as it basically uses window.scrollTo, and this allows to scroll only within the current viewport (what you currently see on the screen).
Instead I would recommend to use iScroll's various API methods: scrollTo, ScrollToElement or Snap, etc.
I tested the below in Android and it worked.
You'll of course need to adjust it to your application...
common\js\main.js:
var myScroll;
function wlCommonInit(){
myScroll = new IScroll('#wrapper');
}
common\index.html:
<body style="display: none;">
<div id="wrapper">
<div data-role="page" id="page">
<div data-role="content" id="content" style="padding: 15px">
<div id="firstDiv">
<input type="button" value="scroll to the other div" onclick="myScroll.scrollToElement('#secondDiv', '0s');"/>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="secondDiv">
hello
</div>
</div>
</div>
</div>
...
...
</body>
0s means there will be no scroll effect; it will essentially 'jump' to the desired location.
I think it's there in jQTouch but how do I add a full screen welcome image for my iPhone web app developed using jQueryMobile?
The app is a full screen web app and it is already added in the iPhone Homescreen.
This is just a concept but you could try something like this:
Live Example: http://jsfiddle.net/yzvWy/14/
JS
$(function() {
setTimeout(hideSplash, 2000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
HTML
<div data-role="page" data-theme="b" id="splash" style="background-color: #fff;">
<div class="splash">
<img src="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/images/jquery-logo.png" alt="splash" />
</div>
</div>
<div data-role="page" data-theme="b" id="home">
<div data-role="content">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Overview</li>
<li>Intro to jQuery Mobile</li>
<li>Features</li>
<li>Accessibility</li>
<li>Supported platforms</li>
</ul>
</div>
</div>
</div>
iOS has its propertiary stuff for displaying a splash while app loads. I didn't use it yet (I didn't need that) but here's how they say it can be done:
<link rel="apple-touch-startup-image" href="img/splash.png" />
You might want this too:
<link rel="apple-touch-icon" href="./apple-touch-icon.png" />
See here for more:
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
Thanks for the help. This didn't work with the current stable release of Jquery Mobile, since it doesn't yet support 1.7. I managed to combine it another solution on the matter and came up with:
$ (function(){
setTimeout(function(){
$.mobile.changePage("#home", "fade");
}, 3000);
});
Thanks!