Posted in js
6236
6:20 am, August 31, 2018
 

scrollbar replacement simplebar

a nice and simple scroll bar replacement

code

<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script>	

<style>
.scroller-no-pad {
	height:160px;
	width:300px;
	border-radius:5px;
}</style>

<div class='scroller-no-pad' data-simplebar>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.

Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Pellentesque rutrum urna elit, sed cursus felis placerat efficitur. Curabitur tempor velit magna, mollis malesuada risus lacinia sed. Mauris tristique id mi et cursus. Quisque consectetur velit in lacus euismod scelerisque. Vestibulum ac malesuada libero, eget auctor turpis. Integer pellentesque a ipsum non faucibus. Quisque ultricies sapien ut tellus bibendum aliquam.

Nunc mattis a justo id bibendum. Cras sit amet nisl ac augue dictum finibus at at odio. Mauris massa elit, fermentum sit amet eros ut, aliquet fermentum orci. Vestibulum eleifend sapien quis lorem gravida scelerisque. Pellentesque lobortis velit metus, nec semper eros dapibus quis. Nunc lacinia iaculis tristique. Praesent aliquet dignissim eros vitae semper. Sed suscipit ultricies dignissim.</div>

add css and js to wordpress theme functions

wp_enqueue_style( 'simplebar-style', 'https://unpkg.com/simplebar@latest/dist/simplebar.css' );
wp_enqueue_script( 'simplebar', 'https://unpkg.com/simplebar@latest/dist/simplebar.js', array(), '20151215', true );

demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc. Cras vel ligula a elit pretium convallis. Nunc ac nisl nisi. Vestibulum ut ullamcorper nibh. Phasellus dictum nisi quis ullamcorper finibus. Phasellus fringilla purus ut augue varius vulputate. Nullam nec nisl dignissim, varius sem pretium, commodo orci. Cras tortor nisl, pharetra sodales lobortis a, vestibulum ut libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Pellentesque rutrum urna elit, sed cursus felis placerat efficitur. Curabitur tempor velit magna, mollis malesuada risus lacinia sed. Mauris tristique id mi et cursus. Quisque consectetur velit in lacus euismod scelerisque. Vestibulum ac malesuada libero, eget auctor turpis. Integer pellentesque a ipsum non faucibus. Quisque ultricies sapien ut tellus bibendum aliquam. Nunc mattis a justo id bibendum. Cras sit amet nisl ac augue dictum finibus at at odio. Mauris massa elit, fermentum sit amet eros ut, aliquet fermentum orci. Vestibulum eleifend sapien quis lorem gravida scelerisque. Pellentesque lobortis velit metus, nec semper eros dapibus quis. Nunc lacinia iaculis tristique. Praesent aliquet dignissim eros vitae semper. Sed suscipit ultricies dignissim.

links

more testing and examples github

View Statistics
This Week
183
This Month
712
This Year
1763

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in js
jqueryui date selector with examples and code with custom date formatting fancybox youtube showing video links in a lightbox - updated with fixed code parts fix for Uncaught (in promise) Error: reCAPTCHA placeholder element must be empty enable tinymce on a target textarea by id Generate Random Whole Numbers with JavaScript Function Generate Random Fractions with JavaScript jquery document ready make clickable element with clickable class using getElementById and innerHTML to change the html of content no jquery preserve tabs in textarea when tab key is pressed jqueryui includes css and js using vue and json data jqueryui date selector with examples and code jquery accordion fancybox youtube showing video links in a lightbox jquery jqueryui vue script includes get select option form value with jquery show the year with js jquery clone and append elements stacktable jQuery plugin for stacking tables on small screens load content with jquery find all elements add class jquery digital clock with jquery using regex with replace to replace all instances of something in a string random string generator guid set and check a cookie using js cookie validate email address from string check length of element jquery access hacker news json firebase api via jquery testing chartjs clipboard copy js tiny mce editor tinymce do something later with settimeout or loop with setinterval validate form data using javascript to check required html elements mithril testing parallax js scroll testing change the water colour in google maps for an already initialised map scrollbar replacement simplebar load google sheet data into json string with jquery change favicon with jquery add this Slick Slider Carousel change the window title flems embed in url detect window scroll position jquery truncate string using jquery round number with js google map with overlay data
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."

I just checked google books for BFG, and the dedication is there. 

https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1 


Roald Dahl, 1986
Random CSS Property

mask-type

The mask-type CSS property sets whether an SVG <mask> element is used as a luminance or an alpha mask. It applies to the <mask> element itself.
mask-type css reference