|
AJAX News: stay one step ahead with the very best and latest in AJAX
from around the world
[ Stay informed: click here to bookmark this page ]
If you want to make your website truly interactive, you might want to take a look at our JavaScript Editor. Your visitors expect to be able to be active in the browser and not download everything to his/her computer. Finally, the people behind websites such as online pokerrooms are starting to realize this fact.
Jump to latest AJAX news by SWIK, AJAX Matters and Ajaxian:
AJAX News on SWIK.net
Ajax on SWiK
Popular Toolkits
Ajax or Asynchronous Javascript and XML as it was first termed, is shorthand for Javascript UI development, particularly Javascript development that uses the XMLHttpRequest object. XMLHttpRequest and other techniques used to communicate to the server from Javascript prompted the invention of the word, using these techniques Web UIs driven by Javascript may be made more interactive with server data and more responsive, as small fragments of data may be exchanged efficiently bet
1 hour ago
JSL
1 hour ago
3 hours ago
A Collection of jQuery, Ajax and PHP Tutorials with live demos, tutorials posted on 9lessons blog. In these demos I had explained about jquery connectivity with MySQL database, Ajax implementation, JSON with PHP and Animation addons to your web pages. I hope it's useful for you. Thanks!
3 hours ago
4 hours ago
6 hours ago
6 hours ago
I stumbled on the Mozilla Foundation’s Drumbeat project recently:
Drumbeat gathers smart, creative people like you around big ideas, practical projects and local events that improve the open web.
It’s very well done combination of projects + community.
Drumbeat Toronto Meetup
There’s a whole slew of cool projects already one here. A small sample:
7 hours ago
7 hours ago
8 hours ago
8 hours ago
Blogger dosen't have a "popular posts" widget, and since I am using Google Analytics and there is a popluar posts metric, i decided to roll my own and host it using App Engine. I am roughly following the examples on the Google Analytics Api site but adapting it for AppEngine use.
10 hours ago
13 hours ago
14 hours ago
14 hours ago
AJAX MattersAJAX News from AjaxianAjaxian » Front Page
Cleaning up the web with Ajax
by Brad Neuberg
7 hours ago
I stumbled on the Mozilla Foundation’s Drumbeat project recently:
Drumbeat gathers smart, creative people like you around big ideas, practical projects and local events that improve the open web.
It’s very well done combination of projects + community.
There’s a whole slew of cool projects already one here. A small sample:
by Brad Neuberg
1 day ago
Google Rich Snippet
Oli Studholme has an excellent new article on HTML5 Doctor on the different ways HTML5 can be extended with things like microformats, the link tag, and more. Why would you want to do this?
While HTML5 has a bunch of semantic elements, including new ones like <article> and <nav>, sometimes there just isn?t an element with the [...]
by Brad Neuberg
2 days ago
Dmitry Baranovskiy and team have released another version of Raphaël, an excellent drawing and animation library backed by SVG (VML on Internet Explorer). New features in Raphaël 1.5 include custom attributes and keyframes. Keyframes can be defined similar to CSS3 Animations:
PLAIN TEXT
JAVASCRIPT:
el.animate({
"20%": {cy: 200, easing: ">"},
"40%": {cy: 100},
"60%": {cy: [...]
by Brad Neuberg
2 days ago
The SVG Web team has announced a new release. SVG Web is a drop in JavaScript library that makes it easy to display SVG graphics on Internet Explorer 6, 7, and 8 using Flash.
The new SVG Web release, like all of their releases, is named after especially silly D&D monsters. The new release is code [...]
by Brad Neuberg
3 days ago
Perfect for a Monday is a cool 3D model editor built using the Canvas tag and created by Jayesh Salvi:
by Brad Neuberg
3 days ago
Via Phil Franks comes an interesting HTML5/CSS3 site for There Studio, which is a kind of coworking space in London:
The site itself has a number of circles with information bouncing on the screen that respond to mouse clicks and moves.
Let's crack the site open using View Source and see how they are doing things. First, they have a repeated background with a little plus symbol with the following style rule on the <body> tag:
PLAIN TEXT
CSS:
background: #ddd url( style="color:#006600; font-weight:bold;">) 50% 0 repeat fixed;
The textual content in each of the circles is clean semantic HTML that is search engine friendly:
PLAIN TEXT
HTML:
<div class="section who first">
<h3>Who</h3>
< makers, thinkers <span class="ampersand">&</span> doers</p>
</div>
To turn that into this:
The <h3> is first transformed into having an underline with the padding and margin being on the bottom:
PLAIN TEXT
CSS:
h3 {
border-bottom: 1px solid #ccc;
display: block;
font-size: 25px;
font-weight: normal;
padding: 0 0 10px;
margin: 0 0 8px;
}
JavaScript creates the circle. The script tags themselves are at the end of the HTML page at the bottom of the <body> tag, a good performance practice in general.
The heart of drawing each circle is in the createBall and createContentBall methods. If a ball will have HTML content, then the createContentBall method is used, otherwise the createBall method is used. Let's look at the createContentBall method; we'll break it down:
PLAIN TEXT
JAVASCRIPT:
function createContentBall) {
var element = document.createElement( 'div' );
element.className = className;
element.width = element.height = size;
element.style.position = 'absolute';
element.style.left = -size + 'px';
element.style.top = -size + 'px';
element.style.cursor = "default";
canvas.appendChild);
elements.push( element );
var circle = document.createElement( 'canvas' );
circle.width = size;
circle.height = size;
if 'image' && className !=='image first') {
var graphics = circle.getContext( '2d' );
graphics.fillStyle = color;
graphics.beginPath();
graphics.arc( size * .5, size * .5, size * .5, 0, PI2, true );
graphics.closePath();
graphics.fill();
}
element.appendChild( circle );
content = document.createElement( 'div' );
content.className = "content";
content.onSelectStart = null;
content.innerHTML = html;
element.appendChild);
if 'image' && className !=='image first' ) {
content.style.width = (size - contentPadding*2) + 'px';
content.style.left = (((size - content.clientWidth) / 2)) +'px';
content.style.top = ((size - content.clientHeight) / 2) +'px';
}
var b2body = new b2BodyDef();
var circle = new b2CircleDef();
circle.radius = size / 2;
circle.density = ballDensity;
circle.friction = ballFriction;
circle.restitution = ballRestitution;
b2body.AddShape);
b2body.userData = };
b2body.position.Set( Math.random() * stage[2], Math.random() * [3) + size/2);
b2body.linearVelocity.Set( Math.random() * 200, Math.random() * 200 );
bodies.push( world.CreateBody) );
}
First, we create an absolutely positioned DIV that will house our Canvas tag:
PLAIN TEXT
JAVASCRIPT:
var element = document.createElement( 'div' );
element.className = className;
element.width = element.height = size;
element.style.position = 'absolute';
element.style.left = -size + 'px';
element.style.top = -size + 'px';
element.style.cursor = "default";
canvas.appendChild);
elements.push( element );
Then we draw the actual circle itself using the Canvas tag and append it to our container DIV (Note that an SVG circle created programmatically could have also been used here):
PLAIN TEXT
JAVASCRIPT:
var circle = document.createElement( 'canvas' );
circle.width = size;
circle.height = size;
if 'image' && className !=='image first') {
var graphics = circle.getContext( '2d' );
graphics.fillStyle = color;
graphics.beginPath();
graphics.arc( size * .5, size * .5, size * .5, 0, PI2, true );
graphics.closePath();
graphics.fill();
}
element.appendChild( circle );
Then we create another DIV to house the HTML content itself:
PLAIN TEXT
JAVASCRIPT:
content = document.createElement( 'div' );
content.className = "content";
content.onSelectStart = null;
content.innerHTML = html;
element.appendChild);
if 'image' && className !=='image first' ) {
content.style.width = (size - contentPadding*2) + 'px';
content.style.left = (((size - content.clientWidth) / 2)) +'px';
content.style.top = ((size - content.clientHeight) / 2) +'px';
}
Notice that we are setting content.onSelectStart to null above; this is so that when you run the mouse button over the text it doesn't select (An alternative way to do this is to use the HTML pointer-events CSS property).
Next comes code to deal with the physics of the circles, which uses Box2D.js, a JavaScript physics engine ported from Flash:
PLAIN TEXT
JAVASCRIPT:
var b2body = new b2BodyDef();
var circle = new b2CircleDef();
circle.radius = size / 2;
circle.density = ballDensity;
circle.friction = ballFriction;
circle.restitution = ballRestitution;
b2body.AddShape);
b2body.userData = };
b2body.position.Set( Math.random() * stage[2], Math.random() * [3) + size/2);
b2body.linearVelocity.Set( Math.random() * 200, Math.random() * 200 );
bodies.push( world.CreateBody) );
Basically, we define a circle, give it a radius, density, friction, and restitution, and then add it to our collection of shapes with a position and linear velocity. Box2D will then handle the physics and we can just take the values back out to draw things on the screen with a setInterval, which happens in the loop method:
PLAIN TEXT
JAVASCRIPT:
function loop() {
delta[0] += (0 - delta[0]) * .5;
delta[1] += (0 - delta[1]) * .5;
world.m_gravity.x = 0 // -(0 + delta[0]);
world.m_gravity.y = -(100 + delta[1]);
mouseDrag();
world.Step);
for (i = 0; i <bodies.length; i++) {
var body = bodies[i];
var element = elements[i];
element.style.left = m_position0.x - width>> 1)) + 'px';
element.style.top = m_position0.y - height>> 1)) + 'px';
if tagName == 'DIV') {
var rotationStyle = 'rotate(' + m_rotation0 * 57.) + 'deg)';
element.style.WebkitTransform = rotationStyle;
element.style.MozTransform = rotationStyle;
element.style.OTransform = rotationStyle;
}
}
}
This method gets called with a setInterval periodically. Basically, we apply a delta and a gravity at each time step; see if the mouse is being pressed down (with hooks for touch devices like the iPhone to see if a finger is being pressed down); tell the Box2D World about our gravity and delta and to make an iteration step; and finally use the computed physics values from Box2D to apply CSS3 rotation transforms on our parent DIV and move the element's CSS top and left values around the screen.
by Brad Neuberg
6 days ago
I stumbled across http://webkit.org/specs recently, which is basically a nifty listing of all custom extensions Apple/Webkit has made to web specs, written up as specs themselves so that other browsers can implement them:
Squirrelfish Bytecode
Timed Media Elements
CSS Effects
Extensions to CSS 3 Media Queries
The 'pointer-events' property
There were some on here that I had never even heard of. [...]
by Brad Neuberg
6 days ago
TechCrunch reports on a Googler, Paul Truong, who created an HTML5-based game for Gmail called Galactic Inbox using his 20% time:
When you start it up, a little Gmail logo envelope guy pops out of a ?20% Projects Lab? and starts flying. Essentially, he?s a spaceship and can shoot objects coming his way. It?s simple, but [...]
by Brad Neuberg
7 days ago
Ryan Seddon, aka the CSS Ninja, has a nice blog post up where he reverse engineers the new feature in Gmail where you can drag attachments from an email on to your desktop.
Note that the feature only currently works in Chrome.
Ryan begins with the following code:
PLAIN TEXT
JAVASCRIPT:
var file = document.g
file.addEv
evt.dataTr
},false);
Describing the code Ryan says:
From [...]
by Brad Neuberg
7 days ago
(Various Shivs)
Via JD Bartlett comes HTML5 innerShiv for IE. Before innerShiv, the following would not work in IE:
PLAIN TEXT
HTML:
var s = document.createElement('div');
s.innerHTML = "<
document.body.appendChild(s);
For example, let's imagine we have some CSS that defines the following for the HTML5 elements footer, header, and section:
PLAIN TEXT
CSS:
footer, header, section {
border:1px solid #ccc;
display:block;
padding:10px;
}
Unfortunately, even if [...]
by Brad Neuberg
8 days ago
Last week Adobe announced they are jumping into the Web Fonts game in a partnership with Typekit:
For this debut of Adobe Web Fonts, I think we?ve made some great choices. Everyone knows Myriad and Minion ? pervasive workhorse sans serif and serif typefaces, respectively, which will prove to be as useful on the web as they have been [...]
by Brad Neuberg
8 days ago
From Hakim El Hattab (who has some very nifty HTML5 experiments up) comes some nice tips on using the Canvas tag:
Cross browser implementation
There are no real discrepancies between the canvas outputs of different browsers so long as the JavaScript code is written correctly (if not, browsers tend to try and fix things for you, [...]
by Brad Neuberg
8 days ago
I don't usually post acquisition news on here, but I just wanted to congratulate 280 North, who we've covered on here many times and are fellow members of the Ajax community. 280 North produces the awesome Cappuccino language/framework, including the 280 Slides presentation web application. Techcrunch is reporting that Motorola has bought 280 North. From [...]
by Brad Neuberg
9 days ago
The last month has seen an interesting back and forth over CSS Media Queries. In a nutshell, CSS Media Queries make it possible to apply style sheets only if certain properties are available on the display device. For example, you could have a stylesheet only display for screen devices with a maximum screen width of [...]
by Brad Neuberg
9 days ago
Jonas Wagner has ported the Flash 2D physics engine Box2DFlash to JavaScript:
In his demo Jonas uses the Canvas tag to map the physics simulations on. Click on it to create explosions:
Jonas talks about the approach he used to convert the original library from ActionScript to JavaScript:
At first I thought this conversion would be trivial as [...]
...
|
Design stunning AJAX applicatins!
