Best jQuery Plugins of 2011 | Resources - Vimperator jQuery was first released in 2006. Nearly 5 years later, it’s still going strong – due largely in part to the community that’s been built up around it. This community of developers constantly releases plugins that allow web developers to easily add amazing functionality to their projects. Continuing our “Best of 2011″ series, the focus this week is on jQuery plugins. Over the past eleven months we’ve seen a lot of great new plugins being released, which made choosing our favorites extremely difficult. Isotope Isotype is a jQuery plugin for creating dynamic and intelligent layouts. FitText FitText makes font-sizes flexible. FlexSlider FlexSlider is an awesome, fully responsive jQuery slider plugin. Sausage Sausage is a jQuery UI widget for contextual pagination. arbor.js Arbor is a graph visualization library built with web workers and jQuery. Mosaic Mosaic automatically generates sliding boxes & captions, allows slide & fade animations with custom directions, and preloads images within boxes.
ColorBox, A jQuery Lightbox A lightweight customizable lightbox plugin for jQuery Fork me on GitHub View Demos Download Released under the MIT License. Supports photos, grouping, slideshow, ajax, inline, and iframed content.Lightweight: 10KB of JavaScript (less than 5KBs gzipped).Appearance is controlled through CSS so it can be restyled.Can be extended with callbacks & event-hooks without altering the source files.Completely unobtrusive, options are set in the JS and require no changes to existing HTML.Preloads upcoming images in a photo group.Currently used on more than 1.9 million websites. Instructions & Help The FAQ has instructions on asking for help, solutions to common problems, and how-to examples. Usage Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element. Settings Public Methods Event Hooks // Example of using an event listener and public method to build a primitive slideshow:$(document).bind('cbox_complete', function(){ setTimeout($.colorbox.next, 1500);}); Hey,
noty - a jquery notification plugin Hi! noty is a jQuery plugin that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. (Optional) The notifications can be positioned at the: top - topLeft - topCenter - topRight - center - centerLeft - centerRight - bottom - bottomLeft - bottomCenter - bottomRight The API provides lots of other options to customise the text, animation, speed, buttons and much more. It also has various callbacks for the buttons such as opening and closing the notifications and queue control. Layouts & Demos Top Alert Success Error Warning Information Confirm TopLeft Alert Success Error Warning Information Confirm TopCenter Alert Success Error Warning Information Confirm TopRight Alert Success Error Warning Information Confirm CenterLeft Alert Success Error Warning Information Confirm Center Alert Success Error Warning Information Confirm Installation Try!
13 Really Useful Online CSS Tools to Streamline Development CSS is nearly used on every modern website design. However, having to write and structure CSS code from scratch every time you have a project is extremely time consuming. Below, we present you with 13 amazingly useful CSS tools for hacking on writing time consuming code. We tried to place emphasis on unknown tools that every developer should have a looksy at, however don’t be surprised if we included a few known sources. We encourage you to find use of these tools and find ways to improve your development process. CSS Cheat Sheets As simple tool as this may seem, the CSS Cheat Sheet can be very useful. Telerik Visual Style Builder Telerik Visual Style Builder is an online CSS customization tool that allows you to easily, point-and-click customization of skins for the RadControls for ASP.NET AJAX. This tool is ideal for ASP.NET developers. CSS Type Set CSS Type Set, a hands-on typography tool which allows the every day designer and developer fully test and learn how to style Web content.
Booklet - jQuery Plugin - Vimperator what is it? Booklet is a jQuery tool for displaying content on the web in a flipbook layout. It was built using the jQuery library. Licensed under the MIT license. Want to check out the source? Take a look at the project's GitHub Repository. see it work jQuery Booklet This is a sample booklet! Content Variety You can place any sort of html elements inside of your booklet pages. Default Options The default options include: Manual Page TurningThis option requires jQuery UI, but will degrade and be usable if not included. Move to the next page by dragging or the arrow keys to see the animation in action! 25+ Create Amazing Image Effects with Some of the Best jQuery Plugins Available JavaScript frameworks like jQuery, prototype (and script.aculo.us), Dojo and mootools have become very popular because they are making the creation of dynamic effects much easier without using fx. flash. jQuery has become one of the most used JavaScript libraries today and can be found in the core of popular products like WordPress and Drupal.The community is providing a huge amount of free plugins making it possible to find good solutions to nearny any need you may have. This article will introduce you to more than 25 jQuery plugins providing enhancements to how you can display images on your web pages. This is essential for creating dynamic state of the art web solutions. Lets get started! By the way. tripwire magazine have provides several articles covering javascript frameworks that I will recommend you take a look at: Advertisement CrossSlide Highslide JS Highslide JS is an open source image, media and gallery viewer written in JavaScript. These are some of it’s features: JQZoom Galleria
jQuery – Effet smooth scroll (défilement fluide) - Tutoriels Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 110 465 fois. L’effet de scroll fluide est déjà intégré, en fonction de vos paramètres utilisateur, sur certains navigateurs. Il se manifeste par un défilement fluide de la page web lorsque vous descendez ou montez grâce à la molette de votre souris, ou les touches de votre clavier. Il y a quelques temps de cela (peut-être trois ans maintenant) j’avais trouvé un script JS pour ajouter cet effet, mais celui-ci ne prenait en compte que les ancres dotées de l’attribut name, sous cette forme : <a href="#cible">Aller à "cible"</a> <a name="cible"></a> C’est pourquoi aujourd’hui je vous propose de créer votre propre script jQuery de smoothscroll. Solution de base NB : les codes JavaScript qui vont suivre sont à placer après l’appel à la bibliothèque jQuery, fait sous cette forme, par exemple : <a href="#contact">Contact</a> <h2 id="contact">Contact</h2> Création d’une extension de jQuery if(!
Beautiful Background Image Navigation with jQuery In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in […] View demoDownload source In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. On top of that we will have sub-menus that appear with their semi-transparent background sliding in. Note: There is a new version which let’s you customize things better:Sliding Background Image Menu with jQuery We will be using the amazing Background-Position Animation Plugin by Alexander Farkas. The photos that we will be using are from Pat’s beautiful B&W collection on Flickr. We tried to make this one cross-browser compatible and voilà! The Markup The CSS
Typography Effects with CSS3 and jQuery - Vimperator One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. Gregor then turned to look out the window at the dull weather.
Gaya Design - Presentation Cycle Consectetur adipiscing elit. Nunc quis tellus eros. Nam blandit diam id turpis bibendum nec rutrum dui pulvinar. Quisque fermentum, dolor ut adipiscing suscipit, leo lorem malesuada mauris, vitae dapibus mi ligula ut nunc. 10 Useful CSS3 Tools for Your Next Web Development HTML5 always an important phenomenon within web design community. Another most valuable aspect that web designers should accept is CSS3. CSS3 offers new and exciting improvements on your web design and development. In this article we present some useful collection of CSS3 Tools for your next web development. A simple stylesheet for rendering beautiful keyboard-style elements. CSS3 Click Chart This text is divided into paragraphs inside of a single div element, but with CSS3 the text in these paragraphs is divided into columns. CSS3 Button Maker Drag things, pick colors, make a nice class for your buttons… introducing the Button Maker. Transforms Take a look at our fun and productive free tools for web developers. CSS3 Generator This simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit. CSS3 Gradient Generator Select the format you would like your colors generated in. Web Browser CSS Support The following are units that are used in CSS properties. CSS3 Maker
7 Things I Wish I Had Known About jQuery - Vimperator This article is mostly aimed at people who are just starting to learn jQuery. I assume you know the following: Base knowledge of JavaScriptWhat jQuery isHow to include jQuery in a web pageBasic knowledge of how to use the $ function (for example: $(‘#test .testing’))Basic understanding of the chainable eventsKnow what $(document).ready(function () { }); does (sometimes seen as $(function () {} ); or $().ready(function() {});)Know intermediate HTML and CSS (lists, padding, colors, borders and margin) If you don’t know anything about how to use jQuery you should read this. This is not meant to be an introduction to jQuery. 1: Some Background Info Objects and Methods I know when I started learning jQuery, I wasn’t too familiar with objects and methods. Think of it this way: Objects work so well because they act just like real life objects- objects have properties and methods. Use the following code as an example: var testText = $('div#test').text(); Chainability JavaScript is ‘chainable’. The HTML
jQuery Reel Plugin verb ... the room reeled GO ROUND, go round and round, whirl, spin, revolve, swirl, twirl, turn, swim. Try dragging this area or roll your mouse wheel over it Now even on Android Reel 1.3 is an established and the most versatile three-sixty player for jQuery. Teaches your ordinary image tag some new tricks turning it into a gorgeous interactive 360° object movie, panorama or stop-motion animation. Modes covering beyond usual 360° span. back up Demonstration An image is worth a thousand words. Try reel for yourself. Stitched panoramas are supported too: You can also embed annotations (e.g. text or images) of individual features on the scene. See all 19 examples incl. code samples Is it compatible? Runs everywhere! * Under the hood Reel uses nothing else than CSS background image positioning which is pretty common in all today's browsers. Who uses it? Everybody! Latest news To date, Reel is used on 2014+ domains world-wide. The CDN has run dry today and was rejecting requests. Download