Glossary Mock

Developer
Neviton
Size
4,525 Kb
Views
12,144
  1. Glossary Mock Previews
  2. Glossary Mock HTML Codes
  3. Glossary Mock CSS Codes
  4. Glossary Mock JS Codes

How do I make an glossary mock?

What is a glossary mock? How do you make a glossary mock? This script and codes were developed by Neviton on 24 November 2022, Thursday.

Glossary Mock Previews
IQ Test

Glossary Mock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Glossary Mock</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="nav navbar-default"> <div class="container"> <ul class="nav navbar-nav"> <li><a href="#">Link Static</a></li> </ul> </div>
</nav>
<div class="stickable"> <nav class="navbar navbar-default"> <div class="container glossary"> <a href="" class="nav-btns prev disabled">&lsaquo;</a> <div class="wrapper"> <ul class="nav navbar-nav"> <li><a href="#0" class="current">#</a></li> <li><a href="#A">A</a></li> <li><a href="#B">B</a></li> <li><a href="#C">C</a></li> <li><a href="#D">D</a></li> <li><a href="#E">E</a></li> <li><a href="#F">F</a></li> <li><a href="#G">G</a></li> <li><a href="#H">H</a></li> <li><a href="#I">I</a></li> <li><a href="#J">J</a></li> <li><a href="#K">K</a></li> <li><a href="#L">L</a></li> <li><a href="#M">M</a></li> <li><a href="#N">N</a></li> <li><a href="#O">O</a></li> <li><a href="#P">P</a></li> <li><a href="#Q">Q</a></li> <li><a href="#R">R</a></li> <li><a href="#S">S</a></li> <li><a href="#T">T</a></li> <li><a href="#U">U</a></li> <li><a href="#V">V</a></li> <li><a href="#W">W</a></li> <li><a href="#X">X</a></li> <li><a href="#Y">Y</a></li> <li><a href="#Z">Z</a></li> </ul> </div> <a href="" class="nav-btns next">&rsaquo;</a> </div> </nav>
</div>
<div class="container component"> <ul class="row"> <li class="col-xm-12 index-0" data-glossary-index="0"><h2>#.</h2> Cumque, eveniet.</li> <li class="col-xm-12 index-A" data-glossary-index="A"><h2>A.</h2> Deleniti, architecto?</li> <li class="col-xm-12 index-B" data-glossary-index="B"><h2>B.</h2> Labore, modi.</li> <li class="col-xm-12 index-C" data-glossary-index="C"><h2>C.</h2> <p>Ex, quo.</p> <p>Ex, quo.</p> <p>Ex, quo.</p> <p>Ex, quo.</p> <p>Ex, quo.</p> </li> <li class="col-xm-12 index-D" data-glossary-index="D"><h2>D.</h2> Soluta, ab.</li> <li class="col-xm-12 index-E" data-glossary-index="E"><h2>E.</h2> Perferendis, suscipit?</li> <li class="col-xm-12 index-F" data-glossary-index="F"><h2>F.</h2> Ipsum, vel?</li> <li class="col-xm-12 index-G" data-glossary-index="G"><h2>G.</h2> Ducimus, porro.</li> <li class="col-xm-12 index-H" data-glossary-index="H"><h2>H.</h2> At, modi.</li> <li class="col-xm-12 index-I" data-glossary-index="I"><h2>I.</h2> Dicta, nemo.</li> <li class="col-xm-12 index-J" data-glossary-index="J"><h2>J.</h2> Esse, qui?</li> <li class="col-xm-12 index-K" data-glossary-index="K"><h2>K.</h2> Quidem, enim.</li> <li class="col-xm-12 index-L" data-glossary-index="L"><h2>L.</h2> Porro, nostrum!</li> <li class="col-xm-12 index-M" data-glossary-index="M"><h2>M.</h2> Quae, rerum?</li> <li class="col-xm-12 index-N" data-glossary-index="N"><h2>N.</h2> Minus, consectetur.</li> <li class="col-xm-12 index-O" data-glossary-index="O"><h2>O.</h2> Corrupti, atque?</li> <li class="col-xm-12 index-P" data-glossary-index="P"><h2>P.</h2> Quasi, mollitia!</li> <li class="col-xm-12 index-Q" data-glossary-index="Q"><h2>Q.</h2> Perspiciatis, quae!</li> <li class="col-xm-12 index-R" data-glossary-index="R"><h2>R.</h2> Placeat, voluptatem.</li> <li class="col-xm-12 index-S" data-glossary-index="S"><h2>S.</h2> Aut, quod.</li> <li class="col-xm-12 index-T" data-glossary-index="T"><h2>T.</h2> Modi, ut.</li> <li class="col-xm-12 index-U" data-glossary-index="U"><h2>U.</h2> Quis, amet.</li> <li class="col-xm-12 index-V" data-glossary-index="V"><h2>V.</h2> Culpa, numquam.</li> <li class="col-xm-12 index-W" data-glossary-index="W"><h2>W.</h2> Facilis, illo.</li> <li class="col-xm-12 index-X" data-glossary-index="X"><h2>X.</h2> Possimus, perferendis?</li> <li class="col-xm-12 index-Y" data-glossary-index="Y"><h2>Y.</h2> Possimus, perferendis?</li> <li class="col-xm-12 index-Z" data-glossary-index="Z"><h2>Z.</h2> Possimus, perferendis?</li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Glossary Mock - Script Codes CSS Codes

