#jquery

Mottie/tablesorter : Github fork of Christian Bach’s tablesorter plugin + awesomeness ~
▻https://github.com/Mottie/tablesorter

Un plugin JQuery concurent de datatable.
A priori lui est totalement open-source/gratuit et sans business derrière.

tablesorter (FORK) is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. This forked version adds lots of new enhancements including: alphanumeric sorting, pager callback functons, multiple widgets providing column styling, ui theme application, sticky headers, column filters and resizer, as well as extended documentation with a lot more demos.

La doc : ▻https://mottie.github.io/tablesorter/docs/index.html
Les (très nombreux) exemples : ▻https://mottie.github.io/tablesorter/docs/index.html#Examples

#tablesorter #datatable #tableau #jquery

You-Dont-Need-jQuery/README-fr.md
▻https://github.com/nefe/You-Dont-Need-jQuery/blob/master/README-fr.md
et
▻http://codeblog.cz/vanilla/#prerequisities

nanoJS - Minimal standalone JS library for DOM manipulation
▻https://vladocar.github.io/nanoJS

nanoJS is around 100 lines of code (0.6 Kb compressed) JavaScript library for basic DOM manipulation. It has jQuery like syntax and supports chaining.
Because is so small and simple you can add or remove methods directly in the library, meaning is very customizable. All methods are unrelated so removing one will not affect the library in any way (except each method).

#javascript #jQuery #lib #DOM_manipulation

Top 5 Free #jquery Courses for Web Developers — Best of Lot
▻https://hackernoon.com/top-5-free-jquery-courses-for-web-developers-best-of-lot-9f65a1ff25b6?so

https://cdn-images-1.medium.com/max/1024/1*4gfqUG6z6HtvQJnCztzckQ.png

Top 5 Free jQuery Courses for Web Developers — Best of LotThe Complete jQuery Course: From Beginner To Advanced!Hello guys, if you are thinking to learn jQuery and looking for some awesome free resources e.g. books, tutorials, and online courses then you have come to the right place.In this article, I am going to share some of the best free jQuery courses from Udemy and Pluarlsight which you can take to learn this awesome #javascript library.In the past, I have also shared some free books and tutorials on jQuery, which complements these courses. You can also take a look at then while learning different parts of jQuery.Before I share these free courses, let me brief you about what jQuery is and why you should learn it? Well, jQuery is a JavaScript library but unlike any other library it is (...)

#web-development #programming #front-end-development

Code JS , lien mené à l’ancre sinon à la page

Au clic sur un lien possédant une ancre, teste si la cible de l’ancre existe bien dans la page avant de réécrire le lien en ancre simple. Le but est d’avoir une navigation par ancre très rapide mais avec une alternative en dur.

<code>

