Category Archives: Ajax

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'
});

CSS Spinner

elegant collection of pure css spinners for your website loading animation.

  • Vanilla – no external dependency and no additional library required.
  • Standalone – use one of these separately.
  • customizable – use stylus variables to quickly customize them to your needs.
  • easy to use – easy to copy and paste, but also easy to use with pug mixins.
  • small – average size 1K per spinner not minimized, unpacked

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},
    ],
});

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

jQuery Scroll Indicator Plugin

Modern browsers and especially mobile devices often do not have permanent scrollbars. Scroll bars on mobile devices are not necessary because the user simply moves by dragging. The problem with this though is that users may miss the ability to scroll through a certain window to see more. This applies mainly to

and

jquery tree plugin : jstree

jsTree jQuery plugin that provides interactive trees. It’s completely free , open source and distributed under the MIT license.

jsTree is easily extensible , Themable and configurable, supports HTML and JSON data sources , AJAX & asynchronous callback load.<

p>

jsTree working properly either box model (content playpen or border- box) can be loaded as a module and AMD has a built in mobile theme for responsive design, can be easily customized. It uses jQuery’s event system , so that the binding callbacks at various events in the tree structure is simple and easy.

Demo Read More

Bootstrap-modal Class – Responsive, stackable, ajax

Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

Extends Bootstrap’s native modals to provide additional functionality. Introduces a ModalManager class that operates behind the scenes to handle multiple modals by listening on their events.

A single ModalManager is created by default on body and can be accessed through the jQuery plugin interface.

Demo Read More