App Layout

Developer
Danny
Size
9,369 Kb
Views
16,192
  1. App Layout Previews
  2. App Layout HTML Codes
  3. App Layout CSS Codes
  4. App Layout JS Codes

How do I make an app layout?

What is a app layout? How do you make a app layout? This script and codes were developed by Danny on 23 September 2022, Friday.

App Layout Previews
IQ Test

App Layout - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>App Layout</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <i class='fa fa-arrows-h' id='changeSize'></i>
<div id='mobileWrapper'> <div id='touchIndicator'></div> <!-- content start --> <div class='headerWrapper'> <div class='header'> <i class='fa fa-bars'></i> <i class='fa fa-user'></i> <div class='title active'>Prototype</div> </div> </div> <div class='slides'> <div class='menu'> <a>one</a> <a>two</a> <a>three</a> <a>four</a> <a>five</a> <a>six</a> <a>seven</a> <a>eight</a> <a>nine</a> <a>ten</a> </div> <div class='content active'> <div class='wrapMe'> <h1>Lorem Ipsum</h1> <img src='http://lovelace-media.imgix.net/uploads/859/a159bb10-96d7-0133-f204-0e8e20b91aa1.gif'> <div class='text'> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue sem iaculis pellentesque vestibulum. Vivamus molestie hendrerit enim, at tincidunt tellus vulputate at. Etiam eleifend dapibus elit ut varius. Aliquam erat volutpat. Donec ultrices libero ut nisi pulvinar, non congue quam mollis. Maecenas cursus sem sit amet posuere suscipit. Nulla et vehicula risus, ornare convallis ligula. Vivamus eu arcu sed ipsum mollis hendrerit. Etiam quis imperdiet orci. Duis gravida odio sem, quis commodo nisi faucibus vel. Nullam diam libero, egestas a tristique sit amet, consequat a ipsum. Integer quam nibh, sagittis eu molestie at, tincidunt non lacus.</p> <p>Integer elementum vestibulum lectus, eu luctus tortor pharetra eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur finibus mi at arcu pharetra bibendum. Vivamus faucibus imperdiet sem quis porttitor. Aliquam sed ex in nisl semper aliquam. Pellentesque vehicula id lacus id tempus. Vestibulum semper ullamcorper lobortis. Donec lacinia mauris vitae massa volutpat consequat eu eget justo. Vestibulum blandit, elit eget porttitor sagittis, massa odio molestie elit, nec finibus leo nulla nec lectus. Morbi justo velit, iaculis at lectus vitae, sodales ultrices ex.</p> <p>Nunc sollicitudin in ante a pellentesque. Cras fringilla massa eget accumsan sollicitudin. Quisque leo nunc, dignissim nec leo ut, maximus vestibulum nisl. Ut vitae est vel tortor tempor hendrerit. Aenean sodales placerat mi, et fringilla erat maximus id. Suspendisse vel felis malesuada, lacinia tellus vitae, egestas odio. Donec risus orci, volutpat vel diam sit amet, facilisis convallis quam. In hac habitasse platea dictumst.</p> </div> </div> </div> <div class='profile'> <p>empty..? oh noes</p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.8-fix/jquery.nicescroll.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

