jqDnR :: Drag'n'Resize minimaliste pour jQuery Who? jqDnR Minimalistic Drag'n'Resize for jQuery What? jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements. Features; Drag + Drop Element Posistioning South East ResizingDefinable Drag and Resize "handles"Translucent Dragging, Preservation of Original Opacity Why? I wrote jqDnR to compliment jqModal elements, allowing drag+resize functionality while remaining true to the plugin's minimalistic architecture. jqDnR provides the all the basic elastic functionality most dialogs will need. If you like jqDnR, please consider a dontation to support its development: When? Current Version: 2007.08.19 +r2 (c) 2007 Brice Burgess under The MIT License Where? Download the Plugin (jqDnR.js - 972 bytes) Download the Dimensions Plugin (dimensions.js) [OPTIONAL] - If detected, the dimensions plugin by Brandon Aaron will be used to alleviate Internet Explorer "jumpiness" with elements that have fixed or percentage based position. How? Examples 1. Javascript 2. 3. Etc.
10 jQuery Rating Plugins Ratings, Polls, voting are very common these days! We the developers, use our most of time in searching good scripts for rating/polls. Today I have collected 10 jQuery rating scripts and plugins for better user experience for your next project. Related posts: 1. jRating It is a very flexible jQuery plugin for quickly creating an AJAX star rating system. Source 2. jQuery Opineo Plugin Opineo allows you to do all of this and much more without signing up for an account or hire an expert. Source 3. This is a jQuery plugin for star rating systems. Source 4. Build an MSDN-style content rater with ASP.NET, MS AJAX, and jQuery. Source 5. jQuery Star Rating Plugin This is hacked version of star rating created by Ritesh Agrawal It transform a set of radio type input elements to star rating type and remain the radio element name and value, so could be integrated with your form. Source 6. As it stands, this hack creates all of the votes in a separate table. Source 7. jQuery Raty – A Star Rating Plugin Source
Login with Javascript SDK - Développeurs Facebook If people using your app aren't logged into your app or not logged into Facebook, you can use the Login dialog to prompt them to do both. Various versions of the dialog are shown below. If they aren't logged into Facebook, they'll first be prompted to log in and then move on to logging in to your app. The JavaScript SDK automatically detects this, so you don't need to do anything extra to enable this behavior. Invoking the Login dialog For apps using the Facebook SDK for JavaScript, the Login dialog is invoked with a simple call to FB.login: FB.login(function(response){}); As noted in the reference docs for this function, it results in a popup window showing the Login dialog, and therefore should only be invoked as a result of someone clicking an HTML button (so that the popup isn't blocked by browsers). There is an optional scope parameter that can be passed along with the function call that is a comma separated list of Permissions to request from the person using the app.
Mettre en place Facebook Connect sur son site : 1ère partie | 255ko Facebook Connect permet de se passer de processus d'identification sur son site, ou de simplifier celui-ci pour vos utilisateurs. Mais cela ne s'arrête pas là puisqu'il vous permet également d'utiliser les différentes fonctionnalités d'Open Graph.Ce tutoriel en plusieurs parties détaille les étapes nécessaires pour la mise en place de Facebook Connect. Cela va de la création d'une application Facebook à la détection de l'utilisateur en passant par son authentification. Créer une application Facebook Avant toute chose vous devez créer une application Facebook qui servira en quelque sorte d'interface entre votre site et la base de données utilisateurs de Facebook (vous ne serez pas pour autant obligé de créer une application directement intégrée sur la plateforme Facebook) : Cliquez sur le lien "Développeurs" situé tout en bas de la page d'accueil de Facebook.Sur la page suivante cliquez sur "Applications" dans le menu du haut : Cliquez ensuite sur "Créer une application" :
25 Plugins for jQuery Facebook Facebook is an integral part of our lives and we are so used to of check it for professional or personal reasons, that its difficult to live without it. Facebook is so popular that you can find various jQuery plugins which helps you make adapt different features and styles of Facebook on your website. This is in a way good also because people and accustomed of using Facebook and they can link themselves better with the sites that offers them Facebook like features. Thus we have brought 25 best plugins for jQuery Facebook to bring you closer to your best social media website. If you like this article, you might be interested in some of our other articles on jQuery Navigation Tutorials, jQuery UI Resources, jQuery Scrollbar Plugins, and jQuery Gallery Plugins. Advertisement Hovercard You can now create a hovercard just like Facebook’s hovercard, with this plugin. More Information on Hovercard Facebook like jQuery face recognition More Information on Facebook like jQuery face recognition Tipsy
6 Nice jQuery File Upload Plugins Today is a set of 6 really nice jQuery File Upload plugins are easy to install. Some with nice drag and drop, and multiple file selection features. enjoy! Related Posts: Update 12/12/13: Added 6. jQuery File Upload UI (download link).Update 12/10/13: I have made a full demo of how to upload images using jQuery/PHP. 1. jQuery uploadprogress Plugin to augment a standard file upload form with transparent background upload and add uploadprogress meter to keep client informed of progress. SourceDemo 2. jQuery HTML5 Uploader A lightweight jQuery plugin that lets you to quickly add an upload system a-la-Gmail into your web app. Source + Demo 3. Allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads. Source + Demo 4. HTML5 or Flash Multiple File Upload jQuery Plugin Script. SourceDemo 5. jQuery DROPAREA Source + Demo 6. jQuery File Upload Download Demo AUTHOR: Sam Deering.
Le responsive design, le nouvel allié du cross media Depuis quelques mois, le monde du web ne jure plus que par le responsive design. A l’instar de la communication cross media, le responsive design est né de l’évolution des supports/médias : un site web ne doit plus être pensé pour être uniquement consulté sur un écran d’ordinateur mais aussi sur un Smartphone ou depuis une tablette… Sans rentrer dans les détails techniques ; on parle de responsive design lorsqu’un design est conçu pour s’adapter aux différentes résolutions et supports disponibles sur le marché. Cette approche évite donc d’avoir à créer un design spécifique pour chaque support. Voici quelques exemples de Responsive Design particulièrement réussis : GOOGLE / GMAIL Google a ajouté une nouvelle fonctionnalité à Gmail : aujourd’hui la fenêtre de Gmail s’adapte automatiquement à la taille de l’écran. A travers cette vidéo, un employé Google explique et met l’accent sur le responsive design :
La méthode matchMedia ou les Media Queries pour JavaScript Vous connaissez certainement les Media Queries CSS. Celles-ci permettent d'adapter les instructions de style appliquées à un document HTML, en fonction de nombreux critères (résolution de l'écran, dimensions, périphérique de sortie). C'est la technique la plus souple et la plus utilisée actuellement pour ajuster dynamiquement l'affichage et obtenir un rendu graphique différent sur écrans classiques, mobiles, tablettes, et autres moyens d'accéder au web. Avec matchMedia(), les mêmes capacités de détection sont rendues disponibles en JavaScript. C'est une méthode qui dépend de l'objet window (la fenêtre du navigateur) et qui prend en argument une chaîne de texte contenant l'expression à tester, pour retourner true ou false via sa propriété matches. <script>if (window.matchMedia("(min-width: 600px)").matches) { } else { } </script> Voir la démonstration n°1 Si l'on examine de plus près l'objet retourné dans une console JavaScript... Voir la démonstration n°2 Voir la démonstration n°3
Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! L'attribut media peut prendre (depuis CSS2) les valeurs suivantes : screen Écrans handheld Périphériques mobiles ou de petite taille print Impression aural (CSS 2.0) / speech (CSS 2.1) Synthèses vocales braille Plages braille
Améliorer l’accessibilité d’un formulaire Clever Age vous proposait il y a quelque temps un livre blanc sur les formulaires web. Dans la même lignée, amis développeurs front, sachez que l’accessibilité web n’est pas forcément affaire de spécialistes. La plupart des questions peuvent se régler assez facilement. Améliorons à peu de frais l’accessibilité de nos formulaires ! Introduction Quand on parle d’accessibilité des formulaires, une des règles d’or consiste à utiliser de vrais champs de formulaire. Par exemple les listes déroulantes chartées aux petits oignons peuvent poser des problèmes importants d’accessibilité. Dans le cas qui nous concerne, il ne s’agit que de zones de saisie de texte, la moitié du travail est donc déjà faite pour nous : nous n’aurons à convaincre personne de la difficulté de rendre accessibles des éléments natifs HTML, très bien supportés depuis longtemps par les aides techniques. Contrôler les couleurs, les contrastes, etc. Oui évidemment dit comme ça c’est un peu aride. Utiliser les labels Conclusion