SlideScreen jQuery Plugin “SlideScreen jQuery Plugin” Documentation by “Paulo Lagoá” v1.0.0 Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks! A) Introduction - top SlideScreen is a jQuery plugin that creates a "Before and After" effect from two images with just a few lines of code. You can have multiple instances of the plugin working on a single page and it is touch responsive, which means it will work on mobile devices. This help file will help you get started with SlideScreen and have it up and running in no time. B) Files - top SlideScreen comes with one .js and one .css files, so these should be included in your html for you to use SlideScreen. Below is a list of the files needed for the plugin. The Javascript and CSS calls should include these: Although there's not much CSS to change in SlideScreen there's a CSS file included with some properties for the styling of the separator bar.
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.
Create your own jQuery Image Slider - CSS-Plus I originally posted this article on 15 September 2010. This is an updated version. This tutorial is for beginners. The method for creating the slider could be done differently, but I feel this way is more simple to understand. Common things that cross my mind before actually jumping into development are: Where are the hidden elements situated? Beneath, on top, next to or behind the visible element? How are they hidden? Is their display set to none? Are they outside of the parent element which is set to overflow: hidden? Are they hidden behind visible element via z-index? All right, enough of that, let’s get started. The HTML Before we create anything, we should try and get an idea of exactly what we are trying to achieve. So let’s turn that into HTML. .gallery-wrap will be the visible area..gallery is the element that contains the list of images..gallery__controls contains the next and previous controls. The CSS The jQuery/Javascript This is where all the fancy tricks take place. That’s about it!
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. Have Fun! 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 Source 8. Source Source 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é. 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 : Une façon de démontrer, une fois de plus, que Google sait anticiper et s’adapter aux nouveaux usages.
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. La syntaxe de la requête média reste la même, ce qui est bien agréable. Ainsi, il sera possible de déclencher des actions complémentaires à ce que l'on peut déjà construire en CSS, que ce soit au chargement du document ou bien à n'importe quel moment à la demande en exécutant matchMedia(). <script>if (window.matchMedia("(min-width: 600px)").matches) { } else { } </script> Voir la démonstration n°1 Voir la démonstration n°2 Voir la démonstration n°3