Category Archives: JavaScript

tabulator an interactive table JavaScript library





With the tabulator you can create interactive tables in seconds from any HTML tables, JavaScript arrays, AJAX data sources or JSON-formatted data. The tab works with all major front-end JavaScript frameworks, including React, Angular, and Vue.

HTML

<div id="example-table"></div>

JavaScript – Simple Table

//define data array
var tabledata = [
    {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1},
    {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true},
    {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true"},
    {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, col:"red", dob:"12/05/1966", car:1},
];

//initialize table
var table = new Tabulator("#example-table", {
    data:tabledata, //assign data to table
    autoColumns:true, //create columns from data field names
});

JavaScript – Feature Rich Table

var table = new Tabulator("#example-table", {
    data:tabledata,           //load row data from array
    layout:"fitColumns",      //fit columns to width of table
    responsiveLayout:"hide",  //hide columns that dont fit on the table
    tooltips:true,            //show tool tips on cells
    addRowPos:"top",          //when adding a new row, add it to the top of the table
    history:true,             //allow undo and redo actions on the table
    pagination:"local",       //paginate the data
    paginationSize:7,         //allow 7 rows per page of data
    movableColumns:true,      //allow column order to be changed
    resizableRows:true,       //allow row order to be changed
    initialSort:[             //set the initial sort order of the data
        {column:"name", dir:"asc"},
    ],
    columns:[                 //define the table columns
        {title:"Name", field:"name", editor:"input"},
        {title:"Task Progress", field:"progress", hozAlign:"left", formatter:"progress", editor:true},
        {title:"Gender", field:"gender", width:95, editor:"select", editorParams:{values:["male", "female"]}},
        {title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100, editor:true},
        {title:"Color", field:"col", width:130, editor:"input"},
        {title:"Date Of Birth", field:"dob", width:130, sorter:"date", hozAlign:"center"},
        {title:"Driver", field:"car", width:90,  hozAlign:"center", formatter:"tickCross", sorter:"boolean", editor:true},
    ],
});

Open Source file manager : elFinder

elFinder is an Open source file manager for the web written in JavaScript using the jQuery user interface.

  • User-friendliness like MacOS Finder or Windows Explorer
  • Mobile view for touch devices
  • All operations with files and folders on a remote server (copy, move, download, create folder / file, rename, etc.)
  • High performance backend server and lightweight client user interface
  • Multi-root support
  • Local file system, MySQL, FTP, Box, Dropbox, GoogleDrive, and OneDrive volume storage drivers
  • Supports AWS S3, Azure, Digital Ocean Spaces and more with League \ Flysystem Flysystem driver
  • Cloud storage drivers (Box, Dropbox, GoogleDrive and OneDrive)
  • Background file / folder upload with HTML5 drag and drop support
  • Fragmented file download for a large file
  • Download directly to the folder
  • Download the form URL (or the list)
  • List View and Icons
  • Keyboard shortcuts
  • Standard methods of selecting files / groups using mouse or keyboard
  • Move / copy files by drag and drop
  • Drag and drop outside starting by dragging with the Alt / Option key
  • Create / extract archives (zip, rar, 7z, tar, gzip, bzip2)
  • Rich context menu and toolbar
  • Quicklook, overview of common file types
  • Edit text files and images
  • “Places” for your favorites
  • Calculate the size of directories
  • Thumbnails for images, video files
  • Easy to integrate with web editors (elRTE, CKEditor, TinyMCE)
  • Flexible configuration of access rights, download file types, user interface and more
  • Extensibility through backend and client side event management
  • Simple client-server API based on JSON
  • Support customized information in the information dialog
  • Configurable columns of the list view
  • Support custom CSS class function for custom folder icon
  • Connector plug-in
  • Auto Rotate: Auto rotate when uploading JPEG files by EXIF ​​orientation.
  • Auto Resize: Auto resize when uploading files.
  • Normalizer: UTF-8 normalizer of filename and path to file, etc.
  • Sanitizer: disinfectant of file name and file path, etc.
  • Watermark: Print the watermark when downloading the file.

Javascript plugin for Infinite Scroll

Infinite Scroll is a JavaScript plugin that automatically adds the next page . Very Helpful plugin for improving the user experience.

Plugin Usage

Infinite Scroll plugin works on a container element with its child item elements

<div class="container">
  <article class="post">...</article>
  <article class="post">...</article>
  <article class="post">...</article>
  ...
</div>

Plugin Options

<!-- wp:paragraph -->
<p>var infScroll = new InfiniteScroll( '.container', {<br>// defaults listed</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>path: undefined,<br>// REQUIRED. Determines the URL for the next page<br>// Set to selector string to use the href of the next page's link<br>// path: '.pagination__next'<br>// Or set with {{#}} in place of the page number in the url<br>// path: '/blog/page/{{#}}'<br>// or set with function<br>// path: function() {<br>// return return '/articles/P' + ( ( this.loadCount + 1 ) * 10 );<br>// }</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>append: undefined,<br>// REQUIRED for appending content<br>// Appends selected elements from loaded page to the container</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>checkLastPage: true,<br>// Checks if page has path selector element<br>// Set to string if path is not set as selector string:<br>// checkLastPage: '.pagination__next'</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>prefill: false,<br>// Loads and appends pages on intialization until scroll requirement is met.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>responseType: 'document',<br>// Sets the type of response returned by the page request.<br>// Set to 'text' to return flat text for loading JSON.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>outlayer: false,<br>// Integrates Masonry, Isotope or Packery<br>// Appended items will be added to the layout</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>scrollThreshold: 400,<br>// Sets the distance between the viewport to scroll area<br>// for scrollThreshold event to be triggered.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>elementScroll: false,<br>// Sets scroller to an element for overflow element scrolling</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>loadOnScroll: true,<br>// Loads next page when scroll crosses over scrollThreshold</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>history: 'replace',<br>// Changes the browser history and URL.<br>// Set to 'push' to use history.pushState()<br>// to create new history entries for each page change.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>historyTitle: true,<br>// Updates the window title. Requires history enabled.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>hideNav: undefined,<br>// Hides navigation element</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>status: undefined,<br>// Displays status elements indicating state of page loading:<br>// .infinite-scroll-request, .infinite-scroll-load, .infinite-scroll-error<br>// status: '.page-load-status'</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>button: undefined,<br>// Enables a button to load pages on click<br>// button: '.load-next-button'</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>onInit: undefined,<br>// called on initialization<br>// useful for binding events on init<br>// onInit: function() {<br>// this.on( 'append', function() {…})<br>// }</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>debug: false,<br>// Logs events and state changes to the console.<br>})</p>
<!-- /wp:paragraph -->

Download JavaScript Fullscreen Slider

Using javascript create a fullscreen slider . This asset controls sections in a HTML page.That one resizing sections to fullscreen resolution and moves these individually by wheel/touch events.

Usage

Add Css in head


<link rel="preload" as="style" href="/fullscreen-slider/css/main.min.css" onload="this.onload=null;this.rel=’stylesheet’">

Insert the below html code to body

<div class="l-page" data-page-id="index">
<div class="p-global-header">
<h1 class="p-global-title">FullScreen Slider</h1>
<div class="p-global-links"><a href="https://github.com/ykob/fullscreen-slider">View Source on GitHub</a></div>
</div>
<div class="l-contents">
<div class="p-sections-wrap js-fullscreen-wrap">
<div class="p-section p-section–01 js-fullscreen-section">
<div class="p-section__in">
<h2 class="p-section__header">Section1</h2>
<p class="p-section__text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="p-section p-section–02 js-fullscreen-section">
<div class="p-section__in">
<h2 class="p-section__header">Section2</h2>
<p class="p-section__text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br>Nulla consequat massa quis enim.</p>
</div>
</div>
<div class="p-section p-section–03 js-fullscreen-section">
<div class="p-section__in">
<h2 class="p-section__header">Section3</h2>
<p class="p-section__text">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.<br>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.<br>Nullam dictum felis eu pede mollis pretium.</p>
</div>
</div>
<div class="p-section p-section–04 js-fullscreen-section">
<div class="p-section__in">
<h2 class="p-section__header">Section4</h2>
<p class="p-section__text">Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.<br>Aenean vulputate eleifend tellus.<br>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
</div>
<div class="p-section p-section–05 js-fullscreen-section">
<div class="p-section__in">
<h2 class="p-section__header">Section5</h2>
<p class="p-section__text">Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.<br>Phasellus viverra nulla ut metus varius laoreet.<br>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
</div>
</div>
</div>
<div class="p-pager js-fullscreen-pager">
<div class="p-pager__in">
<div class="p-pager__pointer js-fullscreen-pager-pointer js-hover"></div>
<div class="p-pager__pointer js-fullscreen-pager-pointer js-hover"></div>
<div class="p-pager__pointer js-fullscreen-pager-pointer js-hover"></div>
<div class="p-pager__pointer js-fullscreen-pager-pointer js-hover"></div>
<div class="p-pager__pointer js-fullscreen-pager-pointer js-hover"></div>
<div class="p-pager__bar"></div>
</div>
</div>
<div class="p-background js-fullscreen-bg"></div>
</div>
</div>

Js Code in footer

<script src="/fullscreen-slider/js/main.min.js" async></script>

Demo Download Read More

Download Awesome vanilla javascript slider for all purposes

A tiny slider for all purposes. This tiny-slider only works with static content and it works in the browser. If you are loading the html dynamically, make sure to call tns() after its loading. On this version using % instead of px
and CSS Mediaqueries if supported

Please follow the below steps
1. Add the below css into head (and IE8 polyfills if needed)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css">
<!–[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/min/tiny-slider.helper.ie8.js"></script>

2. The HTML markup

<div class="my-slider">
<div></div>
<div></div>
<div></div>
</div>
<!– or ul.my-slider > li –>

3. Initialize tns()

Add tiny-slider.js to footer of your page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/min/tiny-slider.js"></script>
<!– NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> –>

Follow the below given Responsive options

The following options can be redefined in responsive field:
startIndex,
items,
slideBy,
speed,
autoHeight,
fixedWidth,
edgePadding,
gutter,
center,
controls,
controlsText,
nav,
autoplay,
autoplayHoverPause,
autoplayResetOnVisibility,
autoplayText,
autoplayTimeout,
touch,
mouseDrag,
arrowKeys,
disable

Sample code

<script>
var slider = tns({
container: ‘.my-slider’,
items: 1,
responsive: {
640: {
edgePadding: 20,
gutter: 20,
items: 2
},
700: {
gutter: 30
},
900: {
items: 3
}
}
});
</script>

Read More Demo Download

Download Full Responsive JavaScript image and video gallery

Image gallery and video galleries are unavoidable items in websites. As per the current web design trends we need more features in everything. Here is one fully responsive javascript image and video gallery that fullfil all features. Please check the following listed main features.

  • Fully responsive.
  • Modular architecture with built in plugins.
  • Touch support for mobile devices.
  • Mouse drag supports for desktops.
  • Animated thumbnails.
  • Social media sharing.
  • YouTube, Vimeo, Dailymotion, VK and HTML5 video support.
  • Full screen support.
  • Supports zoom.
  • Browser history API.
  • Responsive images.
  • HTML iframe support.
  • Keyboard Navigation for desktop.

CDN

http://www.jsdelivr.com/projects/lightgallery.js

Implement in your projects by do the following steps

Include CSS and Javascript files

CSS goes in head section

<head>
<link rel="stylesheet" href="css/lightgallery.css">
</head>

After that include the js library, here its lightgallery.min.css into your footer area
[sourcecode language="plain"]
<body>
…

<script src="js/lightgallery.min.js"></script>

<!– lightgallery plugins –>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
</body>

The markup for light gallery

You can use your own markup too , Here am showing a sample

<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg">
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg">
</a>
…
</div>

Initialize the plugin

<script>
lightGallery(document.getElementById(‘lightgallery’));
</script>

Demo Read More Download

Download JavaScript image gallery plugin for mobile and desktop

Another gallery solution for your upcoming web projects, Javascript image gallery. Its compatible with mobile and desktop.

Include JS and CSS files

<!-- Core CSS file -->
<link rel="stylesheet" href="path/to/photoswipe.css"> 

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css"> 

<!-- Core JS file -->
<script src="path/to/photoswipe.min.js"></script> 

<!-- UI JS file -->
<script src="path/to/photoswipe-ui-default.min.js"></script> 

Add PhotoSwipe (.pswp) element to DOM

Also we can add HTML code dynamically via JS or have it in the page starts

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

Plugin initialize

var pswpElement = document.querySelectorAll('.pswp')[0];

// build items array
var items = [
    {
        src: 'https://placekitten.com/600/400',
        w: 600,
        h: 400
    },
    {
        src: 'https://placekitten.com/1200/900',
        w: 1200,
        h: 900
    }
];

// define options (if needed)
var options = {
    // optionName: 'option value'
    // for example:
    index: 0 // start at first slide
};

// Initializes and opens PhotoSwipe
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

Demo Read More Download

Extended JavaScript regular expressions

XRegExp has augmented ( and expandable ) JavaScript regular expressions . You get new , modern syntax and flags on the browsers support natively . XRegExp is also a regex utility belt with tools to make your client-side parsing Grepping and easier while freeing you from worry about annoying aspects of JavaScript regular expressions as cross-browser inconsistencies and manual manipulation load .

Read More Demo

jQuery-File-Upload

Player upload files with the selection of multiple files, drag & amp; drop, progress bar, validation and preview images, audio and video for jQuery. Supports multiple domains, load and renewable fragmented files. It works with any server platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form submission files.

Player upload files with the selection of multiple files, drag and drop support, progress bars, validation and preview images, audio and video for jQuery.

Supports multiple domains, load and renewable fragmented files and client-side image resizing. It works with any server platform (PHP, Python, Ruby on Rails, Java, Node.js, Ir, etc.) that supports standard HTML form submission files.

Demo Read More

Touch enabled jQuery plugin – Owl Carousel.

Owl Carousel. Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

Features:

Responsive
Touch Events
Mouse Slide Events
Fully Customizable
Choose the number of items to be displayed
Multiple Sliders
CSS3 3d Transitions
Custimizable controls
JSON
Custom events
Helpful callbacks

Tested on IE7, IE8, IE9, IE10, Chrome, Safari, Firefox, Opera, iPhone, iPad, Chrome on Google Nexus.

Demo Download

JavaScript Regular Expression Parser & Visualizer

Regulex is a javascript regular expression parser and visualizer.

  • Written in pure JavaScript. No backend needed.
  • You can embed the graph in you own site through html iframe element.
  • Detailed error message. In most cases it can point out the precise syntax error position.
  • No support for octal escape. Yes it is a feature. ECMAScript strict mode doesn’t support octal escape in string,but many browsers still support octal escape in regex. I make things easier. In regulex, DecimalEscape will always be treated as back reference. If the back reference is invalid, e.g. /\1//(\1)//(a)\2/,or DecimalEscape appears in charset(because in this case it can’t be explained as back reference, e.g. /(ab)[\1]/), Regulex will always throw an error.

Website Demo