PUBLIC MARKS from camel with tag javascript

Je suis sûr que vous savez tous qu'il est possible de créer des plugins et d'étendre divers aspects de la bibliothèque javascript jQuery, mais savez-vous que vous pouvez aussi étendre les capacités de son moteur de sélection ? Eh bien, vous pouvez ! Par exemple, vous pourriez vouloir ajouter un nouveau sélecteur :inline, qui retournerait les éléments qui sont affichés inline. Regardez :

Sur certains sites il peut être utile d’informer le visiteur sur la nature du lien en changeant la couleur et en y associant une petite image : est-ce un lien interne, externe, une image, un lien affilié… Pour y arriver facilement je vous conseille d’installer le script de DLINK qui fait cela très bien et presque tout seul…

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website

The great thing about Realmac's QuickSnapper site is that if JavaScript is turned off, the list of snaps is visible by default. So we'll follow suit. It's also worth noting that their version only keep pulling in new items until it hits the end. I'll show you how you can keep the list looping, and in a follow up tutorial I'll show you how to hook this in to an Ajax hit that doesn't hammer your server and keeps the effect nice and smooth.

Galleriffic was inspired by Mike Alsup's Cycle plugin, but with performance in mind for delivering a high volume of photos. This is my first experiment with jQuery, so I would love feedback on how to improve this plugin. Features * Smart Image Preloading after the page is loaded * Thumbnail Navigation (with pagination) * Bookmark-friendly URLs * Slideshow (with auto-updating url bookmarks) * Image fade transitions * Optional download link for the original image * Flexible configuration * Graceful degradation when javascript is not available * Now supports multiple galleries per page (View Multiple Gallery Demo)

Voici encore un petit script intéressant qui permet d'afficher des outils de mesures sur votre écran! Il s'utilise sous forme de favori (bookmarklet) et lorsque vous cliquez dessus il affiche un petit menu sur la page en cours qui permet au choix: * d'afficher une grille par dessus la page, avec tous les paramètres possibles * d'afficher une règle graduée en pixels sur les bords de la page * de dessiner un triangle de mesure * d'afficher une croix de coordonnées qui suit votre curseur

Les frameworks CSS ont été mentionnés la première fois dans la conférence Working in the Now (visualiser la présentation). Au final, on n’était pas loin de faire salle comble avec plus d’une vingtaine de participants à vue de nez. Une petite scéance de rattrapage s’impose ;-) Pourquoi avoir choisi ce sujet ? J’ai lu un article sur l’importance du rythme vertical l’an dernier sur Biologeek et ça m’a sensibilisé au fait qu’on pouvait rendre la lecture d’un site tout simplement en rendant prédictible la position du texte. Entre temps j’ai également lu l’excellent Transcender CSS d’Andy Clarke. J’y ai été sublimé par des présentations de sites totalement en grille. Depuis je suis devenu fan de Blueprint CSS (je crois que ça s’est remarqué lors de mon intervention ;-)). J’ai commencé à l’utiliser sur des projets personnels puis dans un cadre professionnel. J’utilisais déjà symfony comme framework PHP et jQuery comme framework JavaScript alors pourquoi pas Blueprint ? Comme le suggérait très justement Christian Heilmann dans sa présentation, l’utilisation d’outils déjà existants est nécessaire pour réduire les coûts de production. C’était déjà un bon alibi mais je les apprécie aussi parce qu’on gagne un temps fou ! On se concentre sur le code métier, pas le reste.

Ce script JavaScript accepte des données de différents formats : HTML, JSON et XML. L’utilisateur pourra ouvrir/fermer/créer/renommer/supprimer une branche. jsTree supporte le poser/déplacer et la multi-sélection. Enfin, ce qui ne gâche rien, la personnalisation de jsTree est très simple : via le fichier CSS, changer les icones, points, l’arrière plan, les polices et leur taille.

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries. By using the google.load() method, your application has high speed, globally available access to a growing list of the most popular JavaScript open source libraries.

Les bibliothèques Javascript — comme jQuery et la myriade de plugins qui l’accompagne — facilitent la vie des développeurs web en leur permettant de manipuler le DOM les mains dans les poches. Toutefois, il est toujours bon d’avoir quelques fonctions standalone sous la souris pour se faciliter l’intégration cross-browser ! Voici une sélection de 21 scripts pour faire face à toutes les situations (ou presque) :

CrossSlide is a jQuery plugin that implements in Javascript some common slide-show animations, traditionally only available to the web developer via Adobe Flash™ or other proprietary plugins. CrossSlide builds upon jQuery's animation facility, so it is as portable across browsers as jQuery itself (a lot.)

This jQuery plugin will easily create beautifully rounded corners. No images or obtrusive markup necessary. Architectural features: * Less than 8000 bytes after yui compression. * Beautiful and fast anti-aliasing for older or stubborn browsers. * Degrades well for browsers with javascript turned off. * Native browser corners used on Safari, iPhone, and Firefox 3. * Form and anchor buttons are easily styled and rounded. * Documentation and test coverage (this file).

