How to Code a jQuery Rolodex-Style Countdown Ticker
Get the FlatPix UI Kit for only $7 - Learn More or Buy Now I’m sure many of you are familiar with how an office rolodex works. You have a series of cards with contact information which you can flip over to sort through alphabetically. These are most common in the office settings because businesses must to keep in touch with so many different people. Although the value is in translation into a web interface, we can still use this idea to create a really neat timer effect. More specifically I have seen a couple countdown widgets on landing pages. Selecting Graphics I am admittedly not an amazing Photoshop design guru. I really love this flip-clock countdown for both the gradients and textures. However I want to use dynamic HTML inside each div to update the counter. Core HTML Layout For this example we don’t need a whole bunch of confusing HTML markup. Inside a single block area we have three core sections. The last area contains the label text for each card. Detecting Clock Numbers
Creating an iOS-like Home Screen with CoffeeScript
Martin Angelov Today we are going to create an iOS-like home screen using CoffeeScript – a new JavaScript based language, and the jQuery library. CoffeScript has a clean syntax that lies somewhere in between Ruby and Python. If you haven’t used any of them, don’t worry – it is not required. However you will need to be familiar with JavaScript so you can better understand the concepts behind the language. We are also going to use the Touchable plugin, so we can listen for touch-based events. First, what is CoffeeScript? CoffeeScript is a neat programming language meant to enhance the good parts of JavaScript, while working around the not so good. CoffeeScript works in every browser out there, and is compatible with all your existing JavaScript code (including libraries like jQuery and plugins). iOS -like Home Screen with CoffeeScript The HTML Lets start with the HTML markup of our iOS-like home screen. index.html <! The #mask div shows only one screen at a time with overflow:hidden. The iOS Dock
Line.do Realiser facilement une timeline en ligne | Les Outils Tice
Line.do est un outil tice qui permet de créer facilement une timeline ou frise du temps en ligne puis de la partager. Line.do vient rejoindre les nombreux outils existants qui permettent de créer des timelines. J’ai présenté ici il y a quelques mois de cela des outils de ce genre comme Timeline.js ou Dipity. Line.do se distingue par sa simplicité d’usage et l’élégance des timelines produites. Line.do permet aussi, bien sûr, d’intégrer des éléments multimédias. A tout moment vous pouvez éditer et ainsi compléter, modifier ou effacer une étape, un point de votre timeline. On partage une timeline dans son ensemble par mail ou sur les réseaux sociaux, mais vous pouvez aussi partager de la même manière chacun des moments de votre histoire. L’outil est en anglais mais il mérite un détour. Lien: Line.Do
okfn/timemapper
Tutorial: Create a Beautiful Password Strength Meter
Martin Angelov In this tutorial we will be creating a beautiful password strength indicator. It will determine the complexity of a password and move a meter accordingly with the help of the new Complexify jQuery plugin. Only when a sufficiently complex password is entered, will the user be able to continue with their registration. A PSD file is also available, so you can customize the form to your liking. The HTML We start off with a standard HTML5 document that will include our registration form. index.html <! We are including the latest version of jQuery, the Complexify plugin and our script.js right before the closing body tag for better performance. Password Strength Meter jQuery The jQuery code below is quite straightforward. assets/js/script.js With this out of the way, we can move on with the Complexify plugin that will validate the password. By tweaking the strengthScaleFactor property you can allow simpler passwords to be used. assets/css/styles.css We’re done! by Martin Angelov Tutorials
How to Use Brackets · adobe/brackets Wiki
Getting Brackets Downloads Brackets here for Mac, Windows and Linux (Debian/Ubuntu). Brackets is built with HTML, CSS and JS, but currently runs as a desktop application in a thin native shell that can access your local files. Updates are released about once a month. The Basics Initially, Brackets opens a default "Getting Started" project. You can open a different folder in the file tree on the left using File > Open Folder. Unlike other editors that show open files in tabs, Brackets has a "Working Files" list, which is displayed above the file tree. Split View Initially Brackets will show just one editor in the main view but you can split the main view so that 2 editors can be shown in whichever orientation you prefer (vertical or horizontal). You can do this by selecting View > Horizontal Split or View > Vertical Split. Brackets will remember the view layout for each project so switching to another project will show the layout you had chosen when the project was closed. Extensions Themes
Beautiful web-based timeline software
timemap - Javascript library to help use a SIMILE timeline with online maps including Google, OpenLayers, and Bing.
Timemap.js is a Javascript library to help use online maps, including Google, OpenLayers, and Bing, with a SIMILE timeline. The library allows you to load one or more datasets in JSON, KML, or GeoRSS onto both a map and a timeline simultaneously. By default, only items in the visible range of the timeline are displayed on the map. Version 2.0.1 Now Up! Version 2.0.1 is primarily a maintenance release, fixing a number of small bugs and cleaning up a few things that weren't quite right in v.2.0. Anyone using v.2.0 should probably upgrade to v.2.0.1, as it is more stable and includes very few changes other than bug fixes and new unit tests. Upgrading to v.2.x: Timemap.js v.2.x includes several important changes from 1.x: it removes the dependency on Google Maps v2, and adds dependencies on jQuery and the Mapstraction library to allow support for multiple map providers, including Google v3, OpenLayers, and Bing Maps. Simple Three-Item Dataset (using inline JSON data and Google Maps v3)
