Bug report: Open modal reset backview scroll position
How do I make an bug report: open modal reset backview scroll position?
Demo showing how each tab has its own history stack. Navigating between each tab remembers the correct back and forward views that were visited.. What is a bug report: open modal reset backview scroll position? How do you make a bug report: open modal reset backview scroll position? This script and codes were developed by Felquis on 08 December 2022, Thursday.
Bug report: Open modal reset backview scroll position - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>bug report: Open modal reset backview scroll position</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Tabs Example</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body> <ion-nav-bar class="bar-positive"> <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> <script id="templates/tabs.html" type="text/ng-template"> <ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="Home" icon="ion-home" href="#/tab/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> <ion-tab title="About" icon="ion-ios7-information" href="#/tab/about"> <ion-nav-view name="about-tab"></ion-nav-view> </ion-tab> <ion-tab title="Contact" icon="ion-ios7-world" ui-sref="tabs.contact"> <ion-nav-view name="contact-tab"></ion-nav-view> </ion-tab> </ion-tabs> </script> <script id="templates/home.html" type="text/ng-template"> <ion-view view-title="Home"> <ion-content class="padding"> <!-- <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a> --> <div class="list"> <div class="item item-thumbnail-left full-width" collection-repeat="item in feed track by $index" collection-item-height="99" ui-sref="tabs.facts"> <img ng-src="{{ item.user.picture.medium }}" /> <h2>{{ $index }} - {{ item.user.name.first }} {{ item.user.name.last }}</h2> <p>@{{ item.user.username }}</p> </div> </div> <ion-infinite-scroll icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll> </ion-content> </ion-view> </script> <script id="templates/facts.html" type="text/ng-template"> <ion-view view-title="Facts"> <ion-content class="padding"> <p> <span class="button icon icon-right ion-chevron-right" ng-click="openModal()">Open modal</span> </p> </ion-content> </ion-view> </script> <script id="my-modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">My Modal title</h1> </ion-header-bar> <ion-content> <span class="button icon icon-right ion-chevron-right" ng-click="closeModal()">Hide modal</span> </ion-content> </ion-modal-view> </script> <script id="templates/facts2.html" type="text/ng-template"> <ion-view view-title="Also Factual"> <ion-content class="padding"> <p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p> <p>1 in every 4 Americans has appeared on T.V.</p> <p>11% of the world is left-handed.</p> <p>1 in 8 Americans has worked at a McDonalds restaurant.</p> <p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p> <p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p> <p> <a class="button icon ion-home" href="#/tab/home"> Home</a> <a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a> </p> </ion-content> </ion-view> </script> <script id="templates/about.html" type="text/ng-template"> <ion-view view-title="About"> <ion-content class="padding"> <h3>Create hybrid mobile apps with the web technologies you love.</h3> <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p> <p>Built with Sass and optimized for AngularJS.</p> <p> <a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a> </p> </ion-content> </ion-view> </script> <script id="templates/nav-stack.html" type="text/ng-template"> <ion-view view-title="Tab Nav Stack"> <ion-content class="padding"> <p><img src="https://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p> </ion-content> </ion-view> </script> <script id="templates/contact.html" type="text/ng-template"> <ion-view title="Contact"> <ion-content> <div class="list"> <div class="item"> @IonicFramework </div> <div class="item"> @DriftyTeam </div> </div> </ion-content> </ion-view> </script> </body>
</html> <script src="js/index.js"></script>
</body>
</html>
Bug report: Open modal reset backview scroll position - Script Codes CSS Codes
.full-width { width: 100%;
}
Bug report: Open modal reset backview scroll position - Script Codes JS Codes
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tabs.home', { url: "/home", views: { 'home-tab': { templateUrl: "templates/home.html", controller: 'HomeTabCtrl' } } }) .state('tabs.facts', { url: "/facts", views: { 'home-tab': { templateUrl: "templates/facts.html", controller: 'FactsTabCtrl' } } }) .state('tabs.facts2', { url: "/facts2", views: { 'home-tab': { templateUrl: "templates/facts2.html", controller: 'Facts2TabCtrl' } } }) .state('tabs.about', { url: "/about", views: { 'about-tab': { templateUrl: "templates/about.html", controller: 'AboutTabCtrl' } } }) .state('tabs.navstack', { url: "/navstack", views: { 'about-tab': { templateUrl: "templates/nav-stack.html", controller: 'NavTabCtrl' } } }) .state('tabs.contact', { url: "/contact", views: { 'contact-tab': { templateUrl: "templates/contact.html", controller: 'ContactTabCtrl' } } }); $urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope, $randomUser) { $scope.loadMoreData = function () { $randomUser.get().then(function (data) { $scope.feed = $scope.feed.concat(data.slice(0, 10)); $scope.$broadcast('scroll.infiniteScrollComplete'); }, function () { $scope.$broadcast('scroll.infiniteScrollComplete'); }); }; $randomUser.get().then(function (data) { $scope.feed = data; });
})
.controller('FactsTabCtrl', function($scope, $randomUser, $ionicModal) { $randomUser.get().then(function (data) { $scope.feed = data; }); $ionicModal.fromTemplateUrl('my-modal.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; }); $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { $scope.modal.hide(); };
})
.controller('Facts2TabCtrl', function($scope, $randomUser) { $randomUser.get().then(function (data) { $scope.feed = data; }); console.log('Facts2TabCtrl');
})
.controller('AboutTabCtrl', function($scope, $randomUser) { $randomUser.get().then(function (data) { $scope.feed = data; }); console.log('AboutTabCtrl');
})
.controller('ContactTabCtrl', function($scope, $randomUser) { $randomUser.get().then(function (data) { $scope.feed = data; }); console.log('ContactTabCtrl');
})
.controller('NavTabCtrl', function($scope, $randomUser) { $randomUser.get().then(function (data) { $scope.feed = data; }); console.log('NavTabCtrl');
})
/*** Get data from randomuser.me and save it on localStorage http://randomuser.me/
***/
.service('$randomUser', function ($q, $http) { var randomuserMe = angular.fromJson(localStorage.randomuserMe) || {} randomuserMe = randomuserMe.results || []; return { get: function () { var deferred = $q.defer(); if (randomuserMe.length > 0) { deferred.resolve(randomuserMe); return deferred.promise; } $http({ method: 'get', url: 'http://api.randomuser.me/?lego&results=40' // 40 is the max }).success(function (data) { localStorage.randomuserMe = angular.toJson(data); deferred.resolve(data.results); }).error(function (error) { deferred.reject(error); }); return deferred.promise; } }
});
Developer | Felquis |
Username | felquis |
Uploaded | December 08, 2022 |
Rating | 3 |
Size | 4,023 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Ionic Infinite outside ion-content with ion-pane | 3,117 Kb |
Teste prepend com Node API | 1,578 Kb |
CSS3 Illusion - Believe it or not, these four squares move at the same constant speed | 4,137 Kb |
A Pen by Felquis | 117,947 Kb |
Changing pseudo-element content using JavaScript | 2,042 Kb |
Swiper simple DEMO | 2,798 Kb |
Teste prepend com Node API usando DocumentFragment | 1,628 Kb |
Vanilla JavaScript Trigger Events | 1,893 Kb |
Suggested input | 1,487 Kb |
Teste prepend com insertAdjacentHTML | 1,537 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Calendar | Miroot | 2,033 Kb |
Transition | Shayhowe | 1,632 Kb |
Animated Logo | Shakdaniel | 2,672 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 Kb |
Formations | Cantelope | 5,731 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!