Tag Archives: javascript

Infinite Ajax Scroll

easily transform the traditional pagination to infinite scrolling pages

Plugin Usage

Infinite Ajax Scroll works with a container with element elements that are appended. A next link is used to determine the next URL.

<div class="container">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    ...
</div>
<div class="pagination">
    <a href="page2.html" class="next">Next</a>
</div>

Configure Infinite Ajax Scroll

// import if you use the NPM package
import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';

let ias = new InfiniteAjaxScroll('.container', {
  item: '.item',
  next: '.next',
  pagination: '.pagination'
});

jQuery Ajax File Uploader Widget

A jQuery Ajax File Uploader Widget to download files with Ajax (a synchronization); Includes queue support, progress tracking, and drag and drop.

Very configurable and easy to adapt to any front end design and very easy to work with any back end logic.

The focus will be on modern browsers, but it will also provide a method to determine when the plugin is not supported. The idea is to keep it simple and easy.

Basic knowledge of Javascript is required to configure this plugin: settings, callback events, etc.

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 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

Download jQuery grid plugin Ajax-enabled JavaScript control

jqGrid is an Ajax-enabled JavaScript control that provides solutions for presenting and manipulating table data on the Web. Because the Grid is a client-side solution that dynamically loads data through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

Demo Read More

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

Free Bootstrap One Page Templates

Bootstrap is an open-source JavaScript framework , developed by the team at Twitter . It is a combination of HTML , CSS and Javascript code designed to help the user interface components . Bootstrap has been programmed to support both HTML5 and CSS3. Here is some bootstrap one page templates, these all free to use. You can understand bootstrap coding by editing these templates.free bootstrap one page templates helps you to make landing pages easily

Continue reading Free Bootstrap One Page Templates

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

50 Useful Libraries and Resources for Responsive Web Design

Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 50 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your ….

Read More

Building a Web App From Scratch With AngularJS

AngularJS is an amazing front-end framework that has a very novel approach to building web applications, completely unlike any of the other frameworks you might be used to. In this course we’ll take a look at all the core components of Angular, and how they work together to build a complete application. We’ll be building an address book, starting from nothing at all and ending…

Read More

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