Par Yohann CIURLIK le 17 novembre 2008, 23:11 Stephane Caron à écrit un clone du célèbre plugin Lightbox avec JQuery. Un plugin pratique réalisé en Javascript permettant de visualiser des aperçus de photos et d’images.

PHP Web Stat est une application PHP qui gère vos statistiques de fréquentation sans avoir recours à une base de données. En effet, il crée ses propres fichiers de logs et il affiche les données à partir de ces informations. php web statistiques Pour le faire fonctionner, un code doit être placé dans vos pages Web. Petite astuce intéressante pour faire que cela fonctionne dans tous les cas de figure : le fichier PHP installé est inclus via JavaScript et l’enregistrement des informations de statistiques seront enregistrées même si l’option “caching” est activée. De plus, si l’utilisateur interdit l’exécution de JavaScript, PHP Web Stat appellera le fichier de PHP directement.

SimplaCart (js) est un script très léger (10,5 Kb) qui permet d’ajouter la fonction “achat en ligne” en quelques lignes de codes. Il utilise les cookies pour garder les références des articles dans le panier d’achat. SimplaCart (js) n’exige pas de bases de données ou de connaissance élevé en programmation : vous devez simplement être a l’aise avec l’HTML de base et avoir de bons reflexes pour “copier/coller”!

This JavaScript table sorting script is easy to use, fast and lightweight at only 1.7KB. It includes alternate row formatting, header class toggling, auto data type recognition and selective column sorting. It will currently sort strings, numbers and currency. More features will follow.

Lightweight but rich javascript data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration. Features * Resizable columns * Resizable height and width * Sortable column headers * Cool theme * Can convert an ordinary table * Ability to connect to an ajax data source (XML and JSON[new]) * Paging * Show/hide columns * Toolbar (new) * Search (new) * Accessible API * Many more

TYPOlight est un système de gestion de contenu web créé en 2004 par Leo Feyer, et soutenu aujourd’hui par une équipe d’une vingtaine de développeurs. L’objectif était dès le départ de proposer un CMS : * 100% accessible qu’il s’agisse de l’interface d’administration fondée sur AJAX mais fonctionnant aussi sans javascript (suffisamment rare pour être noté) ou du code généré côté utilisateur (tous deux conformes WAI) ; * moderne avec dès le départ une base de code en PHP5 orienté objet, un système de mise à jour automatique (payant, dégressif pour plusieurs domaines), un outil d’installation des extensions simple et sûr et un code généré valide XHTML strict ; * flexible du point de vue de la personnalisation des modèles de page (en s’appuyant sur un solide framework CSS) ou nativement du point de vue des types de contenus (pas de contrainte de structure de type titre - sous-titre - contenu).

Jcrop is a powerful image cropping engine for jQuery. It's been designed so developers can easily integrate an advanced image cropping functionality directly into any web-based application without sacrificing power and flexibility (or the weeks of coding, testing and debugging). Jcrop also features clean, well-organized code that works well across most modern web browsers. Here you'll find the documentation for Jcrop itself. This guide assumes that you have a basic knowledge of HTML and including files into a web page. At the end of the article, there are links to more advanced concepts and implementation techniques.

ID Selector: Quick Guide It's all about getting users signed into your website as quickly and efficiently as possible. It achieves this by providing a simple, consistent, provider neutral interface, and by educating the user about OpenID during the sign in process. In short, it makes OpenID easier for the end user and benefits both the relying parties and OpenID providers. What is the Selector? It's a widget that you add to the existing OpenID login form on your website. You embed a snippet of javascript code into your page, and it writes in an HTML button tag styled to match your CSS.

BlackBird est un script open source de Login/Débogage JavaScript multiplateforme. Les développeurs JavaScript connaissent trop bien la fonction alert() pour débugger leur programme ! BlackBird risque de mettre à la retraite anticipée cette vieille fonction ! blackbird debogage javascript BlackBird est tout simplement un outil génial qui permet le débogage de vos codes par l’intermédiaire d’un moniteur (au design superbe !) qui apparait en avant plan de votre page Internet. Cette console vous permettra d’afficher un ensemble de messages, avec différents types : erreurs, informations, alertes et débogages.

Tired of Arial and Times New Roman? I know I am. Up until now you had a choice of using sIFR, or painstakingly designing image headers and adding them to your web page manually. Of course, this gets a little old, especially after deciding to change color schemes two or three times. Enter facelift. It is the best of both worlds! Create your website as you would normally, and then install the two lines of code that facelift requires. The elements that you want to style will be replaced with an image representation of that text styled with your custom font. And since the text is retrieved directly from the page, you don't have to worry about updating any images when text changes — it is all done automatically!