Shrinking Header: Nightly

Developer
Ionic
Size
3,114 Kb
Views
52,624
  1. Shrinking Header: Nightly Previews
  2. Shrinking Header: Nightly HTML Codes
  3. Shrinking Header: Nightly CSS Codes
  4. Shrinking Header: Nightly JS Codes

How do I make an shrinking header: nightly?

A quick demo of a shrinking header, like . What is a shrinking header: nightly? How do you make a shrinking header: nightly? This script and codes were developed by Ionic on 03 July 2022, Sunday.

Shrinking Header: Nightly Previews
IQ Test

Shrinking Header: Nightly - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shrinking Header: Nightly</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html ng-app="ionic.example"> <head> <meta charset="utf-8"> <title>Shrinking Header</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> </head> <body> <fake-statusbar></fake-statusbar> <ion-pane> <ion-header-bar class="bar-positive"> <div class="buttons"> <button class="button button-icon ion-navicon"></button> </div> <h1 class="title">Things</h1> </ion-header-bar> <ion-content header-shrink scroll-event-interval="5"> <div style="height: 64px;"></div> <div class="list card"> <div class="item item-avatar"> <img src="http://ionicframework.com/img/docs/mcfly.jpg"> <h2>Marty McFly</h2> <p>November 05, 1955</p> </div> <div class="item item-body"> <img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg"> <p> This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer. </p> <p> <a href="#" class="subdued">1 Like</a> <a href="#" class="subdued">5 Comments</a> </p> </div> <div class="item tabs tabs-secondary tabs-icon-left"> <a class="tab-item" href="#"> <i class="icon ion-thumbsup"></i> Like </a> <a class="tab-item" href="#"> <i class="icon ion-chatbox"></i> Comment </a> <a class="tab-item" href="#"> <i class="icon ion-share"></i> Share </a> </div> </div> <div class="list card"> <div class="item item-avatar"> <img src="http://ionicframework.com/img/docs/mcfly.jpg"> <h2>Marty McFly</h2> <p>November 05, 1955</p> </div> <div class="item item-body"> <img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg"> <p> This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer. </p> <p> <a href="#" class="subdued">1 Like</a> <a href="#" class="subdued">5 Comments</a> </p> </div> <div class="item tabs tabs-secondary tabs-icon-left"> <a class="tab-item" href="#"> <i class="icon ion-thumbsup"></i> Like </a> <a class="tab-item" href="#"> <i class="icon ion-chatbox"></i> Comment </a> <a class="tab-item" href="#"> <i class="icon ion-share"></i> Share </a> </div> </div> <div class="list card"> <div class="item item-avatar"> <img src="http://ionicframework.com/img/docs/mcfly.jpg"> <h2>Marty McFly</h2> <p>November 05, 1955</p> </div> <div class="item item-body"> <img class="full-image" src="http://ionicframework.com/img/docs/delorean.jpg"> <p> This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer. </p> <p> <a href="#" class="subdued">1 Like</a> <a href="#" class="subdued">5 Comments</a> </p> </div> <div class="item tabs tabs-secondary tabs-icon-left"> <a class="tab-item" href="#"> <i class="icon ion-thumbsup"></i> Like </a> <a class="tab-item" href="#"> <i class="icon ion-chatbox"></i> Comment </a> <a class="tab-item" href="#"> <i class="icon ion-share"></i> Share </a> </div> </div> </ion-content> </ion-pane> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Shrinking Header: Nightly - Script Codes CSS Codes

.fake-statusbar { height: 20px; max-height: 20px; font-size: 12px; box-sizing: border-box; width: 100%; position: fixed; top: 0; left: 0; z-index: 4; color: #fff; padding: 2px 3px 3px 3px;
}
.fake-statusbar .time { position: absolute; width: 100%; height: 100%; text-align: center;
}
.fake-statusbar .pull-left { float: left; }
.fake-statusbar .pull-right { float: right; }
.bar-header { height: 64px !important;
}
.bar-header > * { margin-top: 20px !important;
}
.scroll-content{ top:0 !important
}

Shrinking Header: Nightly - Script Codes JS Codes

angular.module('ionic.example', ['ionic'])
.directive('fakeStatusbar', function() { return { restrict: 'E', replace: true, template: '<div class="fake-statusbar"><div class="pull-left">Carrier</div><div class="time">3:30 PM</div><div class="pull-right">50%</div></div>' }
})
.directive('headerShrink', function($document) { var fadeAmt; var shrink = function(header, content, amt, max) { amt = Math.min(44, amt); fadeAmt = 1 - amt / 44; ionic.requestAnimationFrame(function() { header.style[ionic.CSS.TRANSFORM] = 'translate3d(0, -' + amt + 'px, 0)'; for(var i = 0, j = header.children.length; i < j; i++) { header.children[i].style.opacity = fadeAmt; } }); }; return { restrict: 'A', link: function($scope, $element, $attr) { var starty = $scope.$eval($attr.headerShrink) || 0; var shrinkAmt; var header = $document[0].body.querySelector('.bar-header'); var headerHeight = header.offsetHeight; $element.bind('scroll', function(e) { var scrollTop = null; if(e.detail){ scrollTop = e.detail.scrollTop; }else if(e.target){ scrollTop = e.target.scrollTop; } if(scrollTop > starty){ // Start shrinking shrinkAmt = headerHeight - Math.max(0, (starty + headerHeight) - scrollTop); shrink(header, $element[0], shrinkAmt, headerHeight); } else { shrink(header, $element[0], 0, headerHeight); } }); } }
})
Shrinking Header: Nightly - Script Codes
Shrinking Header: Nightly - Script Codes
Home Page Home
Developer Ionic
Username ionic
Uploaded July 03, 2022
Rating 4.5
Size 3,114 Kb
Views 52,624
Do you need developer help for Shrinking Header: Nightly?

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!

Ionic (ionic) Script Codes
Name
Animated Spinners
Swipeable Cards nightly
Open Modal with Form
Create amazing marketing copy 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!