background preloader

jPlayer : HTML5 Audio & Video for jQuery

jPlayer : HTML5 Audio & Video for jQuery
Related:  jQuery

Audio Player, un lecteur audio HTML5 customisé avec jQuery Audio Player est un plugin jQuery qui permet de personnaliser le lecteur audio généré par la balise HTML5 audio. Ainsi, vous pouvez créer un lecteur totalement custom et cross-browser qui hérite parfaitement des capacités HTML5 natives comme le préchargement du fichier, la lecture automatique ou encore la boucle de lecture. HTML5… et une surcouche JS Le plugin Audio Player ajoute à l’élément audio (flux ou streaming audio) quelques lignes de code HTML, puis avec un peu de CSS3 (transition, box-shadow, gradient), il permet d’obtenir un lecteur flambant neuf et personnalisé, tout en gardant les mêmes fonctionnalités du lecteur HTML5 de base. En effet, la balise audio HTML5, tout comme un select, un radio ou une checkbox, n’est pas « personnalisable ». La balise audio sur Firefox, Chrome et Opera Ainsi, le plugin Audio Player vous donne la possibilité de réaliser un lecteur audio avec un style unique et ce, sur tous les navigateurs. Mise en place du lecteur

Speakker - The new way of <audio> Ace - The High Performance Code Editor for the Web HTML5, CSS3 & JavaScript playground for web designers & developers <title> CSS play | HTML5 and CSS3 | Cat Meowwww! </title> <h1>Meowww!</h1> <p>A meowwww! Compatible with Mozilla Firefox (5), Safari and Chrome<br> (It's a pity that CSS/keyframes cannot trigger sound effects)</p> <p>&copy; Stu Nicholls - <a href=" play</a></p> .head {width:280px; height:250px; background:#000; position:absolute; left:60px; top:30px; border-radius: 280px/250px;} .body {width:66px; height:125px; background:#000; position:absolute; left:165px; top:250px; border-radius: 66px/125px; .left-leg {width:25px; height:60px; background:#000; position:absolute; left:207px; top:327px; border-radius: 25px/60px; transform:rotate(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); -moz-transform:rotate(60deg); -webkit-transform:rotate(60deg); .right-leg {width:25px; height:60px; background:#000; position:absolute; left:163px; top:327px; transform:rotate(120deg); -ms-transform:rotate(120deg); -o-transform:rotate(120deg); -moz-transform:rotate(120deg);

Perfect Full Page Background Image Easily manage projects with This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let's put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn't some fancy shenanigans like Flash Image above credited to this site. #Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo #CSS-Only Technique #1 Here is the CSS: View Demo #CSS-Only Technique #2 View Demo #Enjoy

alertify.js - browser dialogs never looked so good Unfortunately, I will no longer be maintaining alertify.js. I have many ongoing projects that aren't leaving me with enough time to do what needs to be done. If anyone wants to create a fork and maintain - by all means go for it! It's been great seeing people use it and enjoy it and this decision is simply because I don't believe it's fair that developers are looking for help and not getting it. I wish I had more time or contributions to keep it going and make it better, but the sad reality is that not usually the case on these kinds of projects. Forks I will be updating this site to list forks of alertify.js.

HTML5 video and audio tags in all major browsers Get It Done Screenshots Overview Organize your life once and for all with our easy to use task list manager! Get It Done is a simple but powerful to-do list and project manager. Based off the book “Getting Things Done” by David Allen, Get It Done lets you focus on what is important for today and keeps everything else out of your way. Add notes, tags (or categories), and due dates to each task Quick access to all of your Evernote notebooks and notes from any device Organize your Evernote notes by tags with our Smart Group feature Group relevant Evernote notes and your tasks into the same folder Rearrange lists with ease Filter lists with tags or categories Assign more than one tag to a task Organize advanced lists with projects Sync from anywhere with our online app at For more information on getting started using Evernote with Get It Done, see our knowledgebase.

Highcharts 3.0.8 : créez des graphiques complexes et interactifs pour vos applications Web avec cette bibliothèque HTML5 / JavaScript Highcharts 3.0.0 : la bibliothèque HTML5 / JavaScript pour créer des graphiques complexesSortie de la révision 3.0.8. Highcharts est une bibliothèque graphique écrite en HTML5 et JavaScript, offrant des graphiques complets et complexes mais intuitifs et interactifs pour votre site ou votre application Web. Elle implémente différents types de graphiques (colonnes, lignes, aires, camemberts, nuages de points, etc.). La version 3.0.0, sortie il y a quelques temps, proposait des améliorations visuelles et une meilleure interaction avec les outils tactiles. Démonstrations. La révision 3.0.8 amène une série de corrections et quelques ajouts. Téléchargement. Documentation. Et vous ? Qu'utilisez-vous pour créer des graphiques ? Connaissez-vous cet outil ?

100 Awesome CSS/Javascript Plugins and Coding Techniques Writen by Bogdan / Comments Off on 100 Awesome CSS/Javascript Plugins and Coding Techniques If you know how to use CSS and Javascript, you can create some impressive websites. Not only that you can do some awesome stuff with them but they also ease you work. In this article you have 100 awesome CSS and Javascript plugins and coding techniques that should definitely be in you toolbox. Use CSS3 to Create a Dynamic Stack of Index Cards You will learn how to create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling). Dynamic PNG shadow position & opacity You will learn how to create a movable object using javascript. How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3 Awesome Overlays with CSS3 The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. Sliding Vinyl with CSS3

