background preloader

Noty - a jquery notification plugin

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!

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(!

Documentation - Leaflet API Reference This reference reflects Leaflet 0.7. Docs for 0.6 are available in the source form (see instructions for running docs). Map The central class of the API — it is used to create a map on a page and manipulate it. Usage example Creation Options Map State Options Interaction Options Keyboard Navigation Options Panning Inertia Options Control options Animation options Events You can subscribe to the following events using these methods. Methods for Modifying Map State Methods for Getting Map State Methods for Layers and Controls Conversion Methods Other Methods Locate options Zoom/pan options Pan options Zoom options fitBounds options The same as zoom/pan options and additionally: Properties Map properties include interaction handlers that allow you to control interaction behavior in runtime, enabling or disabling certain features such as dragging or touch zoom (see IHandler methods). map.doubleClickZoom.disable(); You can also access default map controls like attribution control through map properties:

150 best jQuery effects for web designers and developers Since the arrival of the jQuery library, the life of JavaScript programmers have gotten a lot easier because now it’s simpler to develop web 2.0 applications. With jQuery, the programmers can keep their code organized and concise, which is the major slogan of the library, “write less, do more”. You can utilize jQuery to handle events, generate animations, and even add an Ajax support into your web applications in a very easy way. Certainly you can use JavaScript to execute all the jQuery functions, but if you use it, your programming times will reduce and your effectiveness will increase, and that’s the real magic of jQuery. Transition effects As the name says, these effects are designed to generate animated switches between different elements, from smooth transitions to overlapping animations, here are some of the nicest transition effects made with jQuery: Special Presentation: jQuery SliderShock 1. A standard transition effect that always works well when implemented on your designs. 3.

Useful JavaScript Libraries and jQuery Plugins For Web Developers Advertisement If you have a problem and need a solution for it, chances are high that a JavaScript library or jQuery plugin exists that was created to solve this very problem. Such libraries are always great to have in your bookmarks or in your local folders, especially if you aren’t a big fan of cross-browser debugging. A JavaScript library isn’t always the best solution: it should never be a single point of failure for any website, and neither should a website rely on JavaScript making the content potentially inaccessible. In this two-part overview, we feature some of the most useful JavaScript and jQuery libraries which could be just the right solutions for your common problems. Due to the length of this post, we’ve split it into two parts for your convenience: Quick Overview: Below you’ll find a brief overview and links to the libraries and tools featured in this post. Web Forms and Input Validation Select2 jQuery PluginA jQuery-plugin for replacement and enhancement of <select>-boxes.

Tag "jQuery" on Smashing Coding 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

Building Real-Time Form Validation Using jQuery Client-side validation is something every web form should have, no doubts about that. While server-side validation does its job, it certainly lacks good user experience. What is so great about client-side validation then? Not only is it useful to the user because it makes the process of filling out the form a lot quicker and a lot less painful, but it also shows that you actually care about them. In this tutorial we’re going to learn how to build real-time form validation using jQuery. Table of Contents How Will We Achieve That? Now, there are actually many ways to do that; here are the most common: It will all work, but neither is the optimal way. It’s clearly not the way to go, so instead we’re going to do this the way I do it myself. OK, so what are we going to do? That way we keep our HTML code nice and clean. Note: It’s vital to always provide server-side validation as well (for users with turned off JavaScript). Project Structure We are going to need three files: Coding the HTML jVal

jQuery.validity Guide & Documentation Table of Contents: Introduction: jQuery.validity is a plugin designed to aid in the configuration of clientside form-validation. Validity was concieved with three goals: Easy Setup: Validity employs the principle of Convention Over Configuration to aid in keeping code manageable and semantic. In style, validity makes use of jQuery's selector engine and follows its pattern of method chaining. Setup: In order to use Validity on a page, you will need to import the jQuery JavaScript library as well as jQuery.validity itself. As a simple example suppose we start with the following HTML document with a simple form: <html> <head> <title>Simple</title> </head> <body> <form method="get" action="simple.htm"> Number of Vehicles: <input type="text" id="vehicles" name="vehicles" title="Vehicle Count" /> <br /><br /> Date of birth: <input type="text" id="dob" name="dob" title="Birthday" /> <br /><br /> <input type="submit" /> </form> </body></html> Let's say that we want to require both of the fields. usd

Related: