jQuery Zoom A plugin to enlarge images on touch, click, or mouseover. Demo Hover Grab Released under the MIT License, source on Github (changelog) Download Compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+. Install via NPM npm install jquery-zoom Instructions Zoom appends html inside the element it is assigned to, so that element has to be able to accept html, like <a>, <span>, <li>, <div>, etc. To use zoom with img elements, they will need to be wrapped with another element. Removing Zoom Trigger the zoom.destroy event to remove zoom from an element: $('#example').zoom(); $('#example').trigger('zoom.destroy'); Settings Hey, validate.js Lightweight JavaScript form validation library inspired by CodeIgniter. No dependencies, just over 2kb gzipped, and customizable! validate.js (development - 16kb) validate.min.js (minified - 2.1kb) Example All of the fields were successfully validated! Features Validate form fields from over a dozen rules No dependencies Customizable messages Supply your own validation callbacks for custom rules Chainable customization methods for ease of declaration Conditionally validate certain form fields Works in all major browsers (even IE6!) Installation and Usage Include the JavaScript file in your source Create the validation object with your desired rules. FormValidator new FormValidator(formName, fields, callback) The FormValidator object is attached to the window upon loading validate.js. The formName passed in to validate must be the exact value of the name attribute of the form An array of fields will be used to perform validation on submission of the form. Custom Validation Rules #1. setMessage
gauge.js Example Variant selection Features No images, no external CSS - pure canvas No dependencies (jQuery is supported, but not required) Highly configurable Resolution independent Animated guage value changes (!) Usage The Gauge class handles drawing on canvas and starts the animation. Advanced options jQuery plugin Gauge.js does not require jQuery. $.fn.gauge = function(opts) { this.each(function() { var $this = $(this), data = $this.data(); if (data.gauge) { data.gauge.stop(); delete data.gauge; } if (opts ! Supported browsers Gauge.js has been (not yet!) Chrome Safari 3.2+ Firefox 3.5+ IE 9 Opera 10.6+ Mobile Safari (iOS 3.2+) Android 2.3+ Changes Version 1.3.7 (15.06.2019) AnimationUpdater now removes references finished rendering to prevent memory leaks. Version 1.3.6 (28.11.2017) Added support for scalable staticzone sectionsAdded optional Ticks(Major/Minor)Fixed issue #146: Prevent requestAnimationFrame() callbacks from piling upFixed issue #147: Correct use of options.generateGradient for Donut
js A gridster configuration object. Define which elements are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElements. Horizontal and vertical margins respectively for widgets. Base widget dimensions in pixels. The first index is the width, the second is the height. extra_rows: 0 Add more rows to the grid in addition to those that have been calculated. extra_cols: 0 max_cols: null The maximum number of columns to create. min_cols: 1 The minimum number of columns to create. min_rows: 15 The minimum number of rows to create. max_size_x: false The maximum number of columns that a widget can span. autogenerate_stylesheet: true Don't allow widgets loaded from the DOM to overlap. A function to return serialized data for each each widget, used when calling the serialize method. draggable.start: function(event, ui){} A callback for when dragging starts. draggable.drag: function(event, ui){} A callback for when the mouse is moved during the dragging. draggable.stop: function(event, ui){}
Unify Client-Side and Server-Side Rendering by Embedding JSON Not many applications I work on these days are solely using the traditional server-side rendering model. Neither do they employ 100% client-side rendering and templating. Usually it’s a mix in which the ‘old’ world meets the new world, giving rise to some interesting design decisions. In this article I want to explore a solution that combines both worlds while minimizing the duplication of rendering logic by embedding JSON in the view. Let’s introduce a simple example to illustrate the JSON embedding trick. After the initial request to the server, the first page of products is shown. What duplication? We have two main goals: Code for rendering the table should be written onceUser-experience must be as smooth as possible (i.e. no visible flickering for AJAX updates of the initial page) Think about how you would implement this example. 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. Then you also need to construct the table again after a successful paging AJAX call: 4. 01. 02. 20.
morris.js Getting started Add morris.js and its dependencies (jQuery & Raphaël) to your page. 1 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">2 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>3 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>4 <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> If you don’t want to use the CDN-hosted assets, then you can extract them from the zip bundle and upload them to your own site. Your first chart Start by adding a <div> to your page that will contain your chart. Note: in order to display something, you’ll need to have given the div some dimensions. Next add a <script> block to the end of your page, containing the following javascript code: Assuming everything’s working correctly, you should see the following chart on your page: What Next? Check out the rest of the documentation: License Simplified BSD License:
Creating a Complete HTML5 Drag and Drop File Uploader with jQuery Today we’re going to be creating a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We’ll also be using local storage to remember which files were uploaded by the user. Getting Started For this tutorial I’m using jQuery and an icon font called symbolset. If you don’t want to get symbolset you could use an alternative or just not use a symbol font all together! So first off, we need to include the appropriate files in our index.html file: Next lets do the main HTML in the body: There is also a little bit of simple CSS. jQuery Effectively what we want to do is get the Data URI for all the images that the user drags into the drag area. To begin, we need to initiate some variables: Next we need to bind a function to the drop event. Now we want to check for any errors. When the user drops an image in the drop box, the first 5 will be shown as images. Now we can run the file reader function. The PHP file will return some data which we must interpret. Support
Changing Times For Web Developers – 6 Tips You Should Read To Survive The context of this post is about the changing times for a web developer, and I see a lot of web developers still lagging behind especially in the .NET world. If you haven't yet started mastering your art and adapting to the changing trends, you should start today. Think about crafting your web applications properly. 1 – Learn to write better JavaScript and CSS If you don’t write proper JavaScript and CSS, you are dead. Familiarize yourself with a higher level abstraction language to write JavaScript once you are comfortable with plain Javascript – Like CoffeeScript or TypeScript. JQuery – Alright, you know this, don’t you? More Oh yes, start learning TypeScript especially if you have a Microsoft technology/C# background. On the CSS Side, familiarize with SASS and/or Less – Skim through the CSS 3 techniques, keep an eye on the CSS 3 features available in various browsers. 2 – Familiarize yourself with a Responsive Framework Essential reads. 3 – Learn the most useful JavaScript MVC frameworks
Usar Google Docs para ofrecer PDFs en tu web Ahora, mediante Google Docs, podemos ofrecer PDFs incrustados en nuestra web de una forma muy sencilla. Esto lo haremos utilizando su visor gview. El código a utilizar es muy sencillo. Simplemente es un IFRAME que realice la invocación al visor gview y que le pase como parámetro URL el documento PDF. Veamos el código: El resultado, con un PDF nuestro: Entradas relacionadas: tags: código, google docs, gview, IFRAME, pdf Speakker - The new way of <audio>