App Layout - Script Codes CSS Codes

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css";
@import url(https://fonts.googleapis.com/css?family=Abel);
@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700,300,900);
body { font-family: Abel, serif; font-size: 1.4em; background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/escheresque.png); cursor: pointer !important; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
#changeSize { position: absolute; top: 20px; right: 20px; padding: 10px; background: rgba(0, 0, 0, 0.1); cursor: pointer; font-family: FontAwesome; font-size: 1em; color: rgba(0, 0, 0, 0.5);
}
#changeSize.medium { background: rgba(0, 0, 0, 0.4);
}
#mobileWrapper { position: relative; margin: 5vh auto; width: 400px; max-width: 100%; background: #f4f4f4; height: 90vh; overflow: hidden; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); -webkit-transition: .5s width; transition: .5s width;
}
#mobileWrapper.medium { width: 600px;
}
#mobileWrapper #touchIndicator { position: absolute; top: 0; left: 0; width: 50px; height: 50px; border-radius: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: #7bb3de; opacity: .5; z-index: 9999; pointer-events: none;
}
.header { height: 50px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); background: #eee; z-index: 999;
}
.header i { -webkit-transition: all .2s; transition: all .2s;
}
.header i.fa-bars, .header i.fa-user { position: absolute; line-height: 50px; padding: 0 20px; font-size: 24px; color: rgba(0, 0, 0, 0.4); border-right: 1px solid rgba(0, 0, 0, 0.05);
}
.header i.fa-user { right: 0; border-right: 0; border-left: 1px solid rgba(0, 0, 0, 0.05);
}
.header i.fa.active { color: #7bb3de; background: rgba(0, 0, 0, 0.05);
}
.header .title { line-height: 50px; text-align: center; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all .2s; transition: all .2s; color: #aaa; position: absolute;
}
.header .title.active { color: #7bb3de;
}
.slides { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; height: calc(100% - 50px); font-size: .8em; color: #ccc;
}
.slides .menu, .slides .content, .slides .profile { -webkit-box-flex: 0; -ms-flex: 0; flex: 0; -webkit-transition: all .2s; transition: all .2s; overflow-x: hidden; overflow-y: auto; z-index: 999;
}
.slides .menu *, .slides .content *, .slides .profile * { opacity: 0;
}
.slides .menu::-webkit-scrollbar, .slides .content::-webkit-scrollbar, .slides .profile::-webkit-scrollbar { display: none;
}
.slides .menu.active, .slides .content.active, .slides .profile.active { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.slides .menu.active *, .slides .content.active *, .slides .profile.active * { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; -webkit-transition-delay: .2s; transition-delay: .2s;
}
.slides .profile { background: #eee;
}
.slides .profile p { text-align: center;
}
.menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #eee;
}
.menu a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: 4vh; border-bottom: 1px solid rgba(0, 0, 0, 0.05); color: #ccc;
}
.menu a:hover { background: rgba(0, 0, 0, 0.05); color: #aaa; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.menu a:active { background: #7bb3de; color: #f4f4f4; opacity: .5; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.content .wrapMe { padding: 25px;
}
.content img { width: 100%; margin: 0 0 20px;
}
.content h1 { font-family: "Merriweather Sans", sans-serif; font-size: 1.2em; text-transform: uppercase; margin: 0 0 20px;
}
.content .text p { margin: 0 0 20px;
}

App Layout - Script Codes JS Codes

