Outils

Bulles / Tooltips

A flexible and extensible jQuery plugin for modern tooltips

Caroussel

Slick JS

Counter

CountUp.js

DataTables

Documentation

Récupérer la div wrapper du tableau

$(table.table().container()).addClass('table-length-bottom-right');

Cacher des colonnes

"columnDefs": [
  {
    "targets": [ 0 ],
    "visible": false,
    "searchable": false,
    "orderable": false
  },
],

Filtrer le tableau avec des boutons

Custom filtering With Button for Datatable

L’événement au clic ne fonctionne pas

Why click event handler does not work

Trier avec les dates

Plug-in code

Bouton Print

{ 
  extend: 'print', 
  text: "<img src='img.png'>",
  className: 'printBouton',
  orientation: 'landscape',
  exportOptions: {
    columns: ':visible'
    columns: [ 0, 1, 2, 5 ]
  },
  title: 'Liste des projets',
  customize: function ( win ) {
    $(win.document.body).css( 'font-size', '10pt' );
    $(win.document.body).find( 'table' ).addClass( 'compact' ).css( 'font-size', 'inherit' );
  }
},

Override default ordering

"order": [[ 4, "desc" ]],

DateTime Picker

Bootstrap 3 Datepicker v4 Docs

Dropzone

DropzoneJS

Dropzone already attached

For anyone having Dropzone already attached

Reload la page quand le transfert est terminé

myDropzone.on('complete', function () {
  location.reload();
});

DropzoneJS et PHP

DropzoneJS example with a powerful PHP code to upload/delete file

FullCalendar

Download

Documentation

Full Week

$('#calendar').fullCalendar({
  locale: 'fr',
  handleWindowResize: true,
  schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
  height: 700,

  weekends: false,

  header: {
    left: '',
    center: 'prev,title,next',
    right: 'listWeek,listMonth',
  },
  defaultView: 'listWeek',
  views: {
    listDay: { buttonText: 'list day' },
    listWeek: { buttonText: 'list week' },
    listMonth: { buttonText: 'list month' }
  },

  // Les événements
  events: route,

  // Affichage de l'event personnalisé
  eventRender: function(event, element) {
    element[0].children[0].innerHTML = ''+event.description+''
  },

  // Au clic sur l'event
  eventClick: function(event) {
    if (event.url) {
      window.open(event.url, "_blank");
      return false;
    }
  },
});

Timeline Five Day

function initCalendar() {
  $('#calendar').fullCalendar({
    locale: 'fr',
    handleWindowResize: true,
    height: 700,
    schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
 
    weekends: false,
    displayEventTime: false,
    weekNumbers: true,
    minTime: "09:00:00",
    maxTime: "19:00:00",
 
    header: {
      left: '',
      center: 'prev,title,next',
      right: 'timelineFiveDay,timelineMonth',
    },
    buttonText: {
      timelineFiveDay: '5 jours',
      timelineMonth: 'mois',
    },
    defaultView: 'timelineFiveDay',
    views: {
      timelineFiveDay: {
        type: 'timeline',
        firstDay: 1,
        duration: { weeks:1 },
        dayCount: 5,
        startOf: 'week',
        dayOfWeek: 1,
        titleFormat: '[Semaine] WW',
      }
    },
 
    // Titre des ressources
    resourceLabelText: 'Collaborateurs',
    // Données des ressources
    resources: route,
    // Données des événements
    events: route,
  
    // Affichage des événements
    eventRender: function(event, element) {
      element[0].children[0].innerHTML = ''+event.description+''
    },

    // Au clic sur l'événement
    eventClick: function(event) {},
 
    // Sélectionner une zone dans le calendrier
    select: function(startDate, endDate, jsEvent, view, resource) {},
 
    // Déplacement d'un événement
    eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {}
  });
}

Open event in new tab

eventClick: function(event) {
  if (event.url) {
    window.open(event.url, "_blank");
    return false;
  }
}

Issue with Bootstap nav tab

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var href = $(e.target).attr('href').split('#')[1]
  href = href.substr(0,1).toUpperCase()+href.substr(1)           
  $('#calendarEquipe'+href).fullCalendar('rerenderEvents');
})

Calendrier en dynamique

// On récupère le calendrier
var calendar = $('#calendar').fullCalendar('getCalendar');
   
calendar.on('eventClick', function(event) {});
 
var calendarOptions = $('#calendar').fullCalendar('getView').options;
calendarOptions.selectable = true;
calendarOptions.eventStartEditable = true;
calendarOptions.eventResourceEditable = true;
$('#calendar').fullCalendar(calendarOptions);

Full Screen Scroll

One Page Scroll

FullPage

Galleries

Justified.js : jQuery Plugin to create Justified Image Gallery

JEasy CSS Masonry Layout w/ Left-To-Right Content Flow

Gantt

jQuery Gantt Chart

Documentation

Exemple

Graphiques

Data-Driven Documents

Exemples

Documentation

Image effect

Tilt JS

Documentation

Infinite Ajax Scroll

Turn your existing pagination into infinite scrolling pages

Mask

jQuery Mask Plugin

Progress bar

Nanobar : Very lightweight progress bars.

NProgress.js : A nanoscopic progress bar

Scrollbar Custom

Highly customizable custom scrollbar jQuery plugin

Documentation

Scroll animation

Reveal Animations When You Scroll

Selectize JS

Selectize is the hybrid of a textbox and select box

Slide

A simple, lightweight javascript library for adding slide transitions

SpinJS

Create spinner/loader online

Tableau

12 Amazing jQuery Tables

TinyMCE

JQuery Plugin

Intégrer Spellchecker plugin

plugins: 'textcolor,spellchecker',
toolbar: 'spellchecker',
spellchecker_rpc_url: 'spellchecker.php',
spellchecker_languages: 'French=fr_FR'

Enregistrer avant submit form

tinyMCE.triggerSave();

Caracters counter

Character Count and Character Limit validation for TinyMCE editor using JavaScript

Sticky Toolbar

CodePen

TreeJS

three.js