boxy - dialog Box Overview Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I've seen by providing an object interface to control dialogs after they've been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user. Here's an example, taken from the old feedback forms on my project pages: Downloading Package Package downloads are available from the jQuery project page. github jason@oreo ~ $ git clone git@github.com:jaz303/boxy.git Setup Drop the assets in the src directory of the distribution into your web root then include jquery.boxy.js and boxy.css in your page. We're good to go now. Using the jQuery Plugin To use the jQuery plugin, put $(selector).boxy(); in your document.ready, substituting "selector" as appropriate, e.g. Try the following examples: Basic plugin usage: Creating new dialogs show()
harvesthq.github.io/chosen/ Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right-to-Left Support
SpraedPDFGeneratorBundle by stedekay SpraedPDFGeneratorBundle generates HTML documents to PDF. The bundle gives you the chance to add a page header and footer very easily (which can be disabled/switched on the first page). It works with a little jar library based on the Flying Saucer project . ToDo Write a little example how to enable header and footer Writing tests (test frame available for UnitTests) Check for possibilities to use SVG files in HTML Installation Option 1: Use composer Option 2: Use git submodules Copy the SpraedPDFGeneratorBundle into the vendor/bundles/Spraed/PDFGeneratorBundle directory: git submodule add vendor/bundles/Spraed/PDFGeneratorBundle Option 3: Use deps file [SpraedPDFGeneratorBundle] git= target=/bundles/Spraed/PDFGeneratorBundle Register the Spraed namespace: $loader->registerNamespaces(array( ... Finally, you can enable it in your kernel: Usage $pdfGenerator->generatePDF($html, 'UTF-8');
hoverIntent jQuery Plug-in What is hoverIntent? hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. Why? Download hoverIntent r7 (fully-commented, uncompressed) Download hoverIntent r7 (minified) Examples <p><em>If you can see this message <strong>JavaScript is disabled</strong>. jQuery's hover (for reference) $("#demo1 li").hover( makeTall, makeShort ); hover ignores over/out events from children jQuery's built-in hover calls handlerIn and handlerOut functions immediately. .hoverIntent( handlerIn, handlerOut ) $("#demo2 li").hoverIntent( makeTall, makeShort ); hoverIntent also ignores over/out events from children hoverIntent is interchangeable with jQuery's hover. .hoverIntent( handlerInOut ) $("#demo3 li").hoverIntent( toggleHeight ); hoverIntent can also take a single handlerInOut, just like jQuery's hover. .hoverIntent( handlerIn, handlerOut, selector ) $("#demo4").hoverIntent( makeTall, makeShort, 'li' ); over: out:
Masonry Tutoriel pour améliorer vos applications Symfony2 Ce tutoriel fait suite à l'article intitulé "Créer sa première application web en PHP avec Symfony2" au cours duquel vous avez pu découvrir le framework Symfony2 et ses grands principes de fonctionnement. Si vous ne l'avez pas encore lu, je vous invite à le parcourir dès maintenant car nous allons poursuivre le développement de l'application "Filmothèque" créée précédemment. Au cours de cet article, nous allons voir comment améliorer notre application pour parvenir à un site web complet et prêt à être mis en ligne. Ce tutoriel est basé sur la version finale Symfony2.0.0 que vous pouvez télécharger ici : Symfony2. Qu'il s'agisse d'un site internet, d'un intranet ou même d'un jeu en ligne, une application web doit avoir sa propre identité et garder une certaine cohérence entre ses pages : présence d'un logo, mise en place d'un ou plusieurs menus, utilisation de couleurs et de polices de caractères similaires, etc. II-A. II-B. II-C. II-D. // ... Par :
Hovercard - Twitter and Facebook cards Hover over the red text to see the hovercard in action: jQuery is a cross-browser JS library designed to simplify the client-side scripting of HTML. It was released in January of 2006 by John Resig is an application developer at Khan Academy. He was a JavaScript tool developer for the Mozilla Corporation. He is also thecreator and lead developer of the jQuery JavaScript library. at BarCamp NYC. jQuery is free, open source software, dual-licensed under the MIT License and GNU General Public License, Version 2.[4] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. View Source <p>jQuery is a cross-browser JS library designed to simplify the client-side scripting of HTML.
30 Free UI Kits Recognition and prestige for Web Designers and Agencies 30 Free UI Kits March 21 By awwwards-team In Design & Illustration User interfaces kits free to download Share on Facebook Share on Twitter Share on Google Share on Stumbleupon Share on Pinterest Share on Linkedin The graphic interface is the first thing our users see on our websites. By Awwwards Team awwwards.com Awwwards – recognizing the talent and effort of the best web designers, developers and agencies in the world. BLOG Inspiration for web designers and developers Themes for Twitter Bootstrap - WrapBootstrap About Bootstrap Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex. Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples. Built to support new HTML5 elements and syntax with progressively enhanced components. Browser support Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer. Chrome 14+ Safari 5 Firefox 5+ Internet Explorer 7/8/9 Opera 11
w2ui - JavaScript UI What People Are Saying I have been using it quite substantially for a number of different projects now and must say that I absolutely love the way it works. - Soteri Panagou I've been using your grid on a couple of small projects and I've got to say it's an awesome piece of work. - Collanders I must say, I really like all of these controls. - Bob F I was searching for a slick and simple, but also user-friendly UI library. - Gerald Leeb W2UI is an excellent library! - Antonio Santos Very nice looking library. - John Whitten I'm loving w2ui, it packs a lot of punch for such a light library. - Neil Grover I am seriously blown away at the amazing quality of this library. - Billy This is amazing! - Bruno Cassol This is incredible, thank you. - Anthony Isaacson This library is absolutely amazing, i never seen in my life such a clean and understandable code!!! - MrCatt First of all, thank you very much for your hard work on these components - they're all very, very good! - Dave Thompson jQuery Based Only 69kb
Sophisticated Web Apps with Dojo Ready-for-Business MVC Application Controller & DataBinding Building Web Apps is about connecting your beautiful user interface to services and data across the web. Dojo’s flexible data access libraries help you get at data so that it can be consistently connected to views, and the new data binding and application controllers that are available are making it simpler than ever to create data bound UI’s and control global application flow. Layout New controls like the Opener widget help insulate your applications from variations in screen sizes. Forms & Data Dojo includes a new set of components designed from scratch with mobile in mind, including forms and databinding. Thousands of companies are using Dojo today to build their next generation web-enabled products! IBM Rational Team Concert is built on Dojo Create Beautiful User Interfaces Claro Dojo widgets comes with the default high-quality “Claro” theme based on Less.js, and three other sample themes to get you started. Create your Own Filter
Online JavaScript beautifier Breaking down Amazon’s mega dropdown The hover effects on Amazon’s big ‘ole “Shop by Department” mega dropdown are super fast. Look'it how quick each submenu fills in as your mouse moves down the list: It’s instant. I got nerd sniped by this. See the delay? I love bootstrap, don’t get it twisted. It’s easy to move the cursor from Amazon’s main dropdown to its submenus. If the cursor moves into the blue triangle the currently displayed submenu will stay open for just a bit longer. At every position of the cursor you can picture a triangle between the current mouse position and the upper and lower right corners of the dropdown menu. And if the cursor goes outside of the blue triangle, they instantly switch the submenu, giving it a really responsive feel. So if you’re as geeky as me and think something this trivial is cool, I made a jQuery plugin that fires events when detecting this sort of directional menu aiming: jQuery-menu-aim. I think it feels snappy.
How to use RequireJS with jQuery Introduction§ 1 While RequireJS loads jQuery just like any other dependency, jQuery's wide use and extensive plugin ecosystem mean you'll likely have other scripts in your project that also depend on jQuery. You might approach your jQuery RequireJS configuration differently depending on whether you are starting a new project or whether you are adapting existing code. Global Functions§ 2 jQuery registers itself as the global variables "$" and "jQuery", even when it detects AMD/RequireJS. Module Name§ 3 jQuery defines named AMD module 'jquery' (all lower case) when it detects AMD/RequireJS. Example: The other (recommended) solution is to just name the file 'jquery.js' and place it in the baseUrl directory. You can avoid lots of configuration lines by placing the files according to the default ID-to-path convention of baseUrl + moduleID + '.js'. So to reiterate, you will likely get an error ifrefer to jQuery with another module name, like 'lib/jquery'. define(['lib/jquery'], function ($) {