/* App */
$(".header .title").click(function(){	$(".slides *, i.fa").removeClass("active");	$(".slides .content, .header .title").addClass("active");	$(".content").animate({ scrollTop: 0 }, 0);
});
$(".fa-bars, .menu *").click(function(){	$(".fa-bars").toggleClass("active");	$(".slides .menu").toggleClass("active");	$(".slides .profile, .fa:not(.fa-bars)").removeClass("active");	if($(".slides .menu, .slides .profile").hasClass("active")) {	$(".slides .content, .header .title").removeClass("active");	} else {	$(".slides .content, .header .title").addClass("active");	}
});
$(".fa-user").click(function(){	$(".slides .profile").toggleClass("active");	$(".slides .menu, .fa:not(.fa-user)").removeClass("active");	if($(".slides .menu, .slides .profile").hasClass("active")) {	$(".slides .content, .header .title").removeClass("active");	} else {	$(".slides .content, .header .title").addClass("active");	}	$(this).toggleClass("active");
});
/* Simulated Environment - Part I */
$("#changeSize").click(function(){	$("#changeSize, #mobileWrapper").toggleClass("medium");
});
$("#mobileWrapper").on('mousemove', function(e){	minusHeight = ($(window).height()-$("#mobileWrapper").height())/2;	minusWidth = ($(window).width()-$("#mobileWrapper").width())/2; $('#touchIndicator')	.css({'top':e.pageY-minusHeight,'left':e.pageX-minusWidth});	});
$("#mobileWrapper").on('mousedown', function(e){
$('#touchIndicator').stop().animate({'width':70,'height':70,'opacity':.2},200);
});
$("#mobileWrapper").on('mouseup', function(e){
$('#touchIndicator').stop().animate({'width':50,'height':50,'opacity':.5},200);
});
/* Simulated Environment - Part II */
/*! jquery.kinetic - v2.2.1 - 2015-09-09 http://the-taylors.org/jquery.kinetic * Copyright (c) 2015 Dave Taylor; Licensed MIT */
!function(a){"use strict";var b="kinetic-active";window.requestAnimationFrame||(window.requestAnimationFrame=function(){return window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}()),a.support=a.support||{},a.extend(a.support,{touch:"ontouchend"in document});var c=function(b,c){return this.settings=c,this.el=b,this.$el=a(b),this._initElements(),this};c.DATA_KEY="kinetic",c.DEFAULTS={cursor:"pointer",decelerate:!0,triggerHardware:!1,threshold:0,y:!0,x:!0,slowdown:.9,maxvelocity:40,throttleFPS:60,invert:!1,movingClass:{up:"kinetic-moving-up",down:"kinetic-moving-down",left:"kinetic-moving-left",right:"kinetic-moving-right"},deceleratingClass:{up:"kinetic-decelerating-up",down:"kinetic-decelerating-down",left:"kinetic-decelerating-left",right:"kinetic-decelerating-right"}},c.prototype.start=function(b){this.settings=a.extend(this.settings,b),this.velocity=b.velocity||this.velocity,this.velocityY=b.velocityY||this.velocityY,this.settings.decelerate=!1,this._move()},c.prototype.end=function(){this.settings.decelerate=!0},c.prototype.stop=function(){this.velocity=0,this.velocityY=0,this.settings.decelerate=!0,a.isFunction(this.settings.stopped)&&this.settings.stopped.call(this)},c.prototype.detach=function(){this._detachListeners(),this.$el.removeClass(b).css("cursor","")},c.prototype.attach=function(){this.$el.hasClass(b)||(this._attachListeners(this.$el),this.$el.addClass(b).css("cursor",this.settings.cursor))},c.prototype._initElements=function(){this.$el.addClass(b),a.extend(this,{xpos:null,prevXPos:!1,ypos:null,prevYPos:!1,mouseDown:!1,throttleTimeout:1e3/this.settings.throttleFPS,lastMove:null,elementFocused:null}),this.velocity=0,this.velocityY=0,a(document).mouseup(a.proxy(this._resetMouse,this)).click(a.proxy(this._resetMouse,this)),this._initEvents(),this.$el.css("cursor",this.settings.cursor),this.settings.triggerHardware&&this.$el.css({"-webkit-transform":"translate3d(0,0,0)","-webkit-perspective":"1000","-webkit-backface-visibility":"hidden"})},c.prototype._initEvents=function(){var b=this;this.settings.events={touchStart:function(a){var c;b._useTarget(a.target,a)&&(c=a.originalEvent.touches[0],b.threshold=b._threshold(a.target,a),b._start(c.clientX,c.clientY))},touchMove:function(a){var c;b.mouseDown&&(c=a.originalEvent.touches[0],b._inputmove(c.clientX,c.clientY),a.preventDefault&&a.preventDefault())},inputDown:function(a){b._useTarget(a.target,a)&&(b.threshold=b._threshold(a.target,a),b._start(a.clientX,a.clientY),b.elementFocused=a.target,"IMG"===a.target.nodeName&&a.preventDefault())},inputEnd:function(a){b._useTarget(a.target,a)&&(b._end(),b.elementFocused=null,a.preventDefault&&a.preventDefault())},inputMove:function(a){b.mouseDown&&(b._inputmove(a.clientX,a.clientY),a.preventDefault&&a.preventDefault())},scroll:function(c){a.isFunction(b.settings.moved)&&b.settings.moved.call(b,b.settings),c.preventDefault&&c.preventDefault()},inputClick:function(a){return Math.abs(b.velocity)>0?(a.preventDefault(),!1):void 0},dragStart:function(a){return b._useTarget(a.target,a)&&b.elementFocused?!1:void 0},selectStart:function(c){return a.isFunction(b.settings.selectStart)?b.settings.selectStart.apply(b,arguments):b._useTarget(c.target,c)?!1:void 0}},this._attachListeners(this.$el,this.settings)},c.prototype._inputmove=function(b,c){{var d=this.$el;this.el}if((!this.lastMove||new Date>new Date(this.lastMove.getTime()+this.throttleTimeout))&&(this.lastMove=new Date,this.mouseDown&&(this.xpos||this.ypos))){var e=b-this.xpos,f=c-this.ypos;if(this.settings.invert&&(e*=-1,f*=-1),this.threshold>0){var g=Math.sqrt(e*e+f*f);if(this.threshold>g)return;this.threshold=0}this.elementFocused&&(a(this.elementFocused).blur(),this.elementFocused=null,d.focus()),this.settings.decelerate=!1,this.velocity=this.velocityY=0;var h=this.scrollLeft(),i=this.scrollTop();this.scrollLeft(this.settings.x?h-e:h),this.scrollTop(this.settings.y?i-f:i),this.prevXPos=this.xpos,this.prevYPos=this.ypos,this.xpos=b,this.ypos=c,this._calculateVelocities(),this._setMoveClasses(this.settings.movingClass),a.isFunction(this.settings.moved)&&this.settings.moved.call(this,this.settings)}},c.prototype._calculateVelocities=function(){this.velocity=this._capVelocity(this.prevXPos-this.xpos,this.settings.maxvelocity),this.velocityY=this._capVelocity(this.prevYPos-this.ypos,this.settings.maxvelocity),this.settings.invert&&(this.velocity*=-1,this.velocityY*=-1)},c.prototype._end=function(){this.xpos&&this.prevXPos&&this.settings.decelerate===!1&&(this.settings.decelerate=!0,this._calculateVelocities(),this.xpos=this.prevXPos=this.mouseDown=!1,this._move())},c.prototype._useTarget=function(b,c){return a.isFunction(this.settings.filterTarget)?this.settings.filterTarget.call(this,b,c)!==!1:!0},c.prototype._threshold=function(b,c){return a.isFunction(this.settings.threshold)?this.settings.threshold.call(this,b,c):this.settings.threshold},c.prototype._start=function(a,b){this.mouseDown=!0,this.velocity=this.prevXPos=0,this.velocityY=this.prevYPos=0,this.xpos=a,this.ypos=b},c.prototype._resetMouse=function(){this.xpos=!1,this.ypos=!1,this.mouseDown=!1},c.prototype._decelerateVelocity=function(a,b){return 0===Math.floor(Math.abs(a))?0:a*b},c.prototype._capVelocity=function(a,b){var c=a;return a>0?a>b&&(c=b):0-b>a&&(c=0-b),c},c.prototype._setMoveClasses=function(a){var b=this.settings,c=this.$el;c.removeClass(b.movingClass.up).removeClass(b.movingClass.down).removeClass(b.movingClass.left).removeClass(b.movingClass.right).removeClass(b.deceleratingClass.up).removeClass(b.deceleratingClass.down).removeClass(b.deceleratingClass.left).removeClass(b.deceleratingClass.right),this.velocity>0&&c.addClass(a.right),this.velocity<0&&c.addClass(a.left),this.velocityY>0&&c.addClass(a.down),this.velocityY<0&&c.addClass(a.up)},c.prototype._move=function(){var b=this._getScroller(),c=b[0],d=this,e=d.settings;e.x&&c.scrollWidth>0?(this.scrollLeft(this.scrollLeft()+this.velocity),Math.abs(this.velocity)>0&&(this.velocity=e.decelerate?d._decelerateVelocity(this.velocity,e.slowdown):this.velocity)):this.velocity=0,e.y&&c.scrollHeight>0?(this.scrollTop(this.scrollTop()+this.velocityY),Math.abs(this.velocityY)>0&&(this.velocityY=e.decelerate?d._decelerateVelocity(this.velocityY,e.slowdown):this.velocityY)):this.velocityY=0,d._setMoveClasses(e.deceleratingClass),a.isFunction(e.moved)&&e.moved.call(this,e),Math.abs(this.velocity)>0||Math.abs(this.velocityY)>0?this.moving||(this.moving=!0,window.requestAnimationFrame(function(){d.moving=!1,d._move()})):d.stop()},c.prototype._getScroller=function(){var b=this.$el;return(this.$el.is("body")||this.$el.is("html"))&&(b=a(window)),b},c.prototype.scrollLeft=function(a){var b=this._getScroller();return"number"!=typeof a?b.scrollLeft():(b.scrollLeft(a),void(this.settings.scrollLeft=a))},c.prototype.scrollTop=function(a){var b=this._getScroller();return"number"!=typeof a?b.scrollTop():(b.scrollTop(a),void(this.settings.scrollTop=a))},c.prototype._attachListeners=function(){var b=this.$el,c=this.settings;a.support.touch&&b.bind("touchstart",c.events.touchStart).bind("touchend",c.events.inputEnd).bind("touchmove",c.events.touchMove),b.mousedown(c.events.inputDown).mouseup(c.events.inputEnd).mousemove(c.events.inputMove),b.click(c.events.inputClick).scroll(c.events.scroll).bind("selectstart",c.events.selectStart).bind("dragstart",c.events.dragStart)},c.prototype._detachListeners=function(){var b=this.$el,c=this.settings;a.support.touch&&b.unbind("touchstart",c.events.touchStart).unbind("touchend",c.events.inputEnd).unbind("touchmove",c.events.touchMove),b.unbind("mousedown",c.events.inputDown).unbind("mouseup",c.events.inputEnd).unbind("mousemove",c.events.inputMove),b.unbind("click",c.events.inputClick).unbind("scroll",c.events.scroll).unbind("selectstart",c.events.selectStart).unbind("dragstart",c.events.dragStart)},a.Kinetic=c,a.fn.kinetic=function(b,d){return this.each(function(){var e=a(this),f=e.data(c.DATA_KEY),g=a.extend({},c.DEFAULTS,e.data(),"object"==typeof b&&b);f||e.data(c.DATA_KEY,f=new c(this,g)),"string"==typeof b&&f[b](d)})}}(window.jQuery||window.Zepto);
$('.slides>*').kinetic({ filterTarget: function(target, e){ if (!/down|start/.test(e.type)){ return !(/area|a|input/i.test(target.tagName)); } }
});
$(document).ready(function() { $(".slides>*").niceScroll({	cursorcolor: "#ddd",	cursorwidth: 5,	cursorborder: 0,	cursorborderradius: 0	});
});
App Layout - Script Codes
App Layout - Script Codes
Home Page Home
Developer Danny
Username ExtremelyGinger
Uploaded September 23, 2022
Rating 3
Size 9,369 Kb
Views 16,192
Do you need developer help for App Layout?

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!

Danny (ExtremelyGinger) Script Codes
Name
Cardiac Rhythm
Notify Me
Timed Notifications
The Venn Diagram
Improved Motion Blur
Add To Cart
Two-faced Bob
Default Template
Simple Domain Placeholder
Dribbble Template
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!