OTM: level select - multi level (power user)
How do I make an otm: level select - multi level (power user)?
What is a otm: level select - multi level (power user)? How do you make a otm: level select - multi level (power user)? This script and codes were developed by Chris Boon on 16 November 2022, Wednesday.
OTM: level select - multi level (power user) Previews
OTM: level select - multi level (power user) - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>OTM: level select - multi level (power user)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/gpzpql.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='hidden-svg-stuff'> <svg height='0' viewBox='0 0 60 60' width='0'> <defs> <path class='check-mark' d='M23.4,45.2l-8.5-11.1c-1-1.5-0.8-3.5,0.7-4.6c1.4-1.1,3.5-0.9,4.6,0.7l5.6,7.3l14-22.4c0.9-1.5,2.9-2,4.5-1 c1.5,0.9,2,2.9,1,4.5L28.7,44.9c-0.6,0.9-1.5,1.5-2.6,1.5c0,0.1-0.1,0.1-0.1,0.1C25,46.5,23.9,46,23.4,45.2z' fill='#fff' id='check-mark'></path> <path class='cross-mark' d='M41.6,42.9c-1.3,1.2-3.3,1.2-4.6,0l-7-8.1l-7,8.1c-1.3,1.2-3.3,1.2-4.6,0c-1.2-1.3-1.2-3.3,0-4.6l7.3-8.3 l-7.3-8.4c-1.2-1.3-1.2-3.3,0-4.6c1.3-1.2,3.3-1.2,4.6,0l7,8.1l7-8.1c1.3-1.2,3.3-1.2,4.6,0c1.3,1.3,1.3,3.3,0,4.6l-7.3,8.4 l7.3,8.3C42.8,39.6,42.8,41.7,41.6,42.9z' fill='#fff' id='cross-mark'></path> </defs> </svg> <svg class='award-icons' height='0' viewBox='0 0 530 530' width='0' x='0px' y='0px'> <defs> <linearGradient id='award-grad1' x1='0%' x2='100%' y1='0%' y2='0%'> <stop offset='0%' style='stop-color:#f7ab1b;stop-opacity:1'></stop> <stop offset='100%' style='stop-color:#f7ab1b;stop-opacity:0'></stop> </linearGradient> <linearGradient id='award-grad2' x1='0%' x2='100%' y1='0%' y2='0%'> <stop offset='0%' style='stop-color:#b5b0b0;stop-opacity:1'></stop> <stop offset='100%' style='stop-color:#b5b0b0;stop-opacity:0'></stop> </linearGradient> <linearGradient id='award-grad3' x1='0%' x2='100%' y1='0%' y2='0%'> <stop offset='0%' style='stop-color:#94513a;stop-opacity:1'></stop> <stop offset='100%' style='stop-color:#94513a;stop-opacity:0'></stop> </linearGradient> <g class='award-star' id='award-star'> <polygon class='star-background' fill='#fcc419' points='265,15 197.8,206.3 15,206.3 164.2,316.9 111.6,515 265,397.5 417.3,515 364.7,316.9 515,206.3 332.2,206.3'></polygon> <polygon class='star-gradient' fill='url(#award-grad1)' points='265,15 265,397.5 417.3,515 364.7,316.9 515,206.3 332.2,206.3 '></polygon> <polygon class='star-background' fill='transparent' points='265,15 197.8,206.3 15,206.3 164.2,316.9 111.6,515 265,397.5 417.3,515 364.7,316.9 515,206.3 332.2,206.3' stroke-linejoin='miter' stroke-width='15' stroke='#e39b00'></polygon> </g> <g class='award-star-silver' id='award-star2'> <polygon class='star-background' fill='#d6d3d3' points='265,15 197.8,206.3 15,206.3 164.2,316.9 111.6,515 265,397.5 417.3,515 364.7,316.9 515,206.3 332.2,206.3'></polygon> <polygon class='star-gradient' fill='url(#award-grad2)' points='265,15 265,397.5 417.3,515 364.7,316.9 515,206.3 332.2,206.3 '></polygon> <polygon class='star-background' fill='transparent' points='265,15 197.8,206.3 15,206.3 164.2,316.9 111.6,515 265,397.5 417.3,515 364.7,316.9 515,206.3 332.2,206.3' stroke-linejoin='miter' stroke-width='15' stroke='rgb(150,150,150)'></polygon> </g> <g class='award-star' id='award-star3'> <polygon class='star-background' fill='#bf8863' points='265,15 197.8,206.3 15,206.3 164.2,316.9 111.6,515 265,397.5 417.3,515 364.7,316.9 515,206.3 332.2,206.3'></polygon> <polygon class='star-gradient' fill='url(#award-grad3)' points='265,15 265,397.5 417.3,515 364.7,316.9 515,206.3 332.2,206.3 '></polygon> <polygon class='star-background' fill='transparent' points='265,15 197.8,206.3 15,206.3 164.2,316.9 111.6,515 265,397.5 417.3,515 364.7,316.9 515,206.3 332.2,206.3' stroke-linejoin='miter' stroke-width='15' stroke='#94513a'></polygon> </g> <g class='award-trophy' id='award-trophy'> <path class='trophy-background' d="M50.6,127.3h53.1c8.1,72.9,28.6,136.6,57,182.1C95.2,273.7,50.7,205.5,50.6,127.3z M479.7,127.3 c-0.1,78.2-44.5,146.4-110.1,182.1c28.4-45.5,49-109.3,57-182.1H479.7L479.7,127.3z M323.1,361.9C431.7,336.4,512.4,241,512.4,127.2 c0-11-0.8-21.8-2.3-32.5h-80.8c0.7-11.9,1-24,1-36.2c0-14.8-0.5-29.3-1.5-43.5H101.5c-0.9,14.2-1.5,28.7-1.5,43.5 c0,12.3,0.4,24.3,1.1,36.2H20.3c-1.5,10.6-2.3,21.5-2.3,32.5C18,241.1,98.7,336.5,207.4,362c12.6,9.3,26,15.6,39.9,18.5v48.9 c0,38.6-101.2,52.8-101.2,52.8c-9,0-16.3,7.3-16.3,16.4c0,9,7.3,16.3,16.3,16.3h238.3c9,0,16.3-7.3,16.3-16.3s-7.3-16.4-16.3-16.4 c0,0-104.4-14.3-104.4-52.8v-48.3C295,378.5,309.5,371.9,323.1,361.9" fill='#fcc419'></path> <path class='trophy-gradient' d="M323.1,361.9C431.7,336.4,512.4,241,512.4,127.2c0-11-0.8-21.8-2.3-32.5h-80.8c0.7-11.9,1-24,1-36.2 c0-14.8-0.5-29.3-1.5-43.5H265.2v500h119.1c9,0,16.3-7.3,16.3-16.3s-7.3-16.4-16.3-16.4c0,0-104.4-14.3-104.4-52.8v-48.3 C295,378.5,309.5,371.9,323.1,361.9z M426.6,127.3h53.1c-0.1,78.2-44.5,146.4-110.1,182.1C398.1,264,418.6,200.2,426.6,127.3z" fill='url(#award-grad1)'></path> <path class='trophy-background' d="M50.6,127.3h53.1c8.1,72.9,28.6,136.6,57,182.1C95.2,273.7,50.7,205.5,50.6,127.3z M479.7,127.3 c-0.1,78.2-44.5,146.4-110.1,182.1c28.4-45.5,49-109.3,57-182.1H479.7L479.7,127.3z M323.1,361.9C431.7,336.4,512.4,241,512.4,127.2 c0-11-0.8-21.8-2.3-32.5h-80.8c0.7-11.9,1-24,1-36.2c0-14.8-0.5-29.3-1.5-43.5H101.5c-0.9,14.2-1.5,28.7-1.5,43.5 c0,12.3,0.4,24.3,1.1,36.2H20.3c-1.5,10.6-2.3,21.5-2.3,32.5C18,241.1,98.7,336.5,207.4,362c12.6,9.3,26,15.6,39.9,18.5v48.9 c0,38.6-101.2,52.8-101.2,52.8c-9,0-16.3,7.3-16.3,16.4c0,9,7.3,16.3,16.3,16.3h238.3c9,0,16.3-7.3,16.3-16.3s-7.3-16.4-16.3-16.4 c0,0-104.4-14.3-104.4-52.8v-48.3C295,378.5,309.5,371.9,323.1,361.9" stroke-linejoin='miter' stroke-width='15' stroke='#e39b00' fill='transparent'></path> </g> </defs> </svg>
</div>
<div class='container level-select-screen'> <div class='header-bar header-bar-color1'> <div class='header-bar__btn header-bar__btn--back'> <svg height='48px' viewBox='0 0 48 48' width='48px' x='0px' y='0px'> <line fill='none' stroke-linecap='round' stroke-width='3' stroke='#444' x1='14' x2='34' y1='24.5' y2='24.5'></line> <line fill='none' stroke-linecap='round' stroke-width='3' stroke='#444' x1='14' x2='23' y1='24' y2='16.5'></line> <line fill='none' stroke-linecap='round' stroke-width='3' stroke='#444' x1='14' x2='23' y1='25' y2='32.5'></line> </svg> </div> <div class='header-bar__title'>Level Select</div> <div class='header-bar__btn header-bar__btn--overflow-menu'> <svg height='48px' viewBox='0 0 48 48' width='48px' x='0px' y='0px'> <line fill='none' stroke-linecap='round' stroke-width='3' stroke='#444' x1='14' x2='34' y1='24.5' y2='24.5'></line> <line fill='none' stroke-linecap='round' stroke-width='3' stroke='#444' x1='14' x2='34' y1='16.5' y2='16.5'></line> <line fill='none' stroke-linecap='round' stroke-width='3' stroke='#444' x1='14' x2='34' y1='32.5' y2='32.5'></line> </svg> </div> </div> <div class="content"> <div class="welcome-message"> <p class="welcome-hello">Hi Chris!</p> <p>What level do you want to practice?</p> </div><!--end welcome-message--> <div class="activated-levels"> <div class="level-item"> <div class="level-card level-card-active"> <div class="cover-image"> <img src ="http://www.iqonlinepractice.com/ui/bookdata/ls1/images/medBook.jpg" alt="" role="presentation"> </div> <div class="level-info"> <div class= "level-title"> <span>Level 1</span><!--note this uses spans so it could have two lines. eg for Q it would be <span>Reading and Writing</span> <span>Level 1</span>--> </div> <div class='progressbar-container'> <div class='progressbar' style='width:65%'></div> </div> <div class="performance-container"> <div class="performance performance--bronze"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star3"</use></svg></div> <div class="performance-number">54</div> </div> <div class="performance performance--silver"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star2"</use></svg></div> <div class="performance-number">47</div> </div> <div class="performance performance--gold"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star"</use></svg></div> <div class="performance-number">21</div> </div> <div class="performance performance--trophy"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'> <use xlink:href="#award-trophy"</use></svg></div> <div class="performance-number">8</div> </div> </div> </div><!--end level-info--> </div><!--end level-card--> <div class="purchase-info purchase-info--closed"> <div class="purchase-info__text">expires: 10/27/2016</div> <div class="huh-button">?</div> </div> </div><!--end level-item--> <div class="level-item"> <div class="level-card level-card-active"> <div class="cover-image"> <img src ="http://www.iqonlinepractice.com/ui/bookdata/ls2/images/medBook.jpg" alt="" role="presentation"> </div> <div class="level-info"> <div class= "level-title"> <span>Level 2</span><!--note this uses spans so it could have two lines. eg for Q it would be <span>Reading and Writing</span> <span>Level 1</span>--> </div> <div class='progressbar-container'> <div class='progressbar' style='width:65%'></div> </div> <div class="performance-container"> <div class="performance performance--bronze"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star3"</use></svg></div> <div class="performance-number">54</div> </div> <div class="performance performance--silver"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star2"</use></svg></div> <div class="performance-number">47</div> </div> <div class="performance performance--gold"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star"</use></svg></div> <div class="performance-number">21</div> </div> <div class="performance performance--trophy"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'> <use xlink:href="#award-trophy"</use></svg></div> <div class="performance-number">8</div> </div> </div> </div><!--end level-info--> </div><!--end level-card--> <div class="purchase-info purchase-info--closed"> <div class="purchase-info__text">expires: 10/27/2016</div> <div class="huh-button">?</div> </div> </div><!--end level-item--> <div class="level-item"> <div class="level-card level-card-active"> <div class="cover-image"> <img src ="http://www.iqonlinepractice.com/ui/bookdata/ls3/images/medBook.jpg" alt="" role="presentation"> </div> <div class="level-info"> <div class= "level-title"> <span>Level 3</span><!--note this uses spans so it could have two lines. eg for Q it would be <span>Reading and Writing</span> <span>Level 1</span>--> </div> <div class='progressbar-container'> <div class='progressbar' style='width:65%'></div> </div> <div class="performance-container"> <div class="performance performance--bronze"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star3"</use></svg></div> <div class="performance-number">54</div> </div> <div class="performance performance--silver"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star2"</use></svg></div> <div class="performance-number">47</div> </div> <div class="performance performance--gold"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star"</use></svg></div> <div class="performance-number">21</div> </div> <div class="performance performance--trophy"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'> <use xlink:href="#award-trophy"</use></svg></div> <div class="performance-number">8</div> </div> </div> </div><!--end level-info--> </div><!--end level-card--> <div class="purchase-info purchase-info--closed"> <div class="purchase-info__text">expires: 10/27/2016</div> <div class="huh-button">?</div> </div> </div><!--end level-item--> </div><!--end activated-levels--> <div class="expired-levels"> <header class="expired-header"> <h2 class="expired-title">Expired content </h2> <div class="huh-button">?</div> </header> <div class="level-item level-item-expired"> <div class="level-card"> <div class="cover-image"> <img src ="http://www.iqonlinepractice.com/ui/bookdata/ls0/images/medBook.jpg" alt="" role="presentation"> </div> <div class="level-info"> <div class= "level-title"> <span>Intro Level</span><!--note this uses spans so it could have two lines. eg for Q it would be <span>Reading and Writing</span> <span>Level 1</span>--> </div> <div class='progressbar-container'> <div class='progressbar' style='width:85%'></div> </div> <div class="performance-container"> <div class="performance performance--bronze"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star3"</use></svg></div> <div class="performance-number">72</div> </div> <div class="performance performance--silver"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star2"</use></svg></div> <div class="performance-number">68</div> </div> <div class="performance performance--gold"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'><use xlink:href="#award-star"</use></svg></div> <div class="performance-number">34</div> </div> <div class="performance performance--trophy"> <div class="performance-icon"><svg class='award-icon-svg' viewBox='0 0 530 530' x='0px' y='0px'> <use xlink:href="#award-trophy"</use></svg></div> <div class="performance-number">17</div> </div> </div> </div><!--end level-info--> </div><!--end level-card--> <div class="purchase-info purchase-info--closed"> <div class="expired-button">Expired: Click to renew</div> </div> </div><!--end level-item--> </div><!--end expired-levels--> </div><!--end content--> <div class="controls-area"> <div class="controls-button controls-button--add-level-button">Add another level</div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
OTM: level select - multi level (power user) - Script Codes CSS Codes
.hidden-svg-stuff { height: 0; width: 0; position: absolute; visibility: hidden;
}
*, *:before, *:after { box-sizing: border-box;
}
html { height: 100%; overflow: hidden;
}
body { height: 100%; overflow: hidden;
}
.container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%;
}
html, body { font-family: "Open Sans", "Roboto", "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.5; color: #444;
}
.content { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; background-color: #eee; overflow: auto; -webkit-overflow-scrolling: touch;
}
.welcome-message { padding: 8px 16px 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
}
.welcome-hello { font-size: 20px;
}
.activated-levels, .expired-levels { padding: 8px; overflow: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto;
}
.level-item { /* flex: 1 1 auto; */ width: 100%; padding: 8px;
}
@media all and (min-width: 640px) { .level-item { width: 50%; }
}
.level-card { background: #fff; border-radius: 2px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.35); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex;
}
@media all and (max-width: 300px) { .level-card { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-line-pack: stretch; align-content: stretch; padding: 0; }
}
.cover-image { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto;
}
@media all and (max-width: 300px) { .cover-image { background-color: #ddd; margin-bottom: 8px; } .cover-image.cover-image img { max-width: 100%; }
}
.cover-image img { display: block; width: 100%; max-width: 144px;
}
.level-info { padding: 4px 8px; 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-flex: 1; -ms-flex: 1 2 auto; flex: 1 2 auto;
}
.level-info .level-title { font-size: 20px;
}
.progressbar { height: 12px; width: 100%; background: #fed900; border-radius: 6px 0 0 6px;
}
.progressbar-container { height: 12px; background: #ccc; margin-top: 2px; margin-bottom: 2px; border-radius: 6px; overflow: hidden;
}
.performance-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around;
}
@media all and (max-width: 200px) { .performance-container { -ms-flex-wrap: wrap; flex-wrap: wrap; }
}
.performance { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; 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: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding: 0 4px;
}
.performance-icon { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 8px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
.performance .award-icon-svg { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; height: auto; max-width: 48px; min-width: 16px;
}
.performance-number { text-align: center; position: relative; background: rgba(255, 0, 0, 0.3); color: #555;
}
.performance-number:before { position: absolute; display: block; content: ''; width: 0; height: 0; top: -7px; left: calc(50% - 6px); border-style: solid; border-width: 0 6px 7px 6px; border-color: transparent transparent #007bff transparent;
}
.performance--bronze .performance-number { background-color: #ecd9cd;
}
.performance--bronze .performance-number:before { border-color: transparent transparent #ecd9cd transparent;
}
.performance--silver .performance-number { background-color: #e9eaeb;
}
.performance--silver .performance-number:before { border-color: transparent transparent #e9eaeb transparent;
}
.performance--gold .performance-number { background-color: #feeda5;
}
.performance--gold .performance-number:before { border-color: transparent transparent #feeda5 transparent;
}
.performance--trophy .performance-number { background-color: #feeda5;
}
.performance--trophy .performance-number:before { border-color: transparent transparent #feeda5 transparent;
}
.purchase-info { color: #aaa; font-size: 14px; padding: 8px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
}
.purchase-info__text { text-align: right; cursor: pointer;
}
.purchase-info .huh-button { margin-left: 0.5em; background: #aaa; color: #eee;
}
.huh-button { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; text-align: center; font-weight: 700; border-radius: 50%; height: 1.5em; width: 1.5em; line-height: 1.5em; cursor: pointer;
}
.expired-levels { background-color: #aaa;
}
.expired-levels .purchase-info { padding-top: 0;
}
.expired-header { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 4px 16px 8px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.expired-header .huh-button { background-color: #fff; color: #aaa; margin-left: 0.5em;
}
.expired-title { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; font-size: 20px; color: #fff; text-align: center;
}
.expired-button { cursor: pointer; background-color: #d32c3b; color: #fff; padding: 8px 16px; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: center;
}
.controls-area { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: stretch; -ms-flex-pack: stretch; justify-content: stretch; height: 48px; background-color: rgba(255, 255, 255, 0.4); border-top: 1px solid #31B7BF;
}
.controls-button { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; text-transform: uppercase; font-size: 20px; background-color: #fff; color: #31B7BF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: -1px 0 0 1px rgba(0, 0, 0, 0.2); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.controls-button.hidden { display: none;
}
OTM: level select - multi level (power user) - Script Codes JS Codes
$(document).ready(function(){ var els = { $lvlCrd: $(".level-card-active"), $xprdCrd: $(".level-item-expired"), $cntnr: $(".container"), $cntnt: $(".content"), $hdrBr: $(".header-bar"), $back: $(".header-bar__btn--back"), $cntrlArea: $(".controls-area"), $addLvlBtn: $(".controls-button--add-level-button"), $animateElement: $("<div class='animate-element'></div>") } var animationSpeed = 1, masterTimeline = new TimelineMax(), state = false; var animateOut = function($this,cardColor){ state = true; els.$cntnr.append(els.$animateElement); var units = { top: $this.offset().top, left: $this.offset().left, width: $this.width(), height: $this.height(), newTop: els.$cntnt.position().top, newLeft: els.$cntnt.position().left, newWidth: els.$cntnt.outerWidth(), newHeight: els.$cntnr.outerHeight() - els.$hdrBr.outerHeight() } masterTimeline.timeScale(animationSpeed) .addLabel('init') .set(els.$animateElement,{clearProps:"all"}) .set(els.$animateElement, { position:"absolute", top: units.top, left: units.left, width: units.width, height: units.height, background:cardColor, opacity:0, }) .to(els.$animateElement, 0.2, {opacity:1} ) .to(els.$animateElement, 0.3, { top: units.newTop, left: 0, width: units.newWidth, height: units.newHeight }) } var animateAddLevel = function(){ state = true; els.$cntnr.append(els.$animateElement); var units = { fromTop: els.$hdrBr.outerHeight() } masterTimeline.timeScale(animationSpeed) .addLabel('init') .set(els.$animateElement,{clearProps:"all"}) .set(els.$animateElement, { position:"absolute", top: units.fromTop, left: 0, bottom:0, right: 0, background:"#fff", yPercent:100 }) /*.to([els.$cntnt,els.$cntrlArea], 0.4, {opacity:0});*/ .to(els.$animateElement, 0.4, { yPercent:0 },"start") .to(els.$cntrlArea, 0.4, {opacity:0},"start"); } els.$lvlCrd.on("click", function(){ if ( state === false){ animateOut( $(this),"#31B7BF" ); } }) els.$xprdCrd.on("click", function(){ if ( state === false){ animateOut( $(this).find(".level-card"),"#fff" ); } }) els.$addLvlBtn.on("click", function(){ if ( state === false){ animateAddLevel(); } }) els.$back.on("click", function(){ function resetAnimation(){ masterTimeline = new TimelineMax(); state = false; els.$animateElement.remove(); } masterTimeline.tweenTo("init", {onComplete:resetAnimation}); });
});
| Developer | Chris Boon |
| Username | chrisboon27 |
| Uploaded | November 16, 2022 |
| Rating | 3 |
| Size | 9,092 Kb |
| Views | 12,144 |
Do you need developer help for OTM: level select - multi level (power user)?
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!
Chris Boon (chrisboon27) Script Codes
| Name | Size |
| Response to stack-overflow question | 1,654 Kb |
| Chrome flexbox bug - not redrawing when window height reduces | 2,368 Kb |
| Chrome flexbox bug - breaking layout when repainting | 2,741 Kb |
| Text-transform is presentational | 2,700 Kb |
| Moving background-image on mousemove | 2,040 Kb |
| HOM Date Calculator | 7,517 Kb |
| DDCP homepage tiles | 3,686 Kb |
| Pan image on mousemove | 3,048 Kb |
| Cursor transitions on click | 2,775 Kb |
| On The Move UI | 8,412 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| Tooltip in table | Roine | 3,713 Kb |
| Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
| CSSOff 2013 Submission | Codewunder | 14,766 Kb |
| Pure css thumbnails hover | Ksksoft | 1,773 Kb |
| Slide out Menu | Rbiggs | 4,936 Kb |
| Pure CSS Tooltips | Mobius1 | 2,271 Kb |
| Countdown Timer | Massiebn | 3,001 Kb |
| CSS3 Snow Animation | NickyCDK | 1,695 Kb |
| A form arranged using automatic placement. | Vikasford | 2,103 Kb |
| Marching Squares Visualized | Sakri | 7,074 Kb |
Do you want hide your ip address?
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!