i had web app using jquery mobile framework, i added back button there using this code:
<div data-role="header" data-theme="g" data-position="fixed" data-tap-toggle="false">
<a data-icon="back" data-role="button" data-add-back-btn="true" data-direction="reverse" data-rel="back" >Back</a>
</div>
its working when normal stage and even minimize mobile safari... but when minimize my webapp fullscreen mode then reaopen my back button not working, for example: i link page A to B while page B i minimize my fullscreen webapp, then when return to Page B again if i click back burron how to go back Page A.?
Related
I am setting up a new trigger in GTM and I am having trouble tracking it. Normally I would check everything using the GTM debug window/console.
When I have this open and click on the button I wish to track nothing appears.
I am trying to track a button, not a link.
The button is:
<button id="trigger-onlineSizer" class="btn btn-default">Find your size</button>
However when I click on other links they are tracked, for example this link does show and is trackable.
<nav class="button-bar">
<a href="#" id="btn--bodyheight" class="button button--next-screen">
Next
</a>
</nav>
In GTM I have made sure that I have enabled, under the Variables config all items below, Pages, Utilities, Clicks and Forms.
Any guidance on how to track such a button in GTM would be much appreciated,
Thanks,
When navigating from one page to another, Ionic automatically display back button at the navigation bar. However, there are certain case where ionic don't display the back button. For example, when you navigate from a tab page to a none tab page.
How can I force Ionic to display back button on certain page?
Javascript:
.state('app.tab.playlists', { //<!-- Tab content page
url: '/playlists',
views: {
'tab-Content': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.singer', { //<!-- Not tab content page (if you navigate from tab page to this page, back button will not displayed)
url: '/singer',
views: {
'menuContent': {
templateUrl: 'templates/singer.html'
}
}
})
You can tell it in your controller. Try:
.controller('yourCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
But like LeftyX said. The history function for tab to non tab view is buggy.
Ionic manages a history while you're navigating from one view to the other.
$ionicHistory keeps track of views as the user navigates through an
app. Similar to the way a browser behaves, an Ionic app is able to
keep track of the previous view, the current view, and the forward
view (if there is one). However, a typical web browser only keeps
track of one history stack in a linear fashion.
Unlike a traditional browser environment, apps and webapps have
parallel independent histories, such as with tabs. Should a user
navigate few pages deep on one tab, and then switch to a new tab and
back, the back button relates not to the previous tab, but to the
previous pages visited within that tab.
There's a bug open on github which hasn't been fixed yet (and will only be fixed in 2.0) where Adam Bradley states:
The back button does not display because when you go into a tab, it
enter's it own "history", meaning each tab has its own navigation back
and forward.
So, basically, when you move from tabs to regular view you're going to lose the back button.
What you can do is to create one yourself:
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
and place it inside your view:
<ion-view view-title="home">
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
<ion-content padding='true' scroll='false' has-footer='false'>
<div class="card">
<div class="item item-text-wrap">
HOME PAGE
</div>
</div>
</ion-content>
</ion-view>
As you can see I've used ng-click="goBack()" for the button.
In your controller you simply would:
$scope.goBack = function(){
$ionicHistory.goBack();
}
don't forget to inject $ionicHistory in your controller.
PS: This is a over-simplified solution as it does not check if the history has got a backview:
$ionicHistory.viewHistory().backView
Add follwing lines inside your
<ion-navbar hideBackButton="true">
<button (click)="back()" class="back-button disable-hover bar-button bar-button-ios back-button-ios bar-button-default bar-button-default-ios show-back-button" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-ios" style=""><span class="button-inner"><ion-icon class="back-button-icon icon icon-ios back-button-icon-ios ion-ios-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-ios" aria-label="arrow back" ng-reflect-name="ios-arrow-back"></ion-icon><span class="back-button-text back-button-text-ios" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-ios">Back</span></span><div class="button-effect"></div></button>
Hello this may be a little clean and green.
The current stack I am using is:
phonegap cordova
jquery mobile
and I am making a TODO app for IOS
the app works fine,
<ul id="todo_list" data-role="listview" data-autodividers="false" data-filter="true" data-theme="d">
<li id="'+i+'"><span style="white-space:normal;">'+todo+'</span></li>
</ul>
however what I would like to implement is edit on click, like jeditable. when the user click on the
<li>
element instead of popping a textbox.
on my django app, I have a Facebook connect button (via django allauth). When I click that, the facebook dialog box appears. Now, i want that after login, the user is redirected to a popup (bootstrap modal) with the list of friends of the user.
I have a test function for obtaining the list of friends in my views.py and it works well. What I need is that after the facbook dialog box login, it goes to this function, gets the friendlist, and return the result in a popup on the original page.
I tried setting LOGIN_REDIRECT_URL = '/friends', which takes me to the view function and gets the friendlist, but how do I show this list in that popup? I'm using django-allauth with the bootstrap library.
Any help on this would be greatly appreciated.
load the friends page inside a modal
You can use the remote option of the modal to load the html from the friends page inside the modal. See the docs and look for remote.
Add a modal to the page where you want to show the modal:
<div class="modal hide fade" id="myModalFriends" aria-hidden="true" data-show="true">
<div class="modal-header">
<h3>Friend list</h3>
</div>
<div class="modal-body">Friend page will load here.</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
Then, after successful login:
$('#myModalFriends').modal({
remote: '/friends'
});
This will load the html from your /friends page inside a modal.
open a modal box the friend page loads
If you want to show your friend list in a modal box on the friends page, you can call $('#myModal').modal(); in document ready to show it on startup; see this fiddle.
i'm working on a restaurant's website and have run into this annoying problem when visiting the site on my phone. here's what i see: http://i.imgur.com/rc1sS.png (reproducible in iOS5, iOS6, some Androids)
the menus are .JPG's loading in Twitter Bootstrap modals, and the code looks like this:
<div id="menu" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
</div>
<div class="modal-body">
<img src="assets/menus/brunch.jpg">
</div>
</div>
<a data-toggle="modal" href="#menu" >BRUNCH</a></p>
everything loads fine in all desktop browsers, and weirdly enough they appear on the mobile Chrome app in iOS6. i've asked a couple of my Android using friends, and it's about 50%. i have no idea why there doesn't seem to be a pattern. is it an issue with how the images are being called? (i don't think it has anything to do with the modal itself?)
help!
ok, turns out the images were CMYK, which mobile does not like. changed to RGB and everything loads fine now!