I am writing an app with cordova, AngularJS 1.5.3, and Ionic 1.5.3.
I have a page that when the user clicks on a button, it toggles which component to render.
Here is a code snippet:
<div class="list">
<weekly-roster ng-if="rvm.data.mode === 'week'"></weekly-roster>
<monthly-roster ng-if="rvm.data.mode === 'month'"></monthly-roster>
</div>
<button ng-click="rvm.toggleView()">Toggle</button>
Here is my codepen link:https://codepen.io/aubz/pen/YazozL
It works fine on Android and Safari desktop. It also works on some iPhones but not on the iPhone 6. When the user pushed the toggle button the second component is rendered and then it flips back to the original one.
I have no idea what could be wrong.
Instead of ng-if try using ng-show. Unlike ng-if, ng-show simply adds/removes CSS classes to hide or show the element. ng-if actually inserts or removes a DOM node, which could explain some of the funkiness:
<div class="list">
<weekly-roster ng-show="rvm.data.mode === 'week'"></weekly-roster>
<monthly-roster ng-show="rvm.data.mode === 'month'"></monthly-roster>
</div>
<button ng-click="rvm.toggleView()">Toggle</button>
Related
When I access at this link from iOS the button with the symbol of the clock needs to be tapped twice in order to show the opening hours. This problem affects also the other buttons.
The first tap is handled like a mouseover event.
How can I fix this problem?
This is the code of the button with the clock:
<li><a href='#openinghours' data-toggle='tab' title='Opening hours'>
<span class='round-tabs four'><i class='fa fa-clock-o'></i></span>
</a></li>
<div class="tab-pane fade" id="openinghours">
<!--html content of the opening hours-->
</div>
On the desktop version of the website everything is working well.
I don't have enough rep to comment, but I would clear all your JS errors on your page before you start to debug this. You seem to have around 6 console errors and 2 warnings.
I've tried this in my Simulator, and it behaves as you say - however the W3C Bootstrap 4 Nav Tabs are fine. Therefore, I'd suggest looking at the difference (as well as seeing if any errors are interfering)
Link to w3 Schools:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_nav_tabs_toggleable&stacked=h
After I have implemented "hover one DIV - affecting another inner DIV" I noticed strange misbehavior on iPad/iPhones. Now it takes two taps to click on the link in the DIV with hover code:
HTML:
<div class="portfblock">
<div id="portfblock1_imgdiv"> <a href="http://photoRadosti.com" target="_blank">
<div class="portfblock_imgdiv_txt_dsc_over">Baby & Family Photography</div>
</a>
</div>
<!-- #portfblock1_imgdiv -->
<div id="portfblock_desc"> photoRadosti.com
</div>
</div>
<!-- #portfblock -->
CSS:
.portfblock:hover .portfblock_imgdiv_txt_dsc_over {
visibility: visible;
}
First tap only executes on-hover action (the sub-div with the class .portfblock_imgdiv_txt_dsc_over becomes visible as needed by hover), and only the second tap executes the href link jump.
My whole page to look at the misbehavior from iPad/iPhone is here.
And the snippets of HTML and CSS code with one of the section to check are here at JSFiddle:
http://jsfiddle.net/bubencode/5doLj02e/
It works fine on computer with the mouse, but it takes two taps on touchscreens to go to the links in websites thumbnails.
Might be anyone also faced the same effect? Is it possible to omit hover action while tapping on the div with hover from touchscreen devices, and to have the link href jump right after the first tap?
Would appreciate your help!
#bubencode
This is the way hover works on mobile devices. Since the concept of "hover" doesn't exist if you don't have a cursor the choice was to trigger hover on the first tap and click on the second. The reasoning was most likely to not break sites using hover for example when showing drop-down menus or similar.
If the hover is meaningless on touch-devices, consider detecting this and removing it, making your website responsive.
According to the documentation for jQuery Mobile 1.2 it should be possible to make arbitrary divs popup without them being pages:
<div data-role="popup" id="popupHelp">I should be hidden</div>
Until this is clicked!
This seems to work fine in Chrome on the PC: The div is hidden until this is clicked and the popup is displayed.
On the iPhone however the div is displayed (with X close button) below the page footer before the link is clicked.
Is this a bug or some legacy code not supported in JQM 1.3.1?
PS: I'm aware this question has been asked but no appropriate answer was given.
In my experience, the jQM popup is still pretty finicky. Make sure your popup div is defined within your page's content div (<div data-role="content">).
I am using the fastklick plugin for iOS what is very popular on the net for speeding the click event on jquery mobile apps with phonegap on iOS.
The buttons and links are working very well except the back button from jquery.
If I use this:
<div data-role="page" id="test" data-add-back-btn="true">
then if I want to click on the button, there is already the delay from iOS. The button is getting blue at first and after that the page is sliding. How can I prevent this so this button is working fast like the other buttons I am creating with
<button>...</button>?
Is it possible to create my own back button and apply an event to it?
First remove data-add-back-btn="true" then you can try this:
<a class="ui-btn-left" data-icon="arrow-l" href="javascript:history.back(1) " data-theme="a">Back</a>
or this:
<a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
$('#back-btn').bind('touchstart', function(e) {
$.mobile.changePage("#pageID");
});
Just change #pageID to your real page ID. touchstart event is great for back button if you are just doing it and not a page scrolling.
I currently have a carousel using Twitter's bootstrap on my website. I'm controlling which divs to slide in based off this javascript, which works perfect in Chrome, Safari, FF, etc. But I'm having issues with it in IE 9 and lower.
<script type="text/javascript">
$('.carbtn').click(function(q){
q.preventDefault();
targetSlide = $(this).attr('data-to')-1;
$('#myCarousel').carousel(targetSlide);
});
</script>
The buttons to control the carousel look like this,
<div class="carbtn" data-to="2">Learn More</div>
In IE, only the first click is registered. Rather than sliding in, the new div just shows up. Any other clicks on .carbtn buttons don't change anything. Is there a fix to get this to work in IE?
As Jako said in his comment, adding the slide class to the carousel div seems to fix this problem.
<div id="myCarousel" class="carousel slide">
So before 2.1, including 'slide' is required for IE8 to run.
After 2.1, including 'slide' will allow IE8 to have slide effect. But without 'slide' it will still work, just without transition.