background preloader

How to Mimic the iGoogle Interface

How to Mimic the iGoogle Interface
Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. In this tutorial, I'll show you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface, which has plenty of potential applications! First, let's list exactly what we'll be creating here and what features it'll have: This interface will contain several widgets.Each widget can be collapsed, removed and edited.The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique).The user will be able to edit the color and title of each widget.Each widget can contain any amount of regular HTML content, text, images, flash etc. Please note that we will only be covering the front-end aspect of the project in this tutorial. Since it's all about the user and because the idea was influenced by iGoogle we're going to be calling this project 'iNettuts'. First column: inettuts.js:

Most Popular Web Design Blogs to Get Inspired | designPunx Sharebar 0EmailShare So here we are with our first post, and we are really excited! What made us launch a new web design blog when there is such a great amount of others, already cool and reputable? Because we feel that there is something special we can put in the contemporary web design community. We believe that our original approach to the issues and fresh ideas may be useful for developers of various experience levels, and that is why we are welcome you to support us in our initiatives and estimate our endeavours! Of course, we drew some inspiration from popular web design blogs and we are greatful for a marvellous job all webmasters do. 1. Guys who launched Webdesigner Depot are true design-lovers who stick to best techniques and examples. 2. Really smashing! 3. Noupe is for those web designers and developers who crave for the best content and latest news concerning all topics related to web design, e.g. graphics, design trends and techniques, and much more. 4. 5. 6. 7. 8. 9. 10.

Jeditable - Edit In Place Plugin For jQuery - Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements. I am based on Dylan Verheul’s editable. For those in hurry download latest source or minified. How does in place editing work? Normal flow is this. Basic usage While reading you might also want to check live demo. <div class="edit" id="div_1">Dolor</div><div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. There is only one mandatory parameter. Code above does several things: Elements with class edit become editable. Not bad for oneliner, huh? Elements with class edit_area will use textarea as input. These two examples cover most of needs you usually have. What is sent to server? When submitting change following data will be POST:ed to server: id=elements_id&value=user_edited_content But wait! Demo

Dojo: The Definitive Guide » Blog Archive » iGoogle-like drag-and-drop for Shindig (ala Dojo) My consulting firm has been spending a good bit of time augmenting and providing developer advice for a really interesting startup based out of Berkeley, CA called Life360; in case Life360 sounds familiar, it might be because they were one of the first place teams in Google’s Android Developer Challenge a while back. In short, the crew out in Berkeley is developing an incredible developer platform for “taking care of your family’s what-ifs”, and it’s been a lot of fun getting to be in on all of the discussions and working with the amazing talent on board there to see it happening. One of the most recent tasks we’ve been working on is an iGoogle-like drag-and-drop container for gadgets. There’s a really nice project out there called Shindig that implements the gadget specification, but there’s little to be had in the way of a nice sophisticated container that gives you drag-and-drop operations, a custom title bar, and a maximized view. Tags: dnd, drag-and-drop, life360, shindig

blog » Hexbins! Binning is a general term for grouping a dataset of N values into less than N discrete groups. These groups/bins may be spatial, temporal, or otherwise attribute-based. In this post I’m only talking about spatial (long-lat) and 2-dimensional attribute-based (scatterplot) bins. If you’re just after that sweet honey that is my code, bear down on my Github repository for this project — hexbin-js. Rectangular binning The simplest 2D bin is rectangular. The above is a shot from a little example I produced on jsFiddle, while learning Mike Bostock’s fantastic D3 JavaScript library for HTML and SVG data-binding and visualization. Binning can be good for both the users and the creators/developers of static or interactive thematic maps or other visualizations. In the above image (from Antaeus Concepts) the data points are represented in black, and due to overlap the true concentration/density distribution is indiscernible from the graphic. Hexagonal binning Adler writes, Hex history and theory

Dynamisez vos tableaux avec jqGrid Dans un article du blog officiel, j’ai présenté rapidement JQuery comme une librairie facilitant grandement l’utilisation du javascript dans les interfaces html. Cependant, l’un des autres intérêts de JQuery se trouve dans la variété des plugins disponibles (après tout, nous ne sommes pas là pour réinventer la roue). Aujourd’hui, je vais vous présenter jqGrid. Ce plugin permet d’injecter des tableaux dynamiques dans votre page html. la possibilité de redimensionner les colonnes du tableau par drag-&-drople tri et le filtrage des données assurés au niveau du javascriptla pagination des données gérée par le javascriptla possibilité d’alimenter le tableau à partir de données xml ou Jsonles cellules du tableau pouvant basculer en mode “édition” afin d’en modifier le contenu Pour celà, il faut déclarer un élément html vide de type table (une convention de jqGrid). jQuery("#grid_id").jqGrid(options);

prometheus.pdf (application/pdf Object) Long Deep Breathing and Breath of Fire Pieter Schoonheim Samara For those that have been doing Long Deep Breathing and Breath of Fire for many years, the breath is so natural and easy that unless one is also teaching one might not easily focus on what the difficulty could possibly be. Quite often students will fill the lower abdominal area of the lungs, then as the try to fill the chest area, they shift the air from the lower area to the chest, as they try to lift the rib cage, and do not actually keep the downward pressure of air in filling upwards, but instead only shift upwards, so that a complete breath is still only chest breathing and not actually diaphragm breathing. The conscious awareness of the diaphragm is not apparent to every one so some means needs to be provided to somehow allow attention to the sensation of the use of the diaphragm to come into focus until the natural rhythm of the diaphragm is felt and the effortless force and flow of prana takes over. return

Tangle: a JavaScript library for reactive documents Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn. This is a simple reactive document. When you eat 3 drag cookies, you consume 150 calories. This is the HTML for that example. When you eat <span data-var="cookies" class="TKAdjustableNumber"> cookies</span>, you consume <span data-var="calories"> calories</span>. And this is the JavaScript. Write your document with HTML and CSS, as you normally would. Try out some examples. Proposition 21: Vehicle License Fee for State Parks The way it is now: California has 278 state parks, including state beaches and historic parks. What Prop 21 would do: Proposes to charge car owners an extra $18 on their annual registration bill, to go into the state park fund. Analysis: Suppose that an extra $18 was charged to 100 % of California taxpayersvehicle registrations. Fc = 2 KHz Q = 0.8 Unstable

lindner - On Vox: Windows Live API, better than page scraping So we use this toolkit from Octazen to scrape contact lists off of various sites. Our ever eager users (ab)used this feature so much that hotmail blocked us. So I waded through reams of API docs over at and finally came up with this prototype perl script to talk to their API servers. Gets the job done for now. Will want to rewrite it in native Java and add decent error handling soon. #! jQuery Timelinr ↩ CSSLab Dando vida al tiempo / Giving life to time Selecciona tu idioma / Select your language: This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc. Last stable version: 0.9.6 Configuration: Include the jQuery library and this plugin: Inicialize-it with the default parameters: $(function(){ $().timelinr();}); Or configure it as preferred: HTML markup must be as follows: <div id="timeline"><ul id="dates"><li><a href="#">date1</a></li><li><a href="#">date2</a></li></ul><ul id="issues"><li id="date1"><p>Lorem ipsum. Icon designed by Sebastián Cortés Changelog: Este sencillo plugin ayuda a que le des más vida y estilo a las aburridas líneas de tiempo. Última versión estable: 0.9.6 Configuración: Incluye la librería jQuery y luego este plugin: Inicialízalo con los parámetros por defecto: O customízalos: El marcado HTML debe ser de la siguiente forma: Cambios: Demo Horizontal

Related: