Documents
- Title
- jQuery.NiceScroll
- Description
- jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.
- Category
- Navigation
- Library
jQuery.NiceScroll
jQuery
- Include Files
<!-- Add jQuery and jQuery.NiceScroll --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
- Basic markup
<script> $(function () { $('.box').niceScroll({ option }); // Adjust when the window size is changed. $('.box').getNiceScroll().resize(); }); </script> <div class="box">...</div>
- Attachment Table
jQuery.NiceScroll Options
Property Type Default Description cursorcolor String #424242 change cursor color in hex cursoropacitymin Number 0 change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0 cursoropacitymax Number 1 change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0 cursorwidth String 5px cursor width in pixel (you can also write "5px") cursorborder String 1px solid #fff css definition for cursor border cursorborderradius String 5px border radius in pixel for cursor zindex String auto change z-index for scrollbar div scrollspeed Number 60 scrolling speed mousescrollstep Number 40 scrolling speed with mouse wheel (pixel) touchbehavior Boolean false DEPRECATED!! use "touchemulate" emulatetouch Boolean false enable cursor-drag scrolling like touch devices in desktop computer hwacceleration Boolean true use hardware accelerated scroll when supported boxzoom Boolean false enable zoom for box content dblclickzoom Boolean true (only when boxzoom=true) zoom activated when double click on box gesturezoom Boolean true (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box grabcursorenabled Boolean true (only when touchbehavior=true) display "grab" icon autohidemode Boolean or String true how hide the scrollbar works, possible values
true: hide when no scrolling
false: do not hide
'cursor': only cursor hidden
'leave': hide only if pointer leaves content
'hidden': hide always
'scroll': show only on scrollbackground String '' change css for rail background iframeautoresize Boolean true autoresize iframe on load event cursorminheight Number 32 set the minimum cursor height (pixel) preservenativescrolling Boolean true you can scroll native scrollable areas with mouse, bubbling mouse wheel event railoffset Boolean false you can add offset top/left for rail position bouncescroll Boolean false (only hw accell) enable scroll bouncing at the end of content as mobile-like spacebarenabled Boolean true enable page down scrolling when space bar has pressed railpadding String { top: 0, right: 0, left: 0, bottom: 0 } set padding for rail bar disableoutline Boolean true for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll horizrailenabled Boolean true nicescroll can manage horizontal scroll railalign String right alignment of vertical rail railvalign String bottom alignment of horizontal rail enabletranslate3d Boolean true nicescroll can use css translate to scroll content enablemousewheel Boolean true nicescroll can manage mouse wheel events enablekeyboard Boolean true nicescroll can manage keyboard events smoothscroll Boolean true scroll with ease movement sensitiverail Boolean true click on rail make a scroll enablemouselockapi Boolean true can use mouse caption lock API (same issue on object dragging) cursorfixedheight Boolean false set fixed height for cursor in pixel hidecursordelay Number 400 set the delay in microseconds to fading out scrollbars directionlockdeadzone Number 6 dead zone in pixels for direction lock activation nativeparentscrolling Boolean true detect bottom of content and let parent to scroll, as native scroll does enablescrollonselection Boolean true enable auto-scrolling of content when selection text cursordragspeed Number 0.3 speed of selection when dragged with cursor rtlmode String auto horizontal div scrolling starts at left side cursordragontouch Boolean false drag cursor in touch / touchbehavior mode also oneaxismousemode Boolean or String auto it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse scriptpath String '' define custom path for boxmode icons ("" => same script path) preventmultitouchscrolling Boolean true prevent scrolling on multitouch events disablemutationobserver Boolean false force MutationObserver disabled, enableobserver Boolean true enable DOM changing observer, it tries to resize/hide/show when parent or content div had changed scrollbarid Boolean false set a custom ID for nicescroll bars
- Related
Source Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add jQuery and jQuery.NiceScroll -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<title>jQuery.NiceScroll</title>
<style>
[class^='box-'] {
width: 80vw;
max-width: 640px;
height: 380px;
padding: 15px;
margin-bottom: 15px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12),
0 1px 2px rgba(0, 0, 0, .24);
overflow: auto;
}
.horizontal p {
white-space: nowrap;
}
</style>
</head>
<body>
<header>
<h1 class="dlw-title">jQuery.NiceScroll</h1>
<p class="dlw-description">jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.</p>
</header>
<section>
<h2 class="dlw-subtitle">[1] Default Cursor</h2>
<script>
$(function () {
$('.box-1').niceScroll();
});
// Adjust when the window size is changed.
$('.box-1').getNiceScroll().resize();
</script>
<h3 class="dlw-lead">Vertical Scroll</h3>
<div class="box-1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<h3 class="dlw-lead">Horizontal Scroll</h3>
<div class="box-1 horizontal">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[2] Cursor Color Style</h2>
<p>Defines the color and border of the cursor.</p>
<script>
$(function () {
$('.box-2').niceScroll({
cursorcolor: '#0f7dc2',
background: 'grey',
cursorborder: '1px solid #8bc4e8'
});
$('.box-2').getNiceScroll().resize();
});
</script>
<div class="box-2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[3] Cursor Shape</h2>
<p>Define the cursor width and rounded corners.</p>
<script>
$(function () {
$('.box-3').niceScroll({
cursorwidth: '24px',
cursorborderradius: 0
});
$('.box-3').getNiceScroll().resize();
});
</script>
<div class="box-3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[4] Hide Setting</h2>
<p>Define the timing and time to hide the cursor.</p>
<h3 class="dlw-lead">Always Show</h3>
<p>autohidemode: false</p>
<script>
$(function () {
$('.box-4-1').niceScroll({
autohidemode: false
});
$('.box-4-1').getNiceScroll().resize();
});
</script>
<div class="box-4-1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<h3 class="dlw-lead">Hide if pointer leaves content</h3>
<p>autohidemode: 'leave'</p>
<script>
$(function () {
$('.box-4-2').niceScroll({
autohidemode: 'leave'
});
$('.box-4-2').getNiceScroll().resize();
});
</script>
<div class="box-4-2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
<h3 class="dlw-lead">Hide Cursor Delay Time</h3>
<p>hidecursordelay: 2000</p>
<script>
$(function () {
$('.box-4-3').niceScroll({
hidecursordelay: 2000
});
$('.box-4-3').getNiceScroll().resize();
});
</script>
<div class="box-4-3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</section>
<section>
<h2 class="dlw-subtitle">[5] Zoom</h2>
<p>Zoom scroll box content.</p>
<script>
$(function () {
$('.box-5').niceScroll({
boxzoom: true
});
$('.box-5').getNiceScroll().resize();
});
</script>
<div class="box-5">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet
a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus.</p>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra
quis, feugiat a, tellus.</p>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
augue. Curabitur ullamcorper ultricies nisi.</p>
<p>Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit
amet adipiscing sem neque sed ipsum.</p>
<p>Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus.</p>
<p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet
nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</p>
</div>
</section>
<script>
$(function () {
// This code is inserted for demonstration preview.
$(document).ajaxStop(function() {
$('div').getNiceScroll().resize();
});
});
</script>
</body>
</html>Comment
Search
- Style Design
- Text Style DesignCSS
Here, design samples of various effects to text are posted.
- Headline (Heading) Style DesignCSS
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted. - OL (Ordered List) Style DesignCSS
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted. - HR (Separator Line) Style DesignCSS
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted. - Box Shadow Style DesignCSS
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.
- Layout
- How to specify a breakpoint and switch imagesJS
Using
<picture> andsrcset , it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE. - Grid LayoutCSS
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted. - FlexCSS
Flex is the value of the CSS display property.
- Link & Button
- Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.
- Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.
- Button.cssCSS
Button.css is collection of CSS3 button animations.
- Card
- Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.
- Text
- Arctext.jsjQuery
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.
- Lettering.jsjQuery
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.
- Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
- FitText.jsjQuery
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.
- Media
- FeedEkjQuery
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.
- YouTube Embed
Introduction of various embedment methods of YouTube.
- FitVids.jsjQuery
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.
- xZoomjQuery
xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom. - Instagram.cssCSS
Instagram.css is a stylesheet set that filters photos like instagram.
- Date
- Moment.jsJS
Moment.js is a javascript that processes and displays date and time.
- Bootstrap Material DatePickerjQuery
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.
- Table
- MultifilterjQuery
Multifilter is jQuery Table Filtering Plugin.
- Flex TableCSS
Responsive table using "display: flex;".
Not supported for rowspan. - Grid TableCSS
Responsive table using "display: grid;".
Not supported for rowspan. - Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.
- Form
- jQuery Mask PluginjQuery
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.
- Select2 #1. Basic SettingjQuery
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2. - jQuery SearcherjQuery
jQuery Searcher is jQuery search/filtering plugin that supports various markups.
- Slider
- Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.
- FlexSlider #1. Single SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted. - FlexSlider #2. Carousel SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted. - slick #1. Single SliderjQuery
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted. - slick #2. Carousel SliderjQuery
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.
- Lightbox
- fancyBox #1. basic image lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted. - fancyBox #2. media lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted. - Magnific Popup #1. basic image lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted. - Magnific Popup #2. media lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted. - Magnific Popup #3. CSS3-based animation effectsjQuery
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.
- Navigation
- animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
- GreedyNavjQuery
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.
- GridTabjQuery
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.
- jQuery.NiceScrolljQuery
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.
- metisMenujQuery
metisMenu is a jQuery plugin that expands vertical and vertical menus.
- fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted. - fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed.. - Offside.js #1. Basic Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands. - Offside.js #2. Multiple Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases. - Filterizr #1. Basic FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options. - Filterizr #2. Advanced FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.
- Animation
- animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
- Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
- ScrollajQuery
Scrolla is jQuery scroll animation plugin.
- Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.
- Animate.cssCSS
Animate.css is a style-sheet collection of animation effects.
- jQuery Easing PluginjQuery
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.
- Background
- fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted. - fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed.. - jquery.mb.YTPlayerjQuery
jQuery.mb.YTPlayer is jQuery Background player plugin.
- Modal / Tooltip
- Hint.cssCSS
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name. - ProtipjQuery
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.
- Social
- Framework
- Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.
- Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.
- Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.
- Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.
- Cheat Sheet
- HTML5 Cheat Sheet
HTML5 Cheat Sheet by Make A Website Hub
- CSS3 Cheat Sheet
CSS3 Cheat Sheet by Smashing Magazine
- Visual Studio Code Keyboard Shortcuts
This is the Visual Studio Code default keyboard shortcut list.
- GreenSock Cheat Sheet
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.
- Other
- Google Search
On this page you can search for codes collectively.
- Design News
It is a news feed about design.