jQuery CollagePlus - an image gallery plugin by Ed Lea This plugin for jQuery will arrange your images to fit exactly within a container. You can define the padding between images, give the images css borders and define a target row height. Example: Play with a live example on jsfiddle: or take a look at the demo Basic Usage // example HTML image gallery <div class="Collage"><img src="example1.jpg" /><img src="example2.jpg" /><img src="example3.jpg" /></div> // collagePlus-ify it! Do You Know Your Image Sizes? This plugin can work in two different ways: You don't know all the image sizes for the images you you want to display You know the images sizes for the images you want to display For case 1, you will need to load all images for the plugin to then measure them and calculate the resizing required to make the grid. $(window).load(function () { $('.Collage').collagePlus(); }); This ensures that all images are loaded before running the plugin. However, if you know the image sizes (case 2), i.e. Getting Started Notes

Accessible Audio Player (AAP) | One Hand Clapping NOTE: AAP is no longer maintained. It has evolved into a new open source player called Able Player that supports both audio and video. This is the official home page of Accessible Audio Player (AAP), my fully accessible cross-browser media player. I enjoy sharing my music, and There are 650 million people worldwide with disabilities (including people who are blind, low vision, or unable to use a mouse) plus several million more using iPhones and iPads (which don't support Flash). Links Latest version: 3.0 (December 29, 2011) Demo of AAP standalone version: AAP 3.0 Test Page Download AAP 3.0: (standalone version) Download AAPP 3.0 (WordPress plug-in): (unzip contents and upload to your WordPress plugins directory; consult the readme.txt file for additional instructions) Example Player This example playlist features songs from my CD, Flow Theory Flavors. Accessibility Features Features of AAPP (the WordPress Plugin) Supported Browsers Known Issues I welcome any feedback.

untitled The Versatile Advection Code (VAC) is a freely available general hydrodynamic and magnetohydrodynamic simulation software that works in 1, 2 or 3 dimensions on Cartesian and logically Cartesian grids. VAC runs on any Unix/Linux system with a Fortran 90 (or 77) compiler and Perl interpreter. VAC can run on parallel machines using either the Message Passing Interface (MPI) library or a High Performance Fortran (HPF) compiler. The original code has been developed by Gabor Toth at the University of Utrecht from 1994 to 1997. VAC Manual Download VAC 4.52 the MPI parallel version of VAC.

nanoScroller.js nanoScroller.js is a jQuery plugin that offers a simplistic way of implementing Mac OS X Lion-styled scrollbars for your website. It uses minimal HTML markup being .nano > .nano-content. The other scrollbar div elements .pane > .nano-slider are added during run time to prevent clutter in templating. The latest version utilizes native scrolling and works with the iPad, iPhone, and some Android Tablets. Downloads To start using, you need three basic things: 1. The following type of markup structure is needed to make the plugin work: <div id="about" class="nano"><div class="nano-content"> ... content here ... Copy the HTML markup. Link to the nanoscroller.css file inside your page's <head> section (...or copy the contents from it to your page's main stylesheet file). You should specify a width and a height to your container, and apply some custom styling for your scrollbar. 3. Running this script will apply the nanoScroller plugin to all DOM elements with a .nano className. Advanced methods

Related:  Ljud