jQuery(document).ready(function(){
$("a[href*=’#']").click(function() {
var href = $(this).attr(’href’);
anchor = href.split(’#')[1];
var $myDiv = $(’#'+anchor);
if ($myDiv.length) {
$(this).attr(’href’, ’#'+anchor);
}
});
});

</code>
<code>

Et pour créer des #ancres sur des titres SPIP en retirant les accents et ajoutant des tirets inter mots, utilisez le filtre |url_nettoyer{200} sans oublier d’inclure la fonction reprise de SPIP (plugin dist urls_etendues)
include_spip(’action/editer_url’) ;

</code>
Code touti

#jQuery #anchors_html #SPIP

Getting Started | Select2 - The jQuery replacement for select boxes
▻https://select2.org

une alternative jQuery à Chosen pour le remplacement des <select> et select multiples

#chosen #select #formulaire #jquery

GitHub - alsacreations/pepin : Structure par défaut de plugin jQuery et plugins variés
▻https://github.com/alsacreations/pepin

Pepin est un modèle (parmi tant d’autres) de plugin jQuery modulaire, accompagné de plugins pratiques (voir liste ci-dessous), propres et respectant la plupart des bonnes pratiques d’accessibilité, avec l’usage d’ARIA.

Pour les plugins proposés : ▻https://github.com/alsacreations/pepin#plugins

#jquery #plugin #modulaire #javascript #tabs #modalbox #slider #scroll #sticky #accordeon #toggle #autocomplete

Creating a Carousel Using Only Jade(Pug), #javascript, #jquery and #css
▻https://hackernoon.com/creating-a-carousel-using-only-jade-pug-javascript-jquery-and-css-b69576

STEP 1: Create divs inside of your page that will contain the carousel elements.gallery .gallery-main .gallery-main-image img(src=”/images/gallery3.jpg”) .gallery-filmstrip a(href=””) img(src=”/images/gallery1.jpg”) a(href=””) img(src=”/images/gallery2.jpg”) a(href=””) img(src=”/images/gallery3.jpg”) a(href=””) img(src=”/images/gallery4.jpg”) a(href=””) img(src=”/images/gallery5.jpg”)STEP 2: Set the styles for all of the elements inside of your carousel:The Displayed Image Gallery:The div around the display for the selected image/set styles for the wrapper around the image that will be displayed on click/.gallery background-color: black;.gallery > .gallery-main position: relative; height: 400px; overflow: hidden;The div that contains the div that (...)

#front-end-development #creating-a-carousel

Lodash
►https://lodash.com

Une bibliothèque JavaScript pour manipuler des données en ajoutant des instructions natives :
- pour des tableaux, objets, chaînes de texte
- pour tester et manipuler des valeurs
- pour créer des fonctions composites
Au contraire de jQuery elle n’est pas prévue pour manipuler le DOM HTML mais de se concentrer sur les structures du langage.

Voir aussi :
- une présentation rapide en français : ▻https://www.alsacreations.com/outils/lire/1746-Lodash.html

- la doc officielle : ▻https://lodash.com/docs

#lodash #javascript #jquery

Featherlight – The ultra slim #jquery #lightbox.
▻http://noelboss.github.io/featherlight

Featherlight is very, very lightweight. 400 lines of JavaScript, 100 of #css, less than 6kB combined.

Une extension pour gérer les galeries : ▻http://noelboss.github.io/featherlight/gallery.html

#mediabox #colorbox

How to implement scrollytelling with six different libraries
▻https://pudding.cool/process/how-to-implement-scrollytelling

https://pudding.cool/process/how-to-implement-scrollytelling/assets/scrollytelling.gif

how to tackle a simple scroll-driven chart using six different libraries and share my thoughts on each implementation.

(...)

For highly customized stories you will want ScrollMagic or Waypoints.

For the beginner you might want to check out ScrollStory, especially if you lean on #jQuery.

For the #d3.js lover you should explore graph-scroll.js, but be ready to accept the defaults or be ready to tinker.

#scroll

Reframe.js

▻https://dollarshaveclub.github.io/reframe.js

Reframe.js removes a specified element’s height & width attributes & then wraps that element in #responsive div that is an intrinsic ratio of the original element. This plugin is meant for embedded content like #iframes or #videos .

#javscript #jquery

X-editable :: In-place editing with Twitter Bootstrap, #jQuery UI or pure jQuery
▻https://vitalets.github.io/x-editable

X-editable

In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery

This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. Please try out demo to see how it works.

#formulaires #javascript (via .Gilles)

Snapper: A CSS Snap Points Carousel
▻https://www.filamentgroup.com/lab/introducing-snapper.html

Snapper is a lightweight script that’ll apply CSS and JS carefully to create a broadly-functional snap-points carousel. This script builds on a simple overflow container and native CSS snap points to make it better

#carousel_snap_RWD_CSS_jQuery_Filament_Group_clevermarks

Et hop, une petite extension #seenthis_search pour #firefox :)

▻https://github.com/seenthis/firefox-seenthis-search

C’est une adaptation rapide de l’extension pour del.icio.us que je pointais ici :

►http://seenthis.net/messages/253700#message362734

En résumé, ça permet de rechercher rapidement dans une copie locale de vos posts seenthis.

Pour l’instant on peut l’utiliser directement depuis les sources en suivant les explications du dépôt, reste à publier le bouzin sur addons.mozilla.org.

https://framapic.org/GahtF5xnuvZX/aqRLB91gfGJK.png https://framapic.org/JRJZOLXioro2/W3jwo6KuRxv9.png

/me super content

Two Thousand Years of Urban Growth
▻https://github.com/richiecarmichael/Esri-Urban-Growth

Inspiration and data for this app was derived from Tertius Chandler’s 1987 book entitled Four Thousand Years of Urban Growth: An Historical Census. Chandler’s work was merged and updated with data from Esri and Wikipedia.

Special thanks to Witold Frączek and Carol Sousa for geolocating, verifying and updating the city database.
This application makes use of the following libraries:

#ArcGIS API for JavaScript (beta) by Esri
Esri’s JavaScript library for mapping and analysis.
#D3.js by Mike Bostock
D3 is a JavaScript library for visualizing data with HTML, SVG, and CSS.
#jQuery by jQuery Foundataion Inc
A JavaScript framework for DOM manipulation and a foundation for many other frameworks.

https://github.com/richiecarmichael/Esri-Urban-Growth/raw/master/img/urban-large.gif

#cartographie #urbanisation

What’s New in #jquery 3 - Telerik Developer Network
▻http://developer.telerik.com/featured/whats-new-in-jquery-3

Les nouveautés de jQuery #version 3

#javascript #maj

Contournement du blocage du #Journal_Le_Monde
▻http://www.dsfc.net/developpement/javascript/contournement-du-blocage-du-journal-le-monde

http://www.puy-de-dome.gouv.fr/local/cache-vignettes/L280xH160/arton4401-679fe.gif

Si, vraiment, vous voulez accéder aux contenus du journal Le Monde, installez #Greasemonkey sur Mozilla Firefox.

#Javascript #Bloqueur_publicitaire #Bloqueurs_publicitaires #JQuery

Boiling React Down to a Few Lines in jQuery - Hackflow
▻http://hackflow.com/blog/2015/03/08/boiling-react-down-to-few-lines-in-jquery

Literally #canvas — Literally Canvas v0.4.11 docs - HTML5 drawing board - MS Paint in your web browser
▻http://literallycanvas.com/index.html

Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget. Its only dependency is React.js. You can use it to embed drawing boards in web pages. It’s kind of like an extensible MS Paint in JavaScript. Users can sketch drawings and you can do what you like with the results. It comes with an easy-to-use #jQuery plugin.

#editeur #dessin #SVG #json #web-based

GitHub - VPenkov/okayNav: The world’s okayest #responsive navigation
▻https://github.com/VPenkov/okayNav

This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.

https://raw.githubusercontent.com/VPenkov/okayNav/master/demo.gif

#menu #jquery

FlexNav - A jQuery Plugin for Responsive Menus
▻http://jasonweaver.name/lab/flexiblenavigation

Un menu responsive est pas trop mal accessible (en tout cas bien au clavier), qui s’adapte à l’écran, et qui marche aussi en tactile. Il est aussi sobre, sans styles envahissants, donc facile à personnaliser.
via @fil

#intégration #web #HTML #CSS #javascript #jquery #menu #navigation #responsive

#SPIP 3.1 dispo.

Nous avons le plaisir de commencer l’année 2016 en lançant officiellement SPIP 3.1

SPIP 3.1 est une version améliorée de SPIP 3.0, qui comprend une mise-à-jour des bibliothèques #JavaScript embarquées, un nouvel habillage graphique pour l’espace privé et les pages publiques et de nombreuses autres améliorations.

SPIP 3.1 en bref

– Ajout d’une fonction plein écran, vous permettant d’écrire et voir le résultat simultanément.
– Mise à jour les librairies javascript dont #jQuery (passage à la version 1.11.3) et Jquery UI.
– Mise à jour graphique du thème par défaut qui intègre la base minimale #CSS #TinyTypo (►http://tinytypo.tetue.net).
– Mise à jour du thème graphique de l’espace privé.
– Ajout du lecteur multimédia ►http://mediaelementjs.com par défaut pour la lecture des sons et vidéos.
– Des statistiques améliorées.
– Coté PHP, travail de normalisation, suppression de nombreux warnings et compatibilité accrue avec les dernières versions de #PHP, en particulier #PHP7.

Lire le descriptif détaillé sur spip.net :
▻http://www.spip.net/fr_article5713.html

Lire l’annonce complète sur le blog :
▻http://blog.spip.net/785

#slicknav - #responsive Mobile #menu Plugin for #jquery
▻http://slicknav.com

un menu «hamburger» responsive en jquery simple et configurable

#barenav #javascript

goker / canvasResize
▻http://gokercebeci.com/dev/canvasresize

jQuery canvasResize: is a plugin for client side #image resizing. Github: ▻https://github.com/gokercebeci/canvasResize

#javascript #canvas #redimensionner #jquery