BookBlock: A Content Flip Plugin

A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages. View demo Download source BookBlock is a plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism. We will be using jQuery++ by Bitovi which has some add-ons for jQuery (specifically, to add the swipe event). The following structure will allow to add custom content in a wrapper with the class “bb-item”, which represents an open page (left and right side): The plugin can be called like this: $(function() { $( '#bb-bookblock' ).bookblock(); }); You also have to include the other scripts that are needed (see one of the demo files). Options The following options are available: Check out the demos with different configurations:

Portfolio Image Navigation with jQuery « Previous Demo: Expanding Fullscreen Grid Portfolio Images by Angelo González back to the Codrops post Portfolio Image Navigation Up Down Previous Next 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.

A jQuery Confirm Dialog Replacement with CSS3 via Ad Packs A jQuery Confirm Dialog Replacement Read & Download on Online Web Editor jsFiddle updated! Our site just got a long awaited update. Refreshed user interface Line numbering and highlighting in all panels Emmet (ex ZenCoding) for faster typing JavaScript editor uses inline JSHint reporting TidyUp works for all languages not only JavaScript CoffeeScript has syntax highlighting Ability to set “wrap” (onLoad/onDomReady) and choose languages for each panel from GitHub and POST API (we will blog about that soon, follow us to be updated) Gist, Git and Post APIs where either refactored or fixed General bugfixes GitHub API is taken down for maintenance Due to an issue with the servers we needed to take down GitHub API. We are working hard to fix our setup and switch it on as soon as possible. Sorry for the inconvenience. Browser statistics Below are the top 5 browsers used last week on jsFiddle (this doesn’t count embedded fiddles). Chrome - 48% Firefox - 33%Safari - 7%Internet Explorer - 6%Opera - 3% Which versions are mostly used? Official launching app for Chrome Stay tuned.

Trabajando con Three.js Introducción Con Three.js se puede crear cámaras, luces, materiales, objetos y muchas cosas más, lo mejor de todo es que puedes dibujar a placer en el lienzo de HTML5, WebGLo SVG, puesto que su código se encuentra abierto. Como todo, no significa que lo realizado valla a ser fácil de hacer, habrá ocasiones en que tendrás que resolver ciertas dificultades, por ello recomendamos ampliamente practiques con varios ejemplo dedicándoles tiempo a desarrollarlos y posteriormente perfeccionarlos. Empezando por lo básico Para entender lo que a continuación se explica debes tener conocimientos básicos de 3D y JavaScript, ya que podrías perderte durante el desarrollo del tema; te invitamos a que si no tienes éstos conocimientos básicos valdría la pena que aprendieras un poco más sobre el asunto antes de meterte a desarrollar el mismo. Bueno, comencemos… En nuestro lienzo 3D tendremos los siguientes objetos: Una escenaUn procesadorUna cámaraUno o dos Objetos con materiales Sugerencias

Pie & Donut Chart Integrate pie charts into your web applications using the Wijmo Pie Chart widget (wijpiechart). The pie chart draws each series as a slice of data and includes rich customization and animation. HTML5 charts What makes these charts superior is that they’re powered by Scalable Vector Graphics (SVG). Donut charts Render the Wijmo Pie Chart as a donut chart by setting the InnerRadius property. Live data All Wijmo charts are optimized for streaming live data. Tooltips Associate tooltips and links with chart elements, so the chart responds to mouse events. Appearance Wijmo Pie Chart’s rich set of properties allow you to change the look and feel of your chart. Animation Add special effects to your Wijmo Pie Chart.