Calendario: A Flexible Calendar Plugin A jQuery calendar plugin for creating flexible calendars. View demo Download source Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. Please note that the demos will only work as intended in browsers that support the new CSS properties used here, especially calc(). The calendar designs are based on these two beauties found on Dribbble: For the calendar plugin to work, we simply need a container with the class “fc-calendar-container”: The plugin can be called like this: $( '#calendar' ).calendario(); The plugin will create a calendar with the following structure: The calendar will consist of a head for the listing of the weekdays and a body with rows for the days of the month. <div class="fc-content"><span class="fc-date">14</span><span class="fc-weekday">Wed</span><div></div></div> Options Demos
Creating MS Word documents on the fly Articles Application Architecture by: Khairul Amri Yunus December 2, 2003 Introduction Printing HTML pages directly from browsers usually does not give the best printing output, compared to output from word processors such as Microsoft Word. This article provides a guideline on how to generate documents and letters in MS Word format using a pre-defined template. This solution can be accomplished using COM extension. Overview Lets start with the big picture. First, we need to prepare a MS Word document (*.doc) that contains the sample output. Preparing the MS Word Template This step is actually simple, all we need is a MS Word document (*.doc) that contains the sample output and Bookmarks. To create a Bookmark in a MS Word document, click on Insert/Bookmark. A Bookmark name can only contain letters, numbers and underscores. The code we use in the next section just substitutes a specified bookmark with text, therefore the formatting, images, tables and etc will not be lost.
SocialCount, a jQuery Plugin for Lighter & Faster Social Networking Widgets Posted by Zach on 11/26/2012 You’re minding your own business, casually browsing around on the World Wide Web. You navigate to a page that begins to load and render, but suddenly it stalls. Social Networking widgets are a digital blot on the beautiful canvas we call the web. Design considerations aside, the widgets’ biggest affliction is their file size. A discerning developer might begin to wonder if it is possible to use these sharing tools without adversely affecting page performance and accessibility. To solve these problems, we built SocialCount. See it in action SocialCount’s live demo will show you a variety of sizes and orientations. How to use it Add socialcount.js and socialcount.css to your page, ideally the CSS in the \<head> and JS at the end of the \<body>. Use the included Markup Generator to create your baseline HTML. <ul class="socialcount" data-url=" data-counts="true"><li class="facebook"><a href="
Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! screen Écrans handheld print Impression
Photobox – CSS3 jQuery image gallery – dropthebit I wanted 3 things from any image gallery script: first, it to be beautiful and posses a great look & feel. second to be lightweight and not use many assets, and third, I want a script that was built with performance at mind. I was working on something else entirely when I had to find a nice image gallery script. I wanted one of those that the user would basically click a thumbnail and the larger version of the image would be displayed on top of the page, in a modal window fashion. Feb 2 - Version 1.6 is available. Lots has been changed, for the better. Please report any bugs or ideas in the Github project page, as I'm perfecting this code on a daily basis. So, I opened Google search and type of sorts of things, and looked at many scripts that suppose to do that I wanted. I saw no choice but to write my own script. Demo page Benefits So what can this script do? How to use Put photobox.css and then jQuery in your page (make sure it's not a super old version..) Settings Demo page photobox on github
Modèle MCV Tout d'abord, vous devez vous demander ce que signifie cet acronyme énigmatique MVC. MVC sont les initiales de Modèle Vue Contrôleur. Comme vous pouvez vous en douter, l'organisation se fera en trois parties. Au lieu d'un fichier utilisé par une organisation de la programmation classique (tout dans un fichier), le modèle MVC divisera le tout en trois fichiers. Mais cela va beaucoup alourdir mon FTP ! À cette question, je répondrai qu'il faut savoir ce que l'on veut. Le gain réside dans le fait que votre code sera plus lisible qu'avec un seul fichier. Le contrôleur Nous allons commencer par le contrôleur, et vous allez comprendre pourquoi. Comme vous le voyez, c'est la partie du système qui fait le lien avec les deux autres parties. Le modèle Ce fichier ne contiendra que des fonctions. Vous aurez au final sans doute des fonctions du type : ajouter_news, supprimer_news, ajouter_commentaire_news pour un script de news. La vue La vue contient le code xHTML.
jQuery.Shapeshift Demo What is Shapeshift? Inspired heavily by the jQuery Masonry plugin, Shapeshift is a plugin which will dynamically arrange a collection of elements into a column grid system similar to Pinterest. What sets it apart is the ability to drag and drop items within the grid while still maintaining a logical index position for each item. This allows for the grid to be rendered exactly the same every time Shapeshift is used, as long as the child elements are in the correct order. Function > Form Shapeshift was designed to always render the same grid as long as the elements are in the same order. Features Column Grid System: All items flow from left to right, top to bottom.
W3Schools Motio - jQuery plugin Introduction Motio is a small JavaScript library for simple but powerful sprite based animations and panning. It takes an element, and changes the background position to create an animation effect. Dependencies Motio has no dependencies, but there is an optional Motio jQuery plugin version available. Compatibility Works everywhere. Changelog Motio upholds the Semantic Versioning Specification. Support Reward the developer And make him happy for maintaining this library! I don't want to go the Isotope & family route and monetize my libraries. jQuery plugin If you consider jQuery to be a separate language and are not interested in learning JavaScript, you can use the jQuery plugin version of Motio: Working with Motio via a jQuery proxy has some limitations. Performance Motio is chained to the requestAnimationFrame (with a polyfill for older browsers) and optimized for speed and garbage collection. Examples Move cursor over the example to control the panning direction and speed. Documentation
Make Pretty Charts For Your App with jQuery and xCharts Martin Angelov Charts are a great visual aid when presenting data. You can’t build a professional admin panel without them. They are also tricky to set up. However, there is a new library that makes things easier – xCharts. Today, we are going to use it along with the daterange picker for Twitter Bootstrap, to build a pretty, AJAX-powered chart for your web application that fetches data from a MySQL table. The HTML The HTML structure of the demo is pretty simple – we have to add elements on the page for the initialization of the chart, and for the date picker. index.php <! We are including a good deal of external resources here. Before the closing body tag, we have the jQuery library, d3.js (required by xcharts), xcharts, the elegant sugar.js library (required by the date range plugin), the date range plugin and our script.js. The MySQL Table As I mentioned in the intro, the script we are writing will fetch its data from a MySQL table and display it on the chart. Database Schema The PHP Code
Gamma Gallery - A Responsive Image Gallery Experiment Assemblage Becoming Sky high Life Beleaguer Chatoyant Denouement Desuetude Diaphanous Desuetude Languor Inglenook Forbearance Penumbra Mondegreen Plethora Onomatopoeia Wafture Cynosure Epiphany Felicity Serenity Furtive Glamour Inure Labyrinthine Lagoon Desire Leisure Softness Moiety Nemesis Panacea Scintilla Example for loading more items...
Canvas Query Ajax AutoComplete for jQuery About jQuery Autocomplete allows you to easily create autocomplete and autosuggest boxes for text input fields. Built with focus on performance - results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root. What's new $('#query').autocomplete(options) now returns an Autocomplete instance only for the first matched element. Autocomplete functionality can be disabled or enabled programmatically. var ac = $('#query').autocomplete(options); ac.disable(); ac.enable(); Options can be changed programmatically at any time, only options that are passed get set: If you need to pass additional parameters, you can set them via setOptions too: New parameters when initializing autocomplete. var reEscape = new RegExp('(\\' + ['/', ' Installation Include jQuery in your header. How to use Here is an Ajax Autocomplete sample for the text field with id "query"