Mark Gharibian's blog

JavaScript Step Carousel Viewer

Tagged:  

Dynamic Drive has posted a jQuery-based Step Carousel script that enables you to display images or rich HTML by side scrolling them left or right. Besides supporting sequential scrolling, it also has the capability to jump to any scroll item or scroll x items at a time. The script has two public methods, two custom event handlers, and three "status" variables to provide more control. It's also able to handle content defined directly inline on the page or loaded dynamically with Ajax. Content is simply contained in DIVs with a common CSS class. For implementation details, visit Dynamic Drive.



Visit the Step Carousel Homepage for more information, demos, and to download the script.

Google Code University

Tagged:  

If you're interested in learning more about Ajax development, distributed systems, web security, or C++/Java/Python and you haven't checked out Google Code University, you're missing out on a valuable educational resource on these topics and more.

Here's a sample video from the site:
Web 2.0 - AJAX - Creating a Rich User Experience

    Description: Incorporated AJAX is enabling the creation of applications with better functionality, usability, and an overall better user experience. This panel will discuss how desktop-like applications can be delivered via the browser with Ajax, the efficiency of developing such applications, and the importance of the GUI. They will also share their thoughts on highly successful applications and the shortcomings of using Ajax.

Also on the site, you'll find a series of Web Programming lecture slides provided by the University of Washington.



For these and other great resources, visit the Google Code University

MooCrop - a JavaScript Image Cropping UI

Nathan White has developed an image cropping library called MooCrop, built with the MooTools JavaScript framework. MooCrop can be combined with a server side script to provide image manipulation functionality in your apps. The library weighs in just under 11K and totals for about 35K when you add in the YUI compressed MooTools framework.

Resize the crop area below and double-click it to see the result on the right:

Here are some features of the MooCrop class as described on its homepage:

  • Completely customizable CSS styling
  • Detects and handles multiple CSS box models
  • Allows for masking to be toggled
  • Ability to hide resize handles during drag
  • Custom events for your own modification
  • Relative based postioning rather then absolute (should handle overflow properly)
  • Works and retains layouts on floating images.
  • Resize from 8 different directions
  • Ability to set minimium size limit
  • Cleans up nicely, leaving your DOM in its original state when removed.
  • Fast!

Visit the MooCrop homepage for more demos, information, and downloads

Introducing TubeSpy, the latest creation from Ajaxonomy Labs

Tagged:  

You might have caught on to the fact that we here at Ajaxonomy appreciate the spy game. We are happy to announce a Beta version of TubeSpy, the latest addition to Ajaxonomy Labs. TubeSpy is a web based spy that allows you to see what videos are being watched on YouTube right now. YouTube has a widget like this on their homepage and TubeSpy was an effort to turn that widget into an app.

TubeSpy was built with jQuery, a fantastic JavaScript framework, the jQuery UI library for the tab controls, and of course, the YouTube API. Tested in IE6, IE7, and Firefox 2.

With TubeSpy you can:

  • see what others are watching
  • watch videos without leaving the page you're on
  • save videos as you see them scrolling
  • easily watch related videos
  • and more...

The more you use TubeSpy, the more interesting it becomes. Watching as videos scroll by creates a small, constantly shifting, window into the world. Visit TubeSpy after news breaks in the political world and you'll find some political videos, check it out after your favorite reality show airs for clips people have posted.

We hope you enjoy using the app and find some value in it. Feel free to post any feedback in the comments. Do keep in mind that this is a Beta release, and calling it a Beta release is a CYA (Cover Your Apps) measure to have an excuse in case a bug pops up in the app.

Yes, I have a license to Spy, take me to TubeSpy

Beginner CSS Tutorial

Tagged:  

I came across this beginner CSS tutorial I'd like to share with those of you that haven't had much experience with CSS.

Topic's include:
* What Is CSS?
* CSS Selectors
* CSS Units
* CSS Inline
* CSS Internal
* CSS External
* CSS Colors
* CSS Fonts
* CSS Text

Here's an excerpt from the tutorial on the advantages of CSS:

* Quick layout changes: Because all your CSS styles are in one or more .css files which are re-used for all pages it's easy to change the look of your website. For instance to add a 5 pixel wide red border to all your images you can simply write img {border:5px solid red}. This saves a lot of time as opposed to changing every single image tag in all your pages.
* Smaller file size: Separating content from presentation helps keep HTML file sizes down and improves page loading times. Once CSS files have been loaded for the first time they will be cached by the browser and loaded instantly for all following pages that use the same style sheets.
* Consistency: With CSS it's easy to keep a consistent look throughout your website.
* Cascading: Multiple style definitions will cascade into one, i.e. the last written one will overwrite all previous ones. This is very useful if you need to work with an existing style sheet and want to make some changes without altering the original code.
* Accessibility: Having content separated from presentation is a great help to people with viewing disabilities who often benefit from well structured HTML to understand the page.
* Design without tables: Before CSS lots of web designers mis-used tables to position elements on their page which is a bad thing for accessibility and also makes the code unnecessarily big and complicated. With CSS you can position any element exactly where you want without using tables.

