Entries Tagged 'ajax' ↓
Found on Ajaxian » Front Page authored by Dion Almaer
November 14th, 2008 — ajax
Our own Michael Mahemoff is at it again, creating a simple little GUID generator called Guid0:
Guid0 is a GUID library for Javascript. Okay, it doesn't yet do official, bona fide, 128-bit, GUIDs yet, mainly for API design reasons. But this is a library you might find useful if you want to generate a unique ID in your Ajax app.
JAVASCRIPT:
-
-
// simple
-
guid = new Guid();
-
var newguid = guid.generate();
-
-
// options
-
guid = new Guid(
-
{
-
chars: Guid.constants.base85, // or you could say "abc" if you only wanted those chars to appear
-
epoch: "June 1, 2003",
-
counterSequenceLength: 2, // a counter field appended to the end
-
randomSequenceLength: 2 // a random field appended to the end
-
}
-
);
-
He is working on 128-bit support.
Found on Ajaxian » Front Page authored by Dion Almaer
November 12th, 2008 — ajax, ui
John Resig linked to an interesting new time picker UI that Maxime Haineault implemented as a jQuery plugin:
He made a “two click” time picker. The first click is within the time field. This activates the display and allows the user to choose the time - all of which is done by moving the mouse over the times that you desire. The final click is anywhere - filling in the time that was chosen. It’s hard to explain, you simply have to try it.
One thing that you’ll notice using it is that it’s fast. Very fast. I’d argue much faster than clicking into the input area, moving to the keyboard for entering the time, typing the time, then moving back to mouse.
I would be remiss not to mention John’s other post of the day, where he goes into detail on CSS Animations and CSS Animations.
Found on Ajaxian » Front Page authored by Ben Galbraith
November 10th, 2008 — ajax
Alex Moore wrote in to highlight a couple of developments in the Ext JS community. First, the Ext JS roadmap has been updated with goals for the 2009-targetted 3.0 release:
# All new lightweight, high-speed core base library
# Flash Charting API
# Ext.Direct - Remoting and data streaming/comet support
# Integrated client-server data binding/marshaling of updates
# ListView component
# Enhanced Button and Toolbar components
# ARIA/Section 508 accessibility improvements
# CSS updates for reset style scoping and easier custom theming
# Update the Ext event registration model
# Ext.Ajax enhancements
Second, Alex provided a link to a preview screencast of a new Ext JS visual developer tool, currently in early development:
Found on Ajaxian » Front Page authored by Dion Almaer
November 5th, 2008 — ajax
SproutCore drove onto the scene when MobileMe launched using it.
Since that blast, the team has been diligently working on getting a 1.0 release, and Charles Jolley has
posted on the future of SproutCore:
It’s been nearly four months since SproutCore launched to the public at WWDC and we couldn’t be happier with the results. 18,000 developers have installed SproutCore (sudo gem install sproutcore ftw), nearly 1,000 developers have joined the mailing list, and dozens of projects are underway at companies around the world. One additional one has already gone public (OtherInbox).
During this time the developers working on SproutCore haven’t stood still either. 150 tickets closed, some major new features, and enhancements for Windows, IE7, Chrome, and others. Many of the changes we’ve applied have come from you, the community. In fact, over 20 people have contributed code to SproutCore now, which is outstanding for such a young project.
Now that I’m back from my trip, though, I thought we should spend a little time talking about where we are headed next.
Put simply, our next major milestone is SproutCore 1.0. When I started planning SproutCore 1.0, here were the criteria I laid out for it:
- Make the common easy and the uncommon possible. Typical behavior for an application should be nearly automatic without limiting a developer’s ability to hack something cool.
- Support the whole application. SproutCore must support the whole application development process, including the model, view, and controller layers as well as design, testing, documentation, and deployment concerns.
- A small consistent API. Favor configuration over class-bloat. Use consistent “guessable” design patterns. The API should be vetted well enough that it will not need to change dramatically once released.
- Offer broad platform support. Perform well on all modern browsers. Perform adequately on IE7 and earlier.
Charles then goes into detail on some of the bigger changes:
Faster Observers and Bindings
Property observing and bindings underpin almost everything you do in the SproutCore framework. Because of that it is really important to make this feature small and fast. We have currently rewritten this code to make it almost 2x faster on its own, and to use significantly less memory. More on this in the coming days.
DOM Library Independence
Currently, SproutCore depends on Prototype for a few cross-platform functions. This really doesn’t make much sense. In particular we think of Prototype, jQuery, and others as “DOM manipulation libraries”; somewhat like low-level drawing APIs. SproutCore should live above this layer, allowing you to choose whichever drawing library you like to create custom views. Additionally, removing this dependence will allow those who do not want to use Prototype to eliminate that page weight from their apps.
New Model Layer
The current implementation for SC.Store, SC.Collection, SC.Record and the servers have not been revisited since they were written almost two years ago. When these were first deployed, they worked fairly well for the small apps that used them. Since then we’ve seen applications loading 40,000+ records into memory in a regular basis and a move towards investigating use of the coming local storage facilities on modern browsers. This code is going to see a wholesale rewrite as we update the API to accommodate this new, larger scale world.
There has been other SproutCore related news recently:
Found on Ajaxian » Front Page authored by Ben Galbraith
November 4th, 2008 — ajax
Back in May, we posted a story about “the other JIT”, the JavaScript Information Visualization Toolkit. Its creator, Nicolas Garcia Belmonte, has recently implemented a number of new features and has created a tutorial, some examples, and some documentation to describe them.
The JavaScript Infovis Toolkit is a JS Information Visualization library that includes radial layout of trees with animations, Treemaps, Hyperbolic Trees and Spacetrees…
One of the most challenging features I wanted to add to these visualizations was the possibility of dealing with mutable data. This way visualizations would also be useful to show how data changes over time, and updates to this data would be translated into smooth animations from one state of the graph to another.
The user could also interact at a deeper level with the visualizations, not only exploring the data, but also altering it, making updates to the information and seeing the results in real time.
Nicolas has created two “real-world” examples to show off this new ability to mutate the graph live:
Example One: Linux Module Dependency Visualizer
It uses the RGraph visualization with the morphing operation to show dependencies between different modules you might find with the apt-get tool. When clicking on a node you’ll set this node as root. Then the graph will perform a second animation, updating the dependencies for the new centered module. Many details about the package are also provided under the Details toggler. You can also go to previous visited modules by using the History toggler.
The accompanying blog entry to this example shows how both the client- and server-side code was implemented, making it interesting indeed.
Example Two: Visualizing relations between artists and bands dynamically
Building on a previous example, this new revision adds a “second animation [that] will take place [when clicking on a node], morphing the tree into the new node’s perspective.”
It’s still an alpha release, but it’s already in the wild.
Found on Ajaxian » Front Page authored by Dion Almaer
November 4th, 2008 — ajax
Noupe keeps the roundups going with Most Wanted Ajax Techniques: 50+ Examples and Tutorials that consists of a lot of projects we have covered over time, but some new ones, and the added touch of putting it together in one place.
Ajax Forms
ShoutBox
Validate a Username AJAX
Ajax Instant Messenger
Ajax Tabs Content
Ajax Shopping Carts
Ajax Star Ratings
Ajax Inline Edit
Ajax Progress Bar
Ajax Pagination
Ajax File Browser & Manager
Ajax Calendar
Ajax Photo Manipulation
Ajax Dynamic Image Gallery and Slideshows
Ajax File Upload
Ajax AutoCompleter
CMS
Polls
Tabular data manipulations
Miscellaneous
Found on Ajaxian » Front Page authored by Dion Almaer
October 21st, 2008 — ajax
Noupe is doing a good job cataloging content, such as their post on great JavaScript CSS menu libraries which features:
- Sexy Sliding Menu - Andrew Sellick decided to use mootools due to the smoothness of their effects, however, he developed a sliding menu using script.aculo.us
- FastFind Menu Script - This script allows for nested menus, based on dynamic "AJAX" responses. The menu can also be dragged/dropped thanks to the jQuery Interface Library.
-
- Webber 2.0 Dock Menu - Great example of a dock type navigation.
-
- Phatfusion- Image Menu - Image menu using javascript, onClick event keeps selected item open and to close it again.
-
- Drag and Drop ordering in a TreePanel - This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked "leaf" (the files).
-
- Custom Menu Events This is a combination of animation and custom events where Think Vitamin team show us how menu items sliding into view and firing off subscribable events using Yahoo! UI
-
- Context Menu Functionality This is a combination of animation and custom events where Think Vitamin team show us how menu items sliding into view and firing off subscribable events using Yahoo! UI.
-
- LavaLamp jQuery Sliding Menu It is a jQuery sliding nifty effect menu with light weight code and extra two more interface styles.
-
- Slashdot Menu- Dynamic DriveThis is a stylish collapsible menu modelled after the navigational menu found on Slashdot.
-
- Mootools menu with Accordeon and EffectsThis cool menu has a neat effect by hovering over the links, and opens a 2 level submenu with an accordeon.
-
- CSS Dock Menu If you are a big Mac fan, you will love this CSS dock menu that Nick La designed. It is using Jquery Javascript library and Fisheye component from Interface and some of their icons.
-
- jQuery Plugin: Sliding Menu A very simple sliding menu using the effects provided by the Interface plugin.
-
- Accessible expanding and collapsing menu
-
Found on Smashing Magazine authored by Steven Snell
October 16th, 2008 — ajax
AJAX provides Web developers with plenty of opportunities to enhance the user experience and improve the performance of their websites. There are countless ways that AJAX can be used, and fortunately there are plenty of good and useful AJAX tutorials out there to help you with your own implementation.
This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. You’ll find tutorials on working with forms, building shopping carts, creating chat features, working with log-ins and usernames and much more.
For more on AJAX see:
Useful AJAX Tutorials
Build an AJAX-Powered Shopping Cart
NETTUTS shows us how to build an AJAX-powered shopping cart using PHP, jQuery and some plug-ins.
AJAX Username Availability Checker Using MooTools 1.2
When allowing a user to register a username, you can use AJAX with MooTools to let them check the availability of the username being submitted.
Introduction to AJAX Calls Using jQuery and PHP
If you’re not familiar with using AJAX calls with jQuery and PHP, this is a good starting point.
AJAX and XML: AJAX for Tables
IBM.com has a lot of useful articles on using AJAX. This one shows how to create tabs and tables.
AJAX and XML: AJAX for Chat
Learn how to create a simple chat box for a website.
Creating a Dynamic Poll with jQuery and PHP
This poll is created with PHP, XHTML and jQuery. AJAX effects are used to eliminate the need for a page refresh when the poll is submitted.
RSS AJAX JavaScript Ticker
This AJAX ticker may be useful for displaying news headlines or similar content to visitors.
Building Your First AJAX Application with PHP
An introductory post for getting started with AJAX.
Taking AJAX Further with PHP
Following up on the preceding introduction, this post goes a bit further.
jQuery/JavaScript - Customizable AJAX Pagination
AJAX can also be used to improve the pagination of a website.
One Form, Many Uses - Server-Side jQuery with Jaxer
AJAX can help you get more use out of one form rather than create multiple forms.
How to Call Server-Side Function from Client-Side Code Using PageMethods in ASP.NET AJAX
This post shows a work-around for calling server-side functions from the client side.
Developing Portlets Using JSF, AJAX, and Seam - Part 1, Part 2, and Part 3
An in-depth three-part series to help you create portals.
AJAX Forms with jQuery
Trevor Davis shows how to create a form that will check an email address for validity, makes sure there are no blank fields and display an error if something isn’t right or complete.
Easily Build Powerful Client-Side AJAX Paging Using jQuery
This is another useful tutorial on improving pagination with AJAX.
Use jQuery and ASP.NET AJAX to Build a Client-Side Repeater
This tutorial shows how to improve user experience and reduce server load by using a client-side repeater.
Develop AJAX Applications Like the Pros - Part 1: Using the Prototype JavaScript Library and Script.aculo.us
The first part of this three-part series includes an introduction to the Prototype JavaScript library.
Develop AJAX Applications Like the Pros - Part 2: Using the Prototype JavaScript Framework and Script.aculo.us
The second of the three parts moves on to the Scriptaculous library.
Develop AJAX Applications Like the Pros - Part 3: Use DWR, Java, and the Dojo Toolkit to Integrate Java and JavaScript
The third and final part takes you through the process of setting up a message board.
PHP Components: Autosuggest
Using PHP and AJAX, you can add an autosuggest feature to a search box.
AutoCompleter Tutorial
This tutorial produces a result similar to the preceding tutorial.
A Dynamic AJAX Table Example Using Dojo and RESTful Web Services on Glassfish
This tutorial takes you through the process of creating a dynamic table as you would see on a travel-booking website.
AJAX Overhaul - Part 1: Retro Fit Existing Sites with AJAX and jQuery
Have an existing website that needs some enhancements? This tutorial series takes you through the process.
AJAX Overhaul - Part 2: Retro Fit Existing Sites with jQuery, AJAX, Tooltips, and Lightboxes
The second part of this series takes you further through the process of improving a shopping website with tooltips and lightboxes.
AJAX Overhaul - Part 3: Retro Fit Existing Sites with jQuery, AJAX Tabs, and Photo Carousels
The third part of the series adds some nice AJAX effects with tabs and carousels.
AJAX Overhaul - Part 4: Retro Fit Existing Sites with jQuery and AJAX Forms
The final part of the series looks at enhancing the purchase form.
Auto Populating Select Boxes Using jQuery and AJAX
Learn how to allow users to choose a top-level category in a select box that will trigger the subcategory box to autopopulate.
Using AJAX to Validate Forms
Use PHP and jQuery with some AJAX to create a form that validates the data entered.
Easy AJAX with jQuery
This tutorial includes some introductory information on AJAX and jQuery and will help you get started.
Quick and Dirty AJAX (video)
This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX.
Load Content While Scrolling with jQuery
This tutorial creates a scrolling effect similar to DZone’s.
Wicket - Updating ListViews Using an AjaxLink
Create a table that will update without a full page refresh when a link is clicked.
AJAX for Evil: Spyjax
A look at the dark side of AJAX: viewing browsing habits.
How to Integrate Google Calendar in Your Website Using AJAX
Calendars have a great use in a number of websites.
Edit in Place with AJAX Using jQuery JavaScript Library
Allow a visitor to edit the HTML of a page they are visiting.
Creating an AJAX Rating Widget
Create a rating widget that allows visitors to rate an item with stars or some other measurement.
Use AJAX and PHP to Build Your Mailing List
Allow visitors to subscribe to a mailing list without a page refresh.
Nice AJAX Effect for Message Box Using MooTools
Use this AJAX effect to give visitors a message based on some action.
Build an AJAX Dropdown Menu
This is a fairly simple tutorial on creating a drop-down menu.
Making AJAX Work with Screen Readers
For accessibility purposes, this article covers how AJAX effects can affect users of screen readers.
How to Load In and Animate Content with jQuery
Another NETTUTS tutorial for enhancing a website with jQuery and AJAX.
Continuous Pagination
Another look at the subject of pagination by demonstrating continuous pagination, in which the user keeps scrolling down rather than going to another page.
Making Element Selection and AJAX simple with DOMAssistant
A tutorial to get you started with the DOMAssistant JavaScript library.
Slider Using PHP, AJAX, and JavaScript
Create a nice slider using PHP, JavaScript and AJAX.
ASP.NET AJAX Calendar Extender
Seven different tips and tricks for working with this calendar extender.
Log-in/Sign-up Screen Using AJAX Modal Pop-up Extender
This is a quick look at creating log-in and sign-up forms.
Dealing with Large Data in AJAX
Get your AJAX application to meet your data requirements.
Creating a Gmail-Like AJAX Status Display
Use Prototype and AJAX to create this status display.
Creating an AJAX-Enabled Calendar Control
Another tutorial that focuses on enhancing calendars with AJAX effects.
JavaScript Error Publishing using ASP.NET AJAX
Use AJAX to display errors in code.
About the Author
Steven Snell is a Web designer and freelance blogger who can be found on his own blogs: Vandelay Website Design and DesignM.ag. (al)
Found on Ajaxian » Front Page authored by Dion Almaer
October 15th, 2008 — ajax
An interesting top 12 list has been published, on using Javascript to fix 12 common browser headaches:
- Setting Equal Heights (jQuery example:
$("#col1, #col2").equalizeCols();)
- IE6 PNG Alpha Transperancy support
- Changing CSS Classes in JavaScript
- Browser selectors in CSS (
$('html').addClass($.browser);)
- min-/max- height & width support
- Center Elements Vertically / Horizontally
- Display Q tags in Internet Explorer
- Increase the size of click targets and get more call-to-action conversions
- Lazy loader
- bgiframe: Helps ease the pain when having to deal with IE z-index issues.
- ieFixButtons: fixes the buggy behavior of the element in Internet Explorer 6 and 7
- Fix Overflow
As you will see, most of the solutions are jQuery plugins, but you could roll your own.
Found on Ajaxian » Front Page authored by Dion Almaer
October 14th, 2008 — ajax
Steve Souders posted on Runtime Page Optimizer a tool that you can think of as a performance proxy. It sits on the server side, and cleans up content before it is sent back to the browser.
What can it do? Steve let us know:
RPO automatically implements many of the best practices from my book and YSlow, so the guys from Aptimize contacted me and showed me an early version. Here are the performance improvements RPO delivers:
- minifies, combines and compresses JavaScript files
- minifies, combines and compresses stylesheets
- combines images into CSS sprites
- inlines images inside the stylesheet
- turns on gzip compression
- sets far future Expires headers
- loads scripts asynchronously
RPO reduces the number of HTTP requests as well as reducing the amount of data that is transmitted, resulting in a page that loads faster. In doing this the big question is, how much overhead does this add at runtime? RPO caches the resources it generates (combined scripts, combined stylesheets, sprites). The primary realtime cost is changing the HTML markup. Static pages, after they are massaged, are also cached. Dynamic HTML can be optimized without a significant slowdown, much less than what’s gained by adding these performance benefits.
Steve had another couple of interesting posts recently:
- Say no to IE6 discusses how we need to do something to help upgrade IE6 users (to IE7 is fine!)
- Raising the bar talks about results from Steve’s UA Profiler tests and how new browsers are pushing forward