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.
Drag Drop Javascript Library for iPad & iPhone In large part, the iPad's magic comes from its touch-based interface. Touch-based interfaces are generally "incompatible" with those made for a mouse and web technologies are still beginning to explore this new medium. We hope to shed a speck of light on this problem by distributing a free javascript class we developed for gotProject, enabling any website to add draggables and droppables for an iPad or iPhone. To see the full potential of this library, grab an iPad, create an account on gotProject, and play around with the amazing interface. It's the first web clipper & information manager for the iPad with a drag drop interface! If you'd like to use the library for your site, simply download it using the green link above. Draggables are divs that can be moved around the screen using your fingers. Syntax //To make an element draggablevar D = new webkit_draggable('id_of_element', {options}); //To stop an element from being draggable D.destroy(); Options Examples Drop A Draggable on Me
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
Native HTML5 Drag and Drop Introduction For years, we've been using libraries like JQuery and Dojo to simplify complex UI elements like animations, rounded corners, and drag and drop. There's no doubt, eye-candy is important for making rich, immersive experiences on the web. But why should a library be required for common tasks that all developers are using? Drag and drop (DnD) is a first class citizen in HTML5! Feature Detection Many apps that utilize DnD would have a poor experience without it. If you need to rely on an API, always use feature detection rather than sniffing the browser's User-Agent. if (Modernizr.draganddrop) { // Browser supports HTML5 DnD. } else { // Fallback to a library solution. } Creating draggable content Making an object draggable is simple. As an example, let's start creating rearrangeable columns. It's worth noting that in most browsers, text selections, img elements, and anchor elements with an href attribute are draggable by default. Result (draggable but won't do anything): 1. Result:
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.
10 User Interface Design Fundamentals It’s no great mystery that truly great user interfaces are the ones that are engineered to stay out of the way. Free trial on Treehouse: Do you want to learn more about web design? Click here to try a free 14-day trial on Treehouse. ‘Staying out of the way’ means not distracting your users. Check out our other design courses at Treehouse. When getting started on a new interface, make sure to remember these fundamentals: 1. “Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Your user’s goals are your goals, so learn them. 2. Users spend the majority of their time on interfaces other than your own (Facebook, MySpace, Blogger, Bank of America, school/university, news websites, etc). CoTweet uses a familiar UI pattern found in email applications. 3. “The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.” – Jakob Nielson Your users need consistency. 4. 5.
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" :
A Summary of User Interface Design Principles by Talin This document represents a compilation of fundamental principles for designing user interfaces, which have been drawn from various books on interface design, as well as my own experience. Most of these principles can be applied to either command-line or graphical environments. I welcome suggestions for changes and additions -- I would like this to be viewed as an "open-source" evolving document. 1. -- Know who your user is. Before we can answer the question "How do we make our user-interfaces better", we must first answer the question: Better for whom? One way around this problem is to create user models. What are the user's goals? Armed with this information, we can then proceed to answer the question: How do we leverage the user's strengths and create an interface that helps them achieve their goals? In the case of a large general-purpose piece of software such as an operating system, there may be many different kinds of potential users. 2. 3. 4. 5. 6. 7. 8. 9. 1. 10. 11. 12.