jQuery Frontier Calendar - Un calendrier complet à la Google Agenda jQuery Frontier Calendar est un plugin jQuery permettant de créer rapidement un calendrier riche à la Google Agenda. Voici un plugin très pratique si vous souhaitez mettre en place un système de calendrier sur votre site web. Avec un design très classe à la Google Agenda, jQuery Frontier Calendar bénéficie des fonctionnalités de base d'un agenda: Navigation mois par moisSélection d'une dateAjout d'évènementsConsulter un évènementDrag and drop d'évènements pour changer la dateLecture et chargement d'évènements à partir d'un fichier .ics (iCal)Callback pour l'ajout / suppression d'évènementsEtc. Vous pouvez tester l'agenda à cette adresse. Personnalisable à souhait, vous pourrez modifier le CSS du calendrier pour mettre une image de fond, changer le design des évènements etc. Le calendrier peut aussi être redimensionner avec un ratio prévu dans la configuration du plugin. La documentation du plugin est fournie dans la démo fournie dans l'archive à télécharger. Site Officiel
Responsive Design with CSS3 Media Queries Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. View Demo Responsive Design Download Demo ZIP See It in Action First Before you start, check the final demo to see how it looks like. More Examples If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr. Overview The page's container has a width of 980px which is optimized for any resolution wider than 1024px. HTML Code I'm not going to go through the details of the HTML code. HTML5.js Note that I use HTML5 markup in my demo. Reset HTML5 Elements to Block Main Structure CSS Again, I'm not going to get into the details. Step 1 Demo Updates
L'approche MVC en javascript avec backbone.js Si vous avez déjà travaillé sur une application utilisant massivement le javascript, vous savez que cela peut devenir rapidement cauchemardesque pour garder un semblant de synchronisation entre les interfaces HTML, la logique javascript et la base de données. Dans ces cas-là, jQuery (ou mootools, ou tout autre framework javascript "classique") n'est pas suffisant, une approche plus structurée est nécessaire. C'est là que backbone.js entre en jeu. Avec backbone.js, vous représentez vos données en models (approche MVC), qui peuvent être créés, validés, détruits et sauvegardés vers le serveur. A partir du moment ou une action modifie un model, celui-ci active un évènement "change". Toutes les vues qui affichent ce model sont notifiées par cet événement, les forçant à se ré-afficher. Exemple TODO List L'exemple donné dans la documentation officielle est très complet. Model window.Todo = Backbone.Model.extend({ Représente une tâche dans la todo list. Collection Représente la todo list. View Application
CSS: Elastic Videos While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn't work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve this. View Demo Elastic Videos Elastic HTML5 Videos (demo) With HTML5 video element, you can easily make it elastic by using the max-width:100% trick (see elastic HTML5 video demo). Elastic Object & Iframe Embedded Videos (demo) The trick is very simple. How to Create Fixed Width & Elastic To restrict the width of the video, an additional <div> wrapper is required. Compatibility This trick works on all browsers (tested on Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone and iPad). Credits This trick was found on tjkdesign.com.
A Snazzy Animated Pie Chart with HTML5 and jQuery Home : Articles : A Snazzy Animated Pie Chart with HTML5 and jQuery Tutorial by Matt Doyle | Level: Advanced | Published on 11 August 2010 Categories: Learn how to use the HTML5 canvas element, CSS3 and jQuery to create a gorgeous, interactive animated pie chart. Full code included for your own use. In this tutorial I'm going to show you how to build a lovely, interactive pie chart using the latest HTML5 technologies. Step 1. Here's the markup for our chart page: <! The markup is pretty simple. A "container" div to wrap and centre the content An HTML5 canvas element for the pie chart A table element containing the chart data Header and footer boxes containing the chart title, copyright and so on Notice that the tr (table row) elements in the table are all given their own colours. Step 2. Now we've created our basic HTML page, let's add some CSS to style the various elements in the page: Again, no big surprises here. A couple of points to note: The styled table containing the data. Step 3.
CSS3 Image Styles When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image. Dynamic Way To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. Output The above code will output the following HTML code: Circle Image (see demo) Now that the image is applied as a background image, you can pretty much add any style to it. Card Style (see demo) Embossed Style (see demo)
Un plugin jQuery de détection de visages Tout ce qui touche à la reconnaissance d’image m’a toujours fasciné. Google image sait extraire les photos contenant des visages, certaines applications comme iPhoto ou Picassa les reconnaissent même entre eux. Aujourd’hui les algorithmes sont maitrisés et certains sont même open source. Hier, je tombe Face Detection in JavaScript via HTML5 Canvas qui m’apprend que l’un de ces algorithmes a été porté en Javascript par un développeur chinois nommé Liu Liu. Avec scepticisme je teste la démo et, surprise, ça fonctionne vraiment. Le code est open source est disponible sur Github. Le code de Liu Liu est fonctionnel mais il lui manque encore la facilité et les possibilités d’utilisation. Si vous voulez le forker, mon plugin est également sur Github. Voir la démo Commencez par inclure ce qui est nécessaire. jQuery, le plugin, l’algorithmes puis les données de détection. Placez une image dans votre page, ici nommée #myPicture . Le plugin s’appelle simplement comme ça : Et le style qui va avec :
A Colorful Clock With CSS & jQuery Martin Angelov The first wave of Christmas holidays passed and we are looking forward to New Year’s Eve for a fresh start at all those things we failed to do the last 12 months. And in the mood of the upcoming holiday, this week we are going to make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year. This is also the first tutorial that features our first very own jQuery plug-in – tzineClock (soon to be released officially in a post of its own). Go ahead, download the demo files and continue with step one. Step 1 – XHTML As usual, we start with the XHTML markup. This saves us from having to manually type similar blocks of code for each one of the dials (there are three of them, one for the hours, the minutes and the seconds). Lets take a look at the XHTML that is inserted by jQuery: jquery.tzineClock.js This code is contained in jquery.tzineClock/jquery.tzineClock.js. Lets continue with the next step. A Colorful jQuery & CSS Clock Step 2 – CSS
jQuery 1.5 Released: What is new? 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. There are more news like the complete rewrite of the Ajax module, Deferred Objects and many more. New jQuery AJAX The jQuery Team rewrote the whole jQuery AJAX module. jQuery AJAX now returns a jXHR Object for backwards compatibility with old XMLHttpRequest There are three new functionalities for sending, receiving and managing AJAX requests: Prefilters Converters Transports
New Twitter Design with CSS and JQuery. The Twitter new web interface design is live for many more today. The makeover of the new Twitter was really fantastic, In this post I decided to explain how to implement new Twitter user interface design with CSS and JQuery. Use it and enrich your web applications. Download Script Live Demo Step 1 First create a DIV element with attribute ID value container. Step 2 Now create a panel-frame DIV element inside the container DIV. Step 3 Here the final HTML code ready. container'> // Right partright'> <div id="panel-frame"> <div class="panel"> <div class="head"><a href="#" class="close">Close</a></div> <div class="data">// jquery id </div> </div> </div> //Left Part <div class="left"> // Message display here <div class="block" id="1">1</div> <div class="block" id="2">2</div>.............................................................. Javascript$(".block").click(function(){})- block is the class name of DIV tag. });</script>