CodeTrace

Drag and drop files to your browser

CodeTrace — Sun, 06 Jun 2010 16:40:32 +0000

The mechanism behind: the Ajax library, the DOM element wrapper and the Asset component are assuring most of the work (handling the upload and the callback process), the DDM detects the dragged files, then your browser is doing the rest, defining the interaction between your desktop and the file input (nicely styled of course).

By now, two browsers are playing well with the demo (Safari 4, Chrome 2+).

For the firefox browser use the folowing:
http://www.thecssninja.com/demo/drag-drop_upload/

Here’s the code :

Swell.Core.Event.add('upload', 'change', function() {
    $('loader').show();
    $('foorm').xhr(function() {
        var currentEl = $('upload').current();
        $('filelist').show();
        for (var i = 0, len = currentEl.files.length; i &lt; len; i++) {
            $('filelist').appendHTML(currentEl.files.item(i).fileName + '
');
        }
        var imgs = this.responseText.split('|');
        new Swell.Core.Asset().load('img', imgs, function(img) {
            $('loader').hide();
            $(img).appendTo('image-container');
        });
    });
});

http://blog.justswell.org/drag-and-drop-files-from-your-desktop-to-your-browser-using-javascript/
http://www.webmonkey.com/2009/08/html_5_file_api_brings_drag-and-drop_file_uploads_to_the_web/

jQuery UI – Styling Buttons and Toolbars

CodeTrace — Wed, 26 May 2010 18:55:42 +0000

coded real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content.

http://www.filamentgroup.com/examples/buttonFrameworkCSS/
http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
http://csswizardry.com/css3/

linq.js – LINQ for JavaScript

CodeTrace — Mon, 03 May 2010 08:41:21 +0000

linq.js – LINQ for JavaScript, Features:

Implement all .NET 4.0 methods and many extra methods (inspiration from Rx, Achiral, Haskell, Ruby, etc…)

Full IntelliSense support for VisualStudio

Two versions – linq.js and jquery.linq.js (jQuery plugin)

Support Windows Script Host

Source: linq.js – LINQ for JavaScript. (http://neue.cc/reference.htm)

http://jsinq.codeplex.com/

SlickGrid – jQuery datagrid plugin

CodeTrace — Sat, 24 Apr 2010 03:30:47 +0000

Quite simply, SlickGrid is a JavaScript grid/spreadsheet component.

Some highlights:

Adaptive virtual scrolling (handle hundreds of thousands of rows)

Extremely fast rendering speed

Background post-rendering for richer cells

Configurable & customizable

Full keyboard navigation

Column resize/reorder/show/hide

Column autosizing & force-fit

Pluggable cell formatters & editors

Support for editing and creating new rows.

“GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.

http://wiki.github.com/mleibman/SlickGrid/examples

Ajax.org – pure javascript framework

CodeTrace — Thu, 25 Mar 2010 16:13:56 +0000

Ajax.org Platform is a pure javascript application framework for creating real-time collaborative applications that run in the browser. Ajax.org Platform radically changes the way you write applications:

- Live markup
- Markup and JSON api
- Collaborative backbone
- 100% open source software

http://www.ajax.org/#demos/elements.chart.3dline
http://www.ajax.org/#demos/elements.flowchart

jQuery Visualize Plugin: HTML 5 Canvas

CodeTrace — Mon, 15 Mar 2010 23:02:56 +0000

jQuery Visualize Plugin, ktorý používa HTML 5 Canvas:

$(’table’).visualize({ type: ‘pie’, pieMargin: 10, title: ‘my Graph’ });

$(’table’).visualize({ type: ‘line’ });

$(’table’).visualize({ type: ‘area’ });

$(‘table’).visualize({ type: ‘pie’, pieMargin: 10, title: ‘my Graph’ });
$(‘table’).visualize({ type: ‘line’ });
$(‘table’).visualize({ type: ‘area’ });

http://www.filamentgroup.com/examples/charting_v2/
http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/

ExtJS.com JavaScript Library

CodeTrace — Sat, 27 Feb 2010 21:13:11 +0000

Knižnica, využíva jQuery, orientovaná iba na klientské použitie, nezávislá na serverovej technológii, beží aj v PHP aj v ASP.NET.

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ id: 'company' , header: 'Company' , width: 160, sortable: true , dataIndex: 'company'},
{ header: 'Price' , width: 75, sortable: true , renderer: 'usMoney' , dataIndex: 'price' },
],
stripeRows: true,
autoExpandColumn: ‘company’,
height: 350,
width: 600
});

http://www.extjs.com/deploy/dev/examples/
http://examples.extjs.eu/

JSON a Google Data Protocol

CodeTrace — Mon, 25 Jan 2010 08:41:13 +0000

Google IO video ako použiť JSON na prenos dát server/client, effektívne updaty na server cez PUT a PATCH.

var head = document.getElementsByTagName(‘head’)[0];
var script = document.createElement(’script’);
script.src = ‘http://picasaweb.google.com/data/feed/api/user/’ + username + ‘?alt=json&callback=callback’;
head.appendChild(script);

http://code.google.com/events/io/2009/sessions/EvolutionGoogleDataProtocol.htm
http://code.google.com/apis/gdata/docs/json.html

HTA aplikacia full screen

CodeTrace — Tue, 05 Jan 2010 10:20:09 +0000

Naozajstný full screen mode pre silverlight alebo html. Ideálne pre zariadenia s dotykovou obrazovkou. Stačí ked tento kód uložíte ako textový subor, premenujete koncovku na .hta a do start-up adresára operačného systému vložíme odkaz na tento hta súbor.

<html>
<head>

<hta:application showintaskbar = “yes” caption = “no” border = “thick” contextmenu = “yes” icon = “path_to_icon.ico” innerborder = “no” scroll = “no” singleinstance = “yes” resizable = “yes” windowState = “maximize” >

head>
<body scroll=”no”>
<p>HTA app fullscreenp>
body>
html>

XAMPP inštalačka apache + mysql

CodeTrace — Sat, 02 Jan 2010 04:38:43 +0000

XAMPP je jednoducho inštalovateľný balík potrebných aplikácii na hostovanie php webov, obsahuje napr:

Apache

PHP scripting

MySQL

phpMyAdmin

http://sourceforge.net/projects/xampp