Click here to visit the tutorial

Are you ready? The IE8 Readiness Toolkit has arrived.

Tagged:  

That's right, IE8 Beta 1 is here.

Check out the overview of features, changes, and enhancements as well as a readiness toolkit for developers.

Here are the direct links:

Live Chat with Jonathan Snook

Tagged:  

In case you didn't hear about this over at Ajaxian...

Jonathan Snook will be conducting a live chat tomorrow (3/5/08) at 10:00am EST (15:00 GMT) via UStream.

Location: http://www.ustream.tv/channel/snookca
Date/Time: 3/5/08 at 10:00am EST (15:00 GMT)
Topic: Q&A relating to Jonathan’s development work with Adobe AIR, and questions regarding JavaScript, frameworks (PHP or JavaScript), or about freelancing.

SWFUpload v2.1.0 Beta

Earlier this month, a new beta release of SWFUpload was posted over at SWFUpload.org. This release reduces the amount of code in SWFUpload, improves code reuse, fixes bugs, and adds some new features. All JavaScript in the project is said to have been run through JSLint.com to improve general quality and consistency. For a full change log, click here.

For those of you not familiar with SWFUpload, it is a small JavaScript/Flash library to handle file uploads. Here's a short description of how it works:

SWFUpoad uses a hidden Flash movie to handle file selection and upload. JavaScript is used to activate the file selection dialog. The file selection dialog is configured to allow the user select to a single file or to multiple files. The file types can be restricted so users only select the appropriate files (e.g., *.jpg;*.gif).

Once files are selected each is processed to check for valid file extensions and that the file is within size limits. Flash calls several pre-defined JavaScript callback functions which the developer overrides in order to update the page's UI so users can see file progress or errors.

The uploaded file is submitted separately from the rest of the page and form. Each file is uploaded individually which keeps the server-side upload handling script simple as it only ever has to handle a single uploaded file at a time. Since Flash is providing the upload service the page does not have to be reloaded. The usage pattern for SWFUpload is more like that of an AJAX application than that of standard HTML form. Often the server-side script that receives the uploaded file is different than the target of the page's form. The page's form will be processed separately from the file upload.

Check out some demos

Click here to download

How JavaScript Timers Work

Tagged:  

John Resig has posted a very interesting excerpt on JavaScript timers from his upcoming book, Secrets of the JavaScript Ninja, due out this fall. In his post, John covers timer delay and asynchronous events on a single thread, including three functions associated with timers and the differences between each:

  • var id = setTimeout(fn, delay); - Initiates a single timer which will call the specified function after the delay. The function returns a unique ID with which the timer can be canceled at a later time.
  • var id = setInterval(fn, delay); - Similar to setTimeout but continually calls the function (with a delay every time) until it is canceled.
  • clearInterval(id); - Accepts a timer ID (returned by either of the aforementioned functions) and stops the timer callback from occurring.

Here's a quick summary of the key points of the post:

* JavaScript engines only have a single thread, forcing asynchronous events to queue waiting for execution.
* setTimeout and setInterval are fundamentally different in how they execute asynchronous code.
* If a timer is blocked from immediately executing it will be delayed until the next possible point of execution (which will be longer than the desired delay).
* Intervals may execute back-to-back with no delay if they take long enough to execute (longer than the specified delay).

Read the full post for more detail on these key points and to better understand how JavaScript timers work.

Upgrading to Prototype 1.6 just got easier

Here's some good news for those of you who still need to upgrade your Prototype 1.5 code to Prototype 1.6. Tobie Langel, a core developer on the Prototype team, has developed a script that will warn you of any deprecations or API changes between versions. If you don't know why you should upgrade to 1.6, check out the release info for version 1.6, including the changelog and release notes for 1.6.0_rc0 and 1.6.0_rc1. The script is used with Firebug and is Firefox only, but once you've upgraded, you're good to go in all browsers.

Using the script is easy. To migrate a page from 1.5 to 1.6:

  1. Find the script tag that references prototype.js. Change the path to point to the 1.6.0.2 version (or else overwrite the existing prototype.js with the new version).
  2. On the very next line, add a script tag that references deprecation.js.
  3. Develop your app as normal.

When your code calls a method that’s been deprecated, replaced, or modified, the script will log a warning or error to your Firebug console. Clicking its hyperlink will take you to the deprecation script itself, which isn’t all that helpful; but the message itself will contain a stack trace that points to the source of the error.

Download the deprecation script.

Read more about the script over at the Prototype blog.

Syndicate content