body { margin: 0; padding: 0;
}
.component ul { padding: 0;
}
.component li { list-style-type: none; /*list-style-type: upper-latin;*/ font-size: 22px; margin-bottom: 40px; overflow: hidden; background-color: #f7f7f7;
}
.glossary a.prev,
.glossary a.next { float: left; font-size: 32px; padding: 0 5px; text-decoration: none;
}
.glossary a.disabled { pointer-events: none; opacity: 0.25;
}
.glossary .wrapper { width: calc(100% - 60px); float: left; overflow: hidden;
}
.glossary ul { padding: 0; width: 810px;
}
.glossary li { list-style-type: none; float: left; text-align: center; padding-top: 10px;
}
.glossary li a { font-size: 18px; padding: 5px 0; border-radius: 50%; width: 30px; height: 30px;
}
.glossary li a.current,
.glossary li a.current:focus { color: #fff; background: #f40000;
}
@media (min-width: 769px) { .stick-it { width: 100%; position: fixed; top: 0; }
}
@media (max-width: 769px) { .glossary li { float: none; } .stickable nav { width: auto; position: fixed; top: 0; right: 0; background-color: transparent; border-style: none; } .component li { padding: 0 40px 20px 40px; }
}

Glossary Mock - Script Codes JS Codes

var $component = $('.component'), $stickable = $('.stickable'), $stickContent = $stickable.children().first(), $glossaryIndexes = $('.glossary a'), $glossary = $('.component li'), originalOffset = $stickContent.offset();
function debounce(callback, delay) { var clearId; return function() { if (clearId) { clearTimeout(clearId); } clearId = setTimeout(function() { clearTimeout(clearId); callback(); }, delay); }
}
function throttle(callback, delay) { var clearId; return function() { if (clearId) { return; } clearId = setTimeout(function() { clearTimeout(clearId); clearId = null; callback(); }, delay); }
}
function stickElement() { var isDesktop = window.matchMedia('(min-width: 769px)').matches; if (isDesktop && document.body.scrollTop >= originalOffset.top) { $stickable.height($stickContent.outerHeight(true)); $stickContent.addClass('stick-it'); } else { $stickContent.removeClass('stick-it'); $stickable.height($stickable.height('')); originalOffset = $stickable.offset(); }
}
function highlightCurrent() { $glossary.each(function(index) { var $item = $(this), offset = $item.offset(), isDesktop = window.matchMedia('(min-width: 769px)').matches; // if (offset.top + $item.height() >= document.body.scrollTop - originalOffset.top && offset.top + $item.height() <= document.body.scrollTop + $(window).height()) { if (offset.top + $item.height() > document.body.scrollTop + (isDesktop ? $stickContent.outerHeight() : 0) ) { $glossaryIndexes.removeClass('current'); $glossaryIndexes.filter('[href="#' + $item.data('glossary-index') + '"]').addClass('current'); return false; } });
}
var throttledHighlightCurrent = throttle(highlightCurrent, 100);
$(window).on('scroll', function() { stickElement(); throttledHighlightCurrent();
}).trigger('scroll');
$('.glossary a').on('click', function() { var $anchor = $(this), $glossaryIndex = $('.index-' + $anchor.attr('href')[1]); if ($glossaryIndex.length) { $('html, body').animate({scrollTop: $glossaryIndex.offset().top - $stickable.outerHeight()}); }
});
$('.glossary .nav-btns').on('click', function(e) { var $navBtn = $(this), $wrapper = $navBtn.siblings('.wrapper'), maxScrollWidth = $wrapper[0].scrollWidth - $wrapper.width(); $navBtn.siblings('a').removeClass('disabled'); if ($navBtn.hasClass('prev')) { $wrapper.animate({scrollLeft: '-=' + $wrapper.width()}); if ($wrapper[0].scrollLeft - $wrapper.width() <= 0) { $navBtn.addClass('disabled'); } } else { $wrapper.animate({scrollLeft: '+=' + $wrapper.width()}); if ($wrapper[0].scrollLeft + $wrapper.width() >= maxScrollWidth) { $navBtn.addClass('disabled'); } } e.preventDefault();
});
Glossary Mock - Script Codes
Glossary Mock - Script Codes
Home Page Home
Developer Neviton
Username nevitones
Uploaded November 24, 2022
Rating 3
Size 4,525 Kb
Views 12,144
Do you need developer help for Glossary Mock?

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!

Neviton (nevitones) Script Codes
Name
Backbone - Study
Display Flex IOS
Flex Study
Codepen API test
Slick Carousel Sync
A Pen by Neviton
Class Scope self tests
Allow flex items to wrap
Flex Tests
Slick Carousel - Speed Effect Comparison
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!