Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini

Developer
Mirco Babini
Size
3,148 Kb
Views
28,336
  1. Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini Previews
  2. Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini HTML Codes
  3. Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini CSS Codes
  4. Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini JS Codes

How do I make an ionic single page scrollable sections with tabs on top by mirco babini?

The tabs scroll the page to the various sections, thanks to the built in translate feature ($location.hash and $ionicScrollDelegate.anchorScroll combined).. What is a ionic single page scrollable sections with tabs on top by mirco babini? How do you make a ionic single page scrollable sections with tabs on top by mirco babini? This script and codes were developed by Mirco Babini on 16 July 2022, Saturday.

Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini Previews
IQ Test

Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini</title> <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>Mirco Babini Developer on Codepen</title> <link href="http://code.ionicframework.com/1.0.0-beta.9/css/ionic.css" rel="stylesheet"> <script src="http://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.js"></script> </head> <body> <ion-nav-bar class="nav-title-slide-ios7 bar-assertive"></ion-nav-bar> <ion-nav-view></ion-nav-view> <script id="resume.html" type="text/ng-template"> <ion-view title="Mirco Babini Developer"> <ion-content padding="false" has-header="false"> <div id="whoiam" class="s10"></div> <ion-list> <ion-item class="item item-divider"> Who I am </ion-item> <ion-item class="item"> <p><strong>Web & Mobile App developer, based in Italy.</p> </ion-item> </ion-item> <div id="whatido" class="s10"></div> <ion-list> <ion-item class="item item-divider"> What I do </ion-item> <ion-item class="item"> <p><strong>Tailor made solutions to suit your company needs.</p> <p></strong> Cutting edge technologies, creativity and new strategies that will help you reach unique business solutions.</p> <p><strong>Discover the <a href class="assertive" ng-click="scrollTo('technologies')">technologies</a> I love to use to meet your business requirements and check the services that will make your business flourish.</strong> Feel free to <a href class="assertive" ng-click="scrollTo('haveacoffee')">contact me</a>, we will find the best fit solution together!</p> </ion-item> </ion-item> <div id="first" class="s10"></div> <ion-list> <ion-item class="item item-divider"> From where I came </ion-item> <ion-item class="item"> </ion-item> </ion-item> <div id="first" class="s10"></div> <ion-list> <ion-item class="item item-divider"> Let's have a coffee </ion-item> <ion-item class="item"> </ion-item> </ion-item> <div id="first"> <h2>Web & Mobile App developer</h2> <p><a href="mailto:[email protected]">Hire or hit me</a></p> </div> <div id="second"> </div> <div id="third"> </div> </ion-content> <div class="tabs tabs-icon-only"> <a class="tab-item disable-user-behavior active" title="Home" ng-click="scrollTo('first')"> <i class="icon ion-happy"></i> </a> <a class="tab-item disable-user-behavior" title="Chat" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ng-click="scrollTo('second')"> <i class="icon ion-egg"></i> </a> <a class="tab-item disable-user-behavior" title="Drink" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline" ng-click="scrollTo('third')"> <i class="icon ion-university"></i> </a> <a class="tab-item disable-user-behavior" title="Home" ng-click="scrollTo('fourth')"> <i class="icon ion-coffee"></i> </a> </div> </ion-view> </script> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini - Script Codes CSS Codes

body { cursor: url('http://ionicframework.com/img/finger.png'), auto; background-image: url(http://www.componenti.flaviofazio.com/materiali/pattern4.jpg); background-position: initial initial; background-repeat: repeat repeat;
}
.tabs { top: 43px; }
.has-header { top: 94px !important; }
.bar.bar-header h1.title{ font-family: 'LoveMe-Regular', sans-serif; font-size: 26px
}
.item.item-divider{ font-family: 'LoveMe-Regular', sans-serif; font-size: 20px
}
.item,
.item p{ text-overflow: initial !important; white-space: initial !important;
}
.pane, .scroll{ background: transparent !important;
}
.s10{ height: 10px;
}

Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini - Script Codes JS Codes

angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('resume', { url: "/resume", templateUrl: "resume.html", controller: 'ResumeCtrl' }) $urlRouterProvider.otherwise("/resume");
})
.controller('ResumeCtrl', function($scope, $location, $ionicScrollDelegate) { $scope.scrollTo = function(id) { $location.hash(id); console.log($location.hash()); $ionicScrollDelegate.anchorScroll(); };
})
Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini - Script Codes
Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini - Script Codes
Home Page Home
Developer Mirco Babini
Username mircobabini
Uploaded July 16, 2022
Rating 3.5
Size 3,148 Kb
Views 28,336
Do you need developer help for Ionic Single Page Scrollable Sections with Tabs on Top by Mirco Babini?

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!

Mirco Babini (mircobabini) Script Codes
Name
CSS ONLY squared div in fluid layout
A Pen by Mirco Babini
Forkable Sandbox for Ionic Templates
Create amazing art & images with AI!

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!