background preloader

Reveal: jQuery Modal Plugin from ZURB - ZURB Playground -

Reveal: jQuery Modal Plugin from ZURB - ZURB Playground -
Setting up Reveal modals is only three easy steps. Attach the needed files, drop in your modal markup then add an attribute to your button. Reveal is awesome because it's easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB. Reveal is now part of Foundation! This version of Reveal has been depreciated. Visit Foundation Step 1: Attach Needed Files Step 2: The Modal Markup Step 3: Attaching Your Handler By putting the "data-reveal-id" attribute on the anchor, when clicked the plugin matches the value of the "data-reveal-id" attribute (in this case "myModal") with an HTML element with that ID. Basically, put the "data-reveal-id" attribute on an object and make it's value the ID of your modal. While the "data-reveal-id" is an awesome way to make firing a modal stupid-easy, in many cases developers will still need to be fired programatically. Options Download Download the Reveal Kit Demo The Modal

codeforest As they promised, jQuery Team released a new version of jQuery today. It has come a long way from its initial version and has become one of the most used JavaScript frameworks in the world. I will try to tell you the exciting news in the new version. As the new version is released, the jQuery Team updated their jQuery 1.5 API Documentation which is very useful and handy. The biggest news is jQuery.sub() which allows a developer to override native jQuery methods without actually affecting the methods that other users would interact with – or even create encapsulated APIs for your plugins that avoid namespace collision. New jQuery AJAX The jQuery Team rewrote the whole jQuery AJAX module. Perhaps the largest change is that a call to jQuery.ajax (or jQuery.get,, etc.) now returns a jXHR object that provides consistency to the XMLHttpRequest object across platforms (and allows you to perform previously-impossible tasks like aborting JSONP requests). Prefilters Converters Transports

40 jQuery Plugins to Make Your Website User Friendly The basic function of a plugin is for it to perform an array of methods with a collection of elements. Each method which comes with the jQuery core such as a plugin, like .fadeOut() or .addClass() . A jQuery plugin is basically a new method which is used in order to extend the jQuery’s prototype object. jQuery has a vast community of skilled developers who continually create incredible scripts and applications for the web. Enjoy! 1. FlowType.JS is a jQuery plugin which can auto-resize the font-size and line-height (according to the width of the element wrapping it) so that our content is displayed just as we prefer. 2.jQuery Flat Shadow jQuery Flat Shadow is a plugin which can add this fading shadow to everything targeted. 3. Arbitrary.Anchor.js is a jQuery plugin that extends the standard anchor functionality (linking with #). 4. tidyTime.js tidyTime.js is a jQuery plugin for displaying the time in a friendly way. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.

Screw – A jQuery Plugin | Screw, a word I re-coined from scroll + view, is a jQuery plugin which loads HTML as a user scrolls the webpage. Screw will help you save bandwidth by only loading content as it is scrolled into view. Screw can also be used to create continuously scrolling, bottomless pages where content is appended to the bottom as the user scrolls. As of version 1.0.5, Screw supports both vertical AND horizontal scroll detection. Git The Source Examples – Loading ImagesExamples – Loading External And Internal ContentLive Demo – Continuous Vertical Scrolling Options Name: loadingHTMLDescription: A string consisting of optional HTML which is displayed before the object is loaded. Classes Name: screwDescription: Applies Screw to this object. Name: screw-before Description: Inserts the HTML before the object with this class. Name: screw-afterDescription: Inserts the HTML after the object with this class. Name: screw-appendDescription: Appends the HTML to the object with this class. Usage Endless scrolling: Or

Circular Content Carousel with jQuery Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the "more" link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original posi View demo Download source Today we want to share a simple circular content carousel with you. The beautiful animal icon set in the ZIP file are by Cyberella and they are licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) License. The HTML Structure The structure consists of a main container and a wrapper for the items. The initial view of the content carousel: When we click on “more…”, another content area will slide out and move the respective item to the left:

qTip – Plugin jQuery – L’art du Tooltip Il y avait fort longtemps que je ne vous avais pas fait d’article sur jQuery, à vrai dire, il y avait fort longtemps que je ne vous avais pas fait d’article tout court. Cette fois je vais vous parler d’un plugin jQuery assez sympa (du moins je l’apprécie) et qui va vous permettre de réaliser vos tooltips de manière esthétique, mais surtout avec beaucoup de possibilités, comme y insérer des images, du texte, des vidéos etc… Ce plugin jQuery, c’est qTip. Alors, comment utilise-t-on ce plugin ? Bien entendu on appelle les librairies, soit jQuery et qTip : Admettons vous souhaitez rajouter le tooltip sur les éléments li avec la classe “active” : Voici la manière de base d’utiliser ce plugin. <div class="qtip qtip-stylename"><div class="qtip-tip" rel="cornerValue"></div><div class="qtip-wrapper"><div class="qtip-borderTop"></div> // Only present when using rounded corners<div class="qtip-contentWrapper"><div class="qtip-title"> // All CSS styles... Articles qui peuvent vous intéresser :

jQuery TwentyTwenty Plugin Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them! Download TwentyTwenty The Problem We recently needed a way to showcase the visual differences between two images. One of our Design Leads pointed us to Canada Goose, a cold weather outfitter. This sparked a few new ideas on how to do something similar for our own needs. Responsive and functional on all devices Doesn't require images to workWorks with Foundation out of the box How it works TwentyTwenty works by stacking two images on top of each other. We're using custom movement events from the jquery.event.move library in order to support 1:1 slider movement on mobile devices. Setting up It's easy to get started, just wrap two images inside of a container. Then call twentytwenty() on this container once the images have loaded: $(window).load(function() { $("#container1").twentytwenty(); }); And voila! Preventing FOUC JavaScript Options Dependencies Customizing

jQuery Ketchup Plugin - Documentation Ketchup is a small (3.4KB minified & gzipped) jQuery Plugin that helps you to validate your forms. Out of the box it has 18 basic validations and a bubble like style. But truly this Plugin wants to be hacked to fit your needs. Default Behavior If you like the style of the bubbles and all validations you need are already included you can get this Plugin up and running like so: Your HTML Header Include the default stylesheet (located in . <! Your HTML By default Ketchup checks the data-validate attribute of form fields if it can find matching validations. Your Javascript Just call ketchup() on your form, voilà. $('#default-behavior').ketchup(); Declare fields to validate in the call In last version Ketchup checked the class attribute for validations... which was not everyones taste because class should be used for defining CSS classes. Note that required is not a validation declaration but an actual class name. Right after the options (empty here {}) we pass in an object. Included Validations

Unique scrolling website. jQuery Plugins and techniques. - wwValue. Design, free psd, Icons, vectors. Website templates. Wordpress optimization The top trends of web design are managing content in a completely different way as we always used it. No more common breadcrumbs, left side or top side menus with navigation links. Now we get more fancy way of representing our portfolio, photo galleries or promotion pages. More and more websites uses parallax effect and sliding/scrolling content with object animation, putting data visualization to the next level. You can ask how they do all these fancy stuff? Here you will find a list of tutorials and also a list of jQuery plugins for creating a scrolling presentational website. Acsensor.js Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system, where pages are navigated by clicking on customizable navigation are or by using previous/next buttons. Features: Scrollorama Good plugin to do all sorts of stuff, like objects flying, rotating and fading; parallax effect and ability to pin content etc. Curtain.js Features Compatibility Impress.js jmpress.js

JUSH - JavaScript Syntax Highlighter MeanMenu - a jQuery responsive menu Plugin | MeanThemes The Main Features Hide or show menu childrenTarget navigation element to swap out with MeanMenuOrientation adjustment (centered menu will reposition when you tilt the device)Control screen width at which MeanMenu activatesExpanding/Collapsing sub navigationBundled with configurable CSSQuick to setup and configureMedia Query independent The Demo The dedicated demo page All of the boring “how to implement” stuff is over on… The WordPress Plugin Buy via PluginHero The jQuery Plugin Github or download it straight away: MeanMenu zip download The Small Print This jQuery plugin is free for you to use and implement, we do not offer any official support for the plugin, if you would like to ask any questions though, please do over on our contact page. Please note: This is not a menu system replacement. If you are looking for drop down functionality on the desktop, MeanMenu doesn’t do it.

jQuery plugin: Tablesorter 2.0 Author: Christian Bach Version: 2.0.5 (changelog) Licence: Dual licensed (just pick!)under MIT or GPL licenses. Please with sugar on top! Don't hotlink the tablesorter.js files. Download it and host it on your servers. Update! Helping out! Comments and love letters can be sent to: christian@tablesorter.comchristian at tablesorter dot com. tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. Multi-column sorting Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. TIP! To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document: tablesorter works on standard HTML tables. Start by telling tablesorter to sort your table when the document is loaded: NOTE! jQuery Browser Compatibility

S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations Today I'm going to share with you a gallery plugin I built (yeah, like the world needs another gallery plugin, right?) after having stumbled upon SONY's products gallery while I was browsing their website a while ago. Their products' image gallery is a simple one, but two things grabbed my attention about the gallery: It's made with Flash when it can totally be created with HTML, CSS3 and Javascript. Not to mention that the gallery is accessible by keyboard and you can navigate through the images via keyboard shortcuts, and enter into fullscreen mode with only the gallery being in fullscreen, therefore removing all distractions so that you can focus only on the products gallery. The plugin uses HTML5's FullScreen API, and relies heavily on CSS3 animations transforms, so it will work only in browsers that support these features. Markup The small images should be scaled versions of the big images, i.e they should all have the same aspect ratio for best results. Dependencies Using the Plugin

Smashing Labs - gMap, Google Maps jQuery plugin What is gMap? gMap is a jQuery plugin embedding Google Maps into your website. It allows you to: set center, zoom level and type of map add multiple markers with custom icons, popups and titles position marker by latitude/longitude as well as by its address set your customized map controls retrieve map object and use it for even most complex tasks Purpose of gMap is to help you keep your code clean and to create Google Map in very easy way, without learning its API. In future versions gMap will be improved with functions that are hard to achieve with Google Maps. Latest stable release: 3.3.0 Donate gMap is free and will stay that way as long as I'm in charge. Social Like Smashinglabs on Facebook to get gMap updates and other JS news. Example This tiny line of code is being used to embed the map below. What has happened to V2 version? It's still available here.