public marks

PUBLIC MARKS from decembre with tag jQuery

This year

JAVASCRIPT - jQUERY - TUTO (trés facile ett documenté) - Simplifiez vos développements JavaScript avec jQuery

Avec ce cours, je vous propose de découvrir les multiples facettes du framework jQuery. De la sélection d'éléments à la manipulation du DOM, en passant par l'animation, les requêtes AJAX, l'utilisation et la création de plugins, la création de jeux et bien d'autres choses encore !

jQUERY - JAVASCRIPT - jQuery udraggable Plugin

jquery.udraggable.js This plugin provides an API similar to jQueryUI's draggable but with support for unified mouse and touch events. It builds on Michael S. Mikowski's jquery.event.ue unified event plugin.

html - Draggable div without jQuery UI - Stack Overflow

(via)
Here's another updated code: $(document).ready(function() { var $dragging = null; $('body').on("mousedown", "div", function(e) { $(this).attr('unselectable', 'on').addClass('draggable'); var el_w = $('.draggable').outerWidth(), el_h = $('.draggable').outerHeight(); $('body').on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY - el_h / 2, left: e.pageX - el_w / 2 }); } }); $dragging = $(e.target); }).on("mouseup", ".draggable", function(e) { $dragging = null; $(this).removeAttr('unselectable').removeClass('draggable'); }); });​

jQuery - LIBRARY - DRAG - jQuery.event.move

Move events are designed to compliment drag events, where the two have different meanings: drag events are for transferring data while move events are for making interactive interfaces. That said, movestart, move and moveend events deliberately echo dragstart, drag and dragend events, with one main difference: where the drag event fires continuously whether you have moved the pointer or not, the move event fires only after the pointer has been moved, and only on animation frames. Where both a dragstart and any move event are bound to the same node, drag events are suppressed.

DEV - 2009 - Useful Javascript, jQuery, and AJAX Tutorials and Resources – MLC#1 | The Blog of Joren Rapini

Many of these links are bookmarks to articles that were list themselves, so they included many items. What’s special about this list on Joren Rapini’s blog, you ask? Well, I have graciously copied and pasted the Firefox tags that I use to identify each one of these pages in my bookmarks, so you can copy and paste them right into yours! This should save you a lot of time, and give you an enormous wealth of resources to boot.

jQuery - javascript - JS scrollbar recommendations? - Stack Overflow

by 1 other
I like to use: - Tiny Scrollbar for the minimalist design - JQuery Custom Content Scroller

jQuery - LIBRARY - SCROLL - jQuery custom content scroller – malihu | web design

by 1 other (via)
(Last updated on Jul 11, 2016 ) Highly customizable custom scrollbar jQuery plugin. Features include: - vertical and/or horizontal scrollbar(s) - adjustable scrolling momentum - mouse-wheel (via jQuery mousewheel plugin) - keyboard and touch support - ready-to-use themes and customization via CSS - RTL direction support - option parameters for full control of scrollbar functionality - methods for triggering actions like scroll-to - update, destroy etc - user-defined callbacks and more.....

jQuery - LIBRARY - SCROLL - Tiny Scrollbar: A crossbrowser lightweight Javascript / jQuery scrollbar.

What is it? Tiny Scrollbar is a nice and elegant way to enable the scrolling of content on mobile and desktop devices. Its designed to be a dynamic lightweight utility. Furthermore it gives a User Interface Designer a powerful way of enhancing the Ui (user interface) of a website. It comes in 2 flavours as a vanilla Javascript microlib and as a jQuery plugin. Browser support differs between the jQuery plugin and the plain Javascript microlib. Specifically, the plain Javascript microlib does not support legacy browsers such as IE6-8. Use the jQuery plugin release if support for those browsers is required. Source is on GitHub

CSS / jQuery - Why I Love Element Queries & You Should Too! - Hashnode

by 1 other
For the past three years, I've done a lot of research and experiments related to the idea of style scoping and element queries in CSS. Since experimenting with element queries, I've noticed a big transformation in how I write HTML, and the fine-grained nature of element queries has improved the way I write CSS too. In this article I am going to explain why I love Element Queries and how you can get started easily.

2015

jQuery - Does jQuery .remove() clear out loaded javascript when it is used to remove a script tag? - Stack Overflow

No. Once a script is loaded, the objects and functions it defines are kept in memory. Removing a script element does not remove the objects it defines. This is in contrast to CSS files, where removing the element does remove the styles it defines. That's because the new styles can easily be reflowed. Can you imagine how hard it would be to work out what a script tag created and how to remove it? EDIT: However, if you have a file that defines myFunction, then you add another script that redefines myFunction to something else, the new value will be kept. You can remove the old script tag if you want to keep the DOM clean, but that's all removing it does. EDIT2: The only real way to "clean up" functions that I can think of is to have a JS file that basically calls delete window.myFunction for every possible object and function your other script files may define. For obvious reasons, this is a really bad idea.

BOKMARKLET - jQuery UI dialog in Bookmarklet and GreaseMonkey - Stack Overflow

(via)
Thanks to some awesome answers in other threads, I learned how to: load jQuery and jQuery-UI in a bookmarklet load a CSS into a bookmarklet using jQuery create a DIV in a bookmarklet using jQuery create jQuery UI dialog (external link) and I could manage to combine all four things into a single script which works both as a BookMarklet and as a GreaseMonkey script, which is absolutely awesome.

jQuery - Tuto - Use jQuery to extract data from HTML lists and tables | Encosia

(via)
Mapping the data within HTML unordered lists. Using .map() against an unordered list is one of the most straightforward examples to start with. Imagine you had this simple HTML markup: .map() like this:

jQuery - Javasript - Apprendre - Insérer et remplacer des éléments dans le DOM

Nous allons ici nous intéresser à une autre facette de jQuery : la modification du DOM. Les méthodes qui vont être examinées permettent d'insérer, de remplacer et de supprimer des éléments quelconques dans le DOM, et ainsi de modifier le contenu de la page affichée dans le navigateur.

jQuery - Infinite Scroll - jQuery One Page Navigation Plugin | Trevor Davis | Front-End Developer @ Viget

(via)
When appropriate, I am a fan of the one-page sites. I really like the ones that add smooth scrolling and highlight the navigation depending upon which part of the page you have scrolled to.

INFINITE SCROLL - jQuery - Reset / disable infinite scroll after AJAX call - Stack Overflow

I am using infinite-ajax-scroll (https://github.com/webcreate/infinite-ajax-scroll) plugin with filtering. I have the filters working with the infinite scroll but my issue is, whenever the scroll get the the end of the results for one filter it will no longer scroll, even after another filter is selected. I therefore need to reset the infinate scroll when the filter is selected but I cannot find anywhere in the documentation on how to reset this and am not great with JQuery and so cannot figure this out.

jQuery - TUTO - AJAX simplifié avec jQuery

AJAX (littéralement : Javascript et XML Asynchrones). AJAX c'est le pont entre les langages serveur (PHP, .NET...) et JavaScript, cette technologie permet de faire communiquer les deux de manière asynchrone, c'est-à-dire qu'on a plus besoin de recharger toute la page mais seulement une partie de la page, en y insérant des informations qui viennent directement du serveur.

jQuery - TUTO - Le sélecteur jQuery - débuter en jQuery

$ : le sélecteur raccourci __ Encore une petite précision : dans mon extrait de code ci-dessus, vous voyez que j'ai ajouté un paramètre $ pour ma fonction anonyme, et que j'ai ensuite utilisé $() à la place de jQuery().__En fait, $() est un alias de la fonction jQuery() (un autre nom pour la même fonction), on l'utilise plus souvent que jQuery(), tout simplement parce que c'est plus court à écrire ! __ Le seul problème est que d'autres framework javascript (Mootools nottament) utilisent également $ comme raccourci, du coup si vous utilisez plusieurs frameworks sur la même page, il y aura des conflits. ___ Heureusement, jQuery propose un mode noConflict(). Dans ce mode, le raccourci $ n'est pas créé pour éviter les problèmes. Le mode noConflict est par exemple activé par défaut dans Wordpress, donc $ ne marche pas et il faut donc se rabattre sur jQuery() à la place, la loose -_-'. __ L'astuce que j'ai utilisée me permet d'utiliser $ comme raccourci SEULEMENT à l'intérieur de ma fonction anonyme. Comme ça, même sous Wordpress où le mode noConflict est activé, je pourrais utiliser $ à l'intérieur de mon jQuery(document).ready.

jQuery - TUTO - Iframe - Créer un élément HTML dans le DOM avec jQuery

Le sélecteur jQuery est la plupart du temps utilisé pour sélectionner des éléments existant dans le DOM, via une règle CSS. Mais le sélecteur peut aussi créer de nouveaux éléments HTML de manière extrêmement simple ! Voici un petit exemple très simple qui créé un élément div , écrit "Salut !" à l'intérieur, puis enfin ajoute cet élément à la fin de la page web (en l'ajoutant à la fin body) :

JQuery - DEMO - arrays - JQuery .each() backwards - Stack Overflow

Here are different options for this: You can use this: $($("ul > li").get().reverse()).each(function (i) { $(this).text( 'Item ' + (++i)); }); ===or==== $($(".block-item").get().reverse()).each(function (i) { $(this).text(++i); });

JQuery - Native equivalents of jQuery functions

by 1 other (via)
I think there are many developers who don’t realize that most of the jQuery methods they use have native equivalents that require the same or only a slighter larger amount of code to use. Below are a series of code samples showing some popular jQuery functions along with their native counterparts.

2014

jQuery Collapser - collapsing/truncating an element text - Plugin demo page - Aakash Web

Collapser is a small and useful jQuery plugin for collapsing/truncating an element text by words, characters and lines with a flexible API. It is an all in one plugin with multiple functionalities to truncate a paragraph or any element as desired.

JQuery Plugin : Freetile.js (organiser contenu ) - By Yannis Chatzikonstantinou /

(via)
Freetile est un plugin pour jQuery qui permet à l' organisation du contenu de la page Web dans une mise en page efficace , dynamique et réactive . Elle peut être appliquée à un élément conteneur et il va tenter de l'organiser ses enfants dans une disposition qui permet l'utilisation optimale de l'espace de l'écran , par " l'emballage " dans un arrangement serré . Freetile a été le moteur de rendu derrière Assemblage et Assemblage Plus pour près de deux ans , et maintenant il devient disponible en tant que projet Open Source indépendant .

decembre's TAGS related to tag jQuery

ajax +   api +   astuce +   bookmarklet +   browser +   code +   console +   css +   delete +   demo +   design +   dev +   documentation +   drag +   example +   exemple +   extension +   film +   firebug +   firefox +   flash +   fonction +   forum +   free +   get +   grafikart +   greasemonkey +   htm +   html +   iframe +   image +   ImageSearch +   infinite-scroll +   infinite-scrolling +   interface +   javascript +   json +   lazy +   library +   list +   liste +   mobile +   mouse +   navigation +   official +   officiel +   opensource +   order +   placeholders +   player +   plugin +   popup +   post +   project +   projet +   reference +   remove +   requete +   script +   scroll +   scrollbar +   serveur +   site +   spip +   stackoverflow +   tag +   texte +   thumbnail +   tool +   tuto +   tutorial +   tutoriel +   unsafeWindow +   user +   userscript +   video +   web +   webdesign +   xml +