"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Rplus/pen/MwOqaN?limit=all&page=4&q=mobile" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'> <style class="cp-pen-styles">/* $mobile-height: 90vh; */ * { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; } html { height: 100%; } body { font-family: sans-serif; background-color: #31465b; background-image: -webkit-linear-gradient(120deg, rgba(0, 0, 0, 0.3), transparent 50%); background-image: linear-gradient(-30deg, rgba(0, 0, 0, 0.3), transparent 50%); } .intro { width: 80%; max-width: 30rem; padding-bottom: 1rem; margin: .5em auto 1em; text-align: center; text-transform: capitalize; border-bottom: 1px dashed #999; color: #fff; } .intro small { display: block; opacity: .5; font-style: italic; text-transform: capitalize; } .info { margin: 1em; font-size: .9em; font-style: italic; font-family: serif; text-align: right; color: #fff; text-shadow: 1px 1px 3px #000; } .info a { color: inherit; } .fa, [class^="icon-"] { display: inline-block; margin: 0 .5em; width: 1em; text-align: center; line-height: inherit; cursor: pointer; } .fa::before, [class^="icon-"]::before { display: block; } .mobile-wrap { max-width: 375px; height: 100vh; max-height: 100vh; margin: auto; /* margin: 5vh auto; */ overflow: hidden; box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 1px; background-color: #005a94; } .statusbar { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 5px; line-height: 24px; font-size: 12px; background-color: #005a94; color: #fff; } .statusbar :first-child { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .main-header { overflow: hidden; background-color: #0073bd; color: #fff; } .click-circle { position: absolute; top: 100px; left: 350px; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); visibility: hidden; opacity: 0; } .click-circle.active { -webkit-animation: circle .3s; animation: circle .3s; visibility: visible; } @-webkit-keyframes circle { 0% { width: 0; height: 0; box-shadow: inset 0px 0px 0px 30px #fff, inset 1px 1px 0px 30px #000, 1px 1px 0px 0px #000; opacity: 1; } 100% { width: 100px; height: 100px; box-shadow: inset 0px 0px 0px 1px #fff, inset 1px 1px 0px 1px rgba(0, 0, 0, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5); opacity: .6; } } @keyframes circle { 0% { width: 0; height: 0; box-shadow: inset 0px 0px 0px 30px #fff, inset 1px 1px 0px 30px #000, 1px 1px 0px 0px #000; opacity: 1; } 100% { width: 100px; height: 100px; box-shadow: inset 0px 0px 0px 1px #fff, inset 1px 1px 0px 1px rgba(0, 0, 0, 0.5), 1px 1px 0px 0px rgba(0, 0, 0, 0.5); opacity: .6; } } .toolbar { display: -webkit-box; display: -ms-flexbox; display: flex; height: 3em; line-height: 3em; } .main-title { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-left: 1em; font-size: 1.25em; font-weight: normal; } .minimap { position: relative; height: 200px; -webkit-transition: height 0.5s cubic-bezier(0.75, 1.75, 0.9, 0.8); transition: height 0.5s cubic-bezier(0.75, 1.75, 0.9, 0.8); background-color: #0073bd; color: #fff; overflow-x: auto; overflow-y: visible; } .is-mini .minimap { height: 75px; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .is-hidden .minimap { height: 0; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .mini-lists { position: absolute; top: 0; left: 0; bottom: 0; height: 50%; margin: auto 85% auto 15%; list-style-type: none; text-align: center; white-space: nowrap; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; } .is-mini .mini-lists { -webkit-transform: scaleX(0.375); transform: scaleX(0.375); } .mini-list { position: relative; display: inline-block; width: 60px; vertical-align: top; cursor: pointer; } .mini-list::before, .mini-list::after { -webkit-transition: opacity .2s; transition: opacity .2s; } .mini-list::before { content: attr(data-title); position: absolute; top: -25px; left: 0; right: 0; font-size: 12px; line-height: 1; -webkit-transform: translateY(-50%); transform: translateY(-50%); white-space: normal; opacity: .8; } .is-mini .mini-list::before { opacity: 0; visibility: hidden; } .mini-list::after { content: ""; display: block; background-color: #fff; max-width: 50%; height: 100%; margin: auto; border-radius: 5px; opacity: .3; } .mini-list:hover::after { opacity: .5; } .mini-list.active::before, .mini-list.active::after { opacity: 1; } .lists-wrap { position: relative; } .lists-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 0; height: 72px; background-image: -webkit-linear-gradient(top, #0073bd 0, #0073bd 48px, rgba(0, 0, 0, 0.2) 48px, transparent 57.6px); background-image: linear-gradient(to bottom, #0073bd 0, #0073bd 48px, rgba(0, 0, 0, 0.2) 48px, transparent 57.6px); } .lists { position: relative; white-space: nowrap; letter-spacing: normal; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; } .list { display: inline-block; vertical-align: top; width: 75%; margin: 0 2.5%; background-color: #e7ebed; border-radius: 5px; } .list:nth-of-type(1) { margin-left: 12.5%; } .list-header { position: relative; height: 48px; line-height: 48px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background-color: #e7ebed; color: rgba(0, 0, 0, 0.5); cursor: -webkit-grab; border-radius: 5px 5px 0 0; } .list-header::-moz-selection { background-color: transparent; } .list-header::selection { background-color: transparent; } .primary-plus { position: absolute; right: 5%; top: 100%; width: 2rem; height: 2rem; line-height: 2rem; border-radius: 50%; color: #fff; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; font-style: normal; font-size: 1.5em; font-weight: 100; background-color: #ccc; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); cursor: pointer; } .primary-plus:hover { background-color: #c7c7c7; } .primary-plus:active { margin-left: 1px; margin-top: 1px; background-color: #bfbfbf; } .list-items { max-height: calc(100vh - 325px); padding-top: 16px; overflow: auto; -webkit-transition: max-height .3s; transition: max-height .3s; will-change: max-height; } .is-mini .list-items { max-height: calc(100vh - 200px); } .is-hidden .list-items { max-height: calc(100vh - 125px); } .list-item { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 3em; padding: 10px; margin: .5em; background-color: #fff; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); border-radius: 5px; } .list-avatar { border-radius: 5px; } .list-tags { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .list-tag { display: inline-block; width: 3em; margin-right: 5px; border-bottom: 5px solid; border-radius: 5px; } .list-thumb { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: -10px -10px 0; border-radius: 5px 5px 0 0; padding-bottom: 50%; min-height: 80px; background-repeat: no-repeat; background-position: 50%; background-size: cover; } .list-tag--1 { border-color: #ffee99; } .list-tag--2 { border-color: #bbff99; } .list-tag--3 { border-color: #99ffcc; } .list-tag--4 { border-color: #99ddff; } .list-tag--5 { border-color: #aa99ff; } </style></head><body> <div class="mobile-wrap"> <div class="statusbar"> <div class="left"></div> <div class="right"><i class="fa fa-wifi"></i><i class="fa fa-signal"></i><i class="fa fa-heart-o"></i> <time datetime="2015-06-25T12:30:30" class="time">12:30</time> </div> </div> <header class="main-header"> <div class="toolbar"><i class="fa fa-arrow-left"></i> <h2 class="main-title">My board</h2><i class="fa fa-search"></i><i class="fa fa-ellipsis-v"></i></div> </header> <main class="main-content is-mini"> <nav class="minimap"> <ul class="mini-lists"> <li data-title="UI" class="mini-list active"></li> <li data-title="RD" class="mini-list"></li> <li data-title="SA" class="mini-list"></li> <li data-title="User Test blabla" class="mini-list"></li> <li data-title="PM" class="mini-list"></li> <li data-title="M1" class="mini-list"></li> <li data-title="M2" class="mini-list"></li> <li data-title="M3" class="mini-list"></li> </ul> </nav> <div class="lists-wrap"> <ul class="lists"> <li class="list"> <h3 class="list-header"><i class="fa fa-ellipsis-v"></i>UI<i class="primary-plus">+</i></h3> <div class="list-items"> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--4"></span></div> </div> <div class="list-item"> <div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--3"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--4"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> </div> </li> <li class="list"> <h3 class="list-header"><i class="fa fa-ellipsis-v"></i>RD<i class="primary-plus">+</i></h3> <div class="list-items"> <div class="list-item"> <div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--1"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--1"></span><span class="list-tag list-tag--2"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> </div> </li> <li class="list"> <h3 class="list-header"><i class="fa fa-ellipsis-v"></i>SA<i class="primary-plus">+</i></h3> <div class="list-items"> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--4"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--4"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--4"></span></div> </div> <div class="list-item"> <div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div> </div> </div> </li> <li class="list"> <h3 class="list-header"><i class="fa fa-ellipsis-v"></i>User Test blabla<i class="primary-plus">+</i></h3> <div class="list-items"> <div class="list-item"> <div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div> </div> <div class="list-item"> <div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--1"></span><span class="list-tag list-tag--5"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--2"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> </div> </li> <li class="list"> <h3 class="list-header"><i class="fa fa-ellipsis-v"></i>PM<i class="primary-plus">+</i></h3> <div class="list-items"> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--2"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--1"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--1"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--5"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--1"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> </div> </li> <li class="list"> <h3 class="list-header"><i class="fa fa-ellipsis-v"></i>M1<i class="primary-plus">+</i></h3> <div class="list-items"> <div class="list-item"> <div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--4"></span></div> </div> <div class="list-item"> <div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--5"></span></div> </div> </div> </li> <li class="list"> <h3 class="list-header"><i class="fa fa-ellipsis-v"></i>M2<i class="primary-plus">+</i></h3> <div class="list-items"> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--4"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--1"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--1"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--2"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--4"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--4"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--1"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> </div> </li> <li class="list"> <h3 class="list-header"><i class="fa fa-ellipsis-v"></i>M3<i class="primary-plus">+</i></h3> <div class="list-items"> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--2"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--5"></span><span class="list-tag list-tag--4"></span><span class="list-tag list-tag--5"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span></div> </div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--3"></span><span class="list-tag list-tag--5"></span></div><img src="http://placekitten.com/g/50/50" class="list-avatar" /></div> <div class="list-item"> <div class="list-tags"><span class="list-tag list-tag--2"></span><span class="list-tag list-tag--1"></span></div> </div> <div class="list-item"> <div style="background-image: url(http://placekitten.com/g/300/210)" class="list-thumb"></div> </div> </div> </li> </ul> </div> </main> <div class="click-circle"></div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >/* global $, document, console, window */ (function () { 'use strict'; var $mobileWrap = document.querySelector('.mobile-wrap'); var $mainHeader = document.querySelector('.main-header'); var $toolbar = document.querySelector('.toolbar'); var $minimap = document.querySelector('.minimap'); var $miniLists = document.querySelector('.mini-lists'); var $miniList = document.querySelectorAll('.mini-list'); var $mainContent = document.querySelector('.main-content'); var $listsWrap = document.querySelector('.lists-wrap'); var $lists = document.querySelector('.lists'); var $list = document.querySelectorAll('.list'); var $listItems = document.querySelectorAll('.list-items'); var $clickCircle = document.querySelector('.click-circle'); var $listHeader = document.querySelector('.list-header'); var _mainHeaderTop = $mainHeader.getBoundingClientRect().top; var _mobileWrapWidth = $mobileWrap.getBoundingClientRect().width; var _docWidth = document.documentElement.clientWidth; var _miniListsWidth = 60 * $miniList.length / 0.85; // 15% margin-left var _listGap = $list[1].getBoundingClientRect().left - $list[0].getBoundingClientRect().left; // 15% margin-left var _listLen = $list.length; var currentIndex = 0; var newIndex = 0; // minimap state var minimapClass = ['', 'is-mini', 'is-mini is-hidden']; var minimapClassLen = minimapClass.length; var minimapClassCount = 1; var setMiniMapState = function(dir) { dir = (dir > 0) ? 1 : -1; if (minimapClassCount === minimapClassLen - 1 && 1 === dir) { return; } minimapClassCount = (minimapClassCount + dir) % minimapClassLen; $mainContent.className = 'main-content ' + minimapClass[minimapClassCount]; }; // var getIndex = function(node) { // var i = 0; // while(node.previousSibling){ // node = node.previousSibling; // if(node.nodeType === 1) { // i++; // } // } // return i; // }; var updateMinimapScroll = function() { var x = Math.round((_miniListsWidth - _mobileWrapWidth) * newIndex / ($miniList.length - 1)); var shiftX = function(dx) { $minimap.scrollLeft = dx; }; var _x = $minimap.scrollLeft; (function animloop(){ var dir = (_x > x) ? -1 : 1; var step = dir * 10; if ((x - _x) * dir > (step * dir - 1)) { shiftX(_x + step); window.requestAnimationFrame(animloop); } else { shiftX(x); } _x += step; })(); }; var switcher = function(_newIndex) { newIndex = _newIndex; // avoid switching to currentItem if (newIndex === currentIndex) { return; } [].forEach.call($miniList, function(_list, v) { _list.classList.remove('active'); }); $miniList[newIndex].classList.add('active'); updateMinimapScroll(); $lists.style.transform = 'translateX(-' + _listGap * (newIndex) + 'px)'; currentIndex = _newIndex; // minify minimap if (minimapClassCount === 0) { setMiniMapState(1); } }; // $('.list-items').on('scroll', function(event) { // console.log(111511); // if (0 === this.scrollTop) { // console.log(11111); // setMiniMapState(-1); // } // }); /// /// /// $clickCircle.addEventListener('animationend', function() { $clickCircle.classList.remove('active'); }); $miniLists.addEventListener('click', function(e) { var _this = e.target; // cirecle position & animation $clickCircle.classList.remove('active'); $clickCircle.style.cssText = 'top: ' + e.pageY + 'px; left: ' + e.pageX + 'px;'; $clickCircle.classList.add('active'); if (_this.classList.contains('mini-list')) { switcher($(_this).index()); } }); $($lists).on('click', '.list', function(event) { switcher($(this).index()); }); // $($listItems).on('scroll', function(event) { // if (0 === this.scrollTop) { // setMiniMapState(-1); // } else { // console.log(minimapClassCount); // setMiniMapState(1); // } // }); var init = (function() { var _listItemHeight = (function() { var _maxHeight = 0; [].forEach.call($listItems, function(_item) { _maxHeight = _item.scrollHeight > _maxHeight ? _item.scrollHeight : _maxHeight; }); return _maxHeight; })(); // sync height [].forEach.call($listItems, function(_item) { $miniList[$(_item).parent().index()].style.height = (100 * _item.scrollHeight / _listItemHeight) + '%'; }); })(); // swipe detect ref.: http://stackoverflow.com/a/23230280 $listsWrap.addEventListener('touchstart', handleTouchStart, true); $listsWrap.addEventListener('touchmove', handleTouchMove, true); $mainContent.addEventListener('mousedown', handleTouchStart, true); $mainContent.addEventListener('mousemove', handleTouchMove, true); $mainContent.addEventListener('mouseup', handleTouchEnd, true); var xDown = null; var yDown = null; var swipStartEle; function handleTouchStart(evt) { // console.log('handleTouchStart'); var _target = $(evt.target); // if (_target.hasClass('list-header') || _target.parents('.list-header').length) { return; } // console.log(_target, 333); if ('touchstart' === evt.type) { xDown = evt.touches[0].clientX; yDown = evt.touches[0].clientY; } else { xDown = evt.clientX; yDown = evt.clientY; } swipStartEle = evt.target; } function handleTouchEnd(evt) { xDown = null; yDown = null; } function handleTouchMove(evt) { var xUp ,yUp; if ( ! xDown || ! yDown ) { return; } if ('touchmove' === evt.type) { xUp = evt.touches[0].clientX; yUp = evt.touches[0].clientY; } else { xUp = evt.clientX; yUp = evt.clientY; } var xDiff = xDown - xUp; var yDiff = yDown - yUp; if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) { if ( xDiff > 0 ) { // ledt switcher(Math.min(currentIndex + 1, _listLen - 1)); } else { // right switcher(Math.max(currentIndex - 1, 0)); } } else { if ( yDiff > 0 ) { // up setMiniMapState(1); } else { // down if (swipStartEle.classList.contains('list-header') || $(swipStartEle).parents('.list-header').length || !$(evt.target).closest('.list-items').scrollTop()) { setMiniMapState(-1); updateMinimapScroll(); } } } /* reset values */ xDown = null; yDown = null